Creating custom VSCode Snippets

When I find myself copying and pasting boilerplate code, I create a snippet to help me code faster.

Create a global snippets file.

• Code -> Preferences -> User Snippets
• Select "New Global Snippets File..."
• Name your file and press enter

• In this example, we're creating a simple React component snippet.

    // snippets.code-snippets

    {
      "ReactComponent": {
        "prefix": "component",
        "scope": "javascript",
        "body": [
          "import React from 'react'",
          "",
          "export default props => {",
          "  return <div>New Function Component</div>",
          "}"
        ],
        "description": "Create a React component"
      }
    }

• Save (CMD+S) the snippets.code-snippets file.
• Open a JavaScript file.
• Type your defined prefix and press tab.
• See your snippet appear.

What snippets will you create? If you make a snippet, I'd be interested to see it. Post a reply or DM me on Twitter!

View my personal VSCode snippets on GitHub.

Sources: The official VSCode docs, "Snippets in Visual Studio Code"

You can find more of my work on my website, ryan.warner.codes.

Comments

[Zane Milakovic]

Haha. I didn’t even know they had built in snippets. Must of been added in a release notes I missed!