How to create snippets in vscode and code like a pro

How to create snippets in vscode and code like a pro

Snippets are small pieces of codes. They are used to code faster and not to worry about small details.

Below is an example of a snippet.

how-to-create-custom-snippet-in.gif

It is really easy to create a snippet and I am going to guide you.

Steps

  1. On mac, go to code, then preferences, user snippets and select the programming language. I will use CSS for this example.
  2. On windows, go to settings, then user snippets and finally select the programming language. I will use CSS for this example.
  3. A css.json file will open. You can clear out the content or just right above the initial content that was commented out, you can create your own json file in this format:
  {
  //snippet name
  "Bonarhyme Variables": {
    // The prefix is what is used to trigger the snippet and the body will be expanded and inserted.
    // To create a space, create a quotation mark with no content in it.
    // Make sure you use single quotes for your codes where you have to use quotation marks.
    // $0 for the final cursor position (see line 23).
    // ${TM_FILENAME_BASE} for placeholder for the file name. (see line 28)
    "prefix": "variable",
    "body": [
      ":root {",
      "  --light-gray: '#EEE';",
      " --dark-gray: '#666';",
      "  --medium-gray: '#ccc';",
      "}",
      "",
      "*, *::after, *::before{",
      "  margin: 0;",
      "  padding: 0;",
      "  box-sizing: border-box;",
      "}",
      "",
      "body $0 {",
      "  background-color: var(--dark-gray);",
      "  color: var(--light-gray);",
      "  border: var(--medium-gray) 2px solid;",
      "}",
      "/*${TM_FILENAME_BASE} is the filename*/"
    ],
    "description": "This is a variable for blue colors. It also features the initial and important setup for every css file."
  }

}
  1. To use your snippet, open a css file, and type in the prefix of the snippet (type variable for this example).

That is it guys! You have learnt how to create your own custom snippets. I am looking forward to see the amount of codes you will save in your snippets to save time.

Leave a comment and a like to support me

#2Articles1Week