Creating custom VSCode Snippets

Written by Ryan Warner

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

Create a global snippets file.

  • Code > Preferences > User Snippets
  • New Global Snippets File...
  • Name your file and press ENTER

Define your snippet and start using it!

  • 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 (this file type is determined by the scope key).
  • Type your defined prefix and press TAB.
  • See your snippet appear.

View my VSCode snippets on GitHub

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