What are Snippets in VSCode?

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. (Visual Studio Code)

For example, in JavaScript, instead of inserting console.log(’Hello World…’) you can use VSCode built-in snippet log by inserting it, then press the tab button to show that entirely on the editor. There are many other built-in snippets on the VSCode that you can use:
  • Press shift+cmd+p in Mac or shift+ctrl+p in Windows to open the Command Palette.

  • Insert Insert Snippet command in the Command Palette to get a list of the snippets for the language of the current file, then press the enter button to see them.

  • Many extensions on the VS Code Marketplace include snippets. You can search for extensions that contain snippets in the Extensions view (shift+cmd+x in Mac or shift+ctrl+x in Windows) using the @category:"snippets" filter. (Visual Studio Code)

    How to create your own snippets?
    I’m working with React, and there is a popular snippet extension for React on the VS Code Marketplace, but most of its snippets are useless for me. So I prefer to create my own snippets instead.
    I want to create a React TypeScript component snippet which takes its name from the file name:
  • Open the Command Palette by pressing shift+cmd+p in Mac or shift+ctrl+p in Windows.

  • Insert configure user snippets

  • Select the language for which the snippets
    should appear.

  • For example, to create a snippet for a React
    TypeScript file, choose typescriptreact then press the enter button.

  • VSCode will open a ***.json (typescriptreact.json for the previous selection).

  • Insert the below attribute on the ***.json (typescriptreact.json) object:

  • "React Arrow Function Component": {
      "prefix": "trafc",
      "body": [
        "type Props = {};\n",
        "const $TM_FILENAME_BASE = ({}: Props) => {",
        "  return <></>;",
        "};\n",
        "export default $TM_FILENAME_BASE;\n"
      ],
      "description": "Create TypeScript React arrow function component"
    }
  • You can use trafc snippet for React TypeScript file.
  • Now I want to describe what the above code says:
  • “React Arrow Function Component” is the snippet name. It is displayed via IntelliSense if no description is provided.

  • prefix is the snippet that we can use on the VSCode to display the body.

  • body is an array of strings consisting of the code we want to be displayed via the prefix snippet. Every line of our codes should be placed in a string. If you need to use enter character type \n.

  • description as its name shows is the description of our snippet.

  • Another example is to create a ‍‍console.log with a description like console.log("status:", status). The snippet configuration is shown in the below section:
    "console.log with description": {
      "prefix": "lg",
      "body": ["console.log('${1:desc}:', ${1:desc})"],
      "description": "Insert a console.log() with description as the           same as the variable."
    }
  • The new thing is the ${1:desc}. The 1 means after you insert the snippet, the cursor will be placed on that position.

  • desc means these two parts should be the same in order to VSCode type them simultaneously. For more information check this link.

  • 27

    This website collects cookies to deliver better user experience

    What are Snippets in VSCode?