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.