Creating custom VSCode Snippets

Written by Ryan Warner

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

Create a global snippets file

Create a global snippets file.

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

Define and use your snippet

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"