DEV Community

Ryan Warner
Ryan Warner

Posted on • Edited on • Originally published at ryan.warner.codes

5 1

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

Create a global snippets file.

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

Define and use your snippet

  • 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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Collapse
 
khrome83 profile image
Zane Milakovic

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

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more