Creating custom VSCode snippets (now in video format!)

Ryan Warner — Fri, 14 Feb 2020 18:19:48 +0000

Creating custom snippets to fit your unique workflow will help you code faster.

I turned my first dev.to article into video format to better communicate the content.

My full snippets file is on GitHub.

There's a lot more you can do with snippets. Take a look at the official documentation to see what's possible.

This video is also posted on YouTube.

Creating custom VSCode Snippets

Ryan Warner — Sat, 01 Feb 2020 17:57:22 +0000

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.

Forem: Ryan Warner

Creating custom VSCode snippets (now in video format!)

Creating custom VSCode Snippets