Let's talk about snippets. How often you repeat particular parts of code within your repository or look for a syntax of some mixin or function?

How often you need to use media queries or functions that you'd just wish to type as quickly as possible and move on with your code?

There's a really easy way of making this process way more pleasant. You can create code snippets, that will boost your productivity A 👏 L👏O👏T.

How it works

Let's take media queries as an example. Instead of typing:

@media screen and (min-width: $breakpoint-desktop) {

}

you could simply type in (and this is just an example) md and hit enter. This would create the structure above and put tabulator inside of it.

You can create multiple snippets like that, where you could define:

(Naming convention here is just an example)

mm - media for mobile
mt - media for tablet
md - media for desktop

You can go with a slightly different approach and leave min-width empty, and fill it in after hitting enter (so you don't have to create multiple snippets for the same purpose)

Use cases

Some of the simple use cases for snippets:

1) You have custom mixins in your boilerplate, that you don't need/want to remember. Maybe you are used to different syntax in other boilerplate that you use, and you want to unify that by creating snippets.

2) You're bored with typing console.log() every single time you debug something.

3) You hate typing @media queries.

4) You have some custom SCSS functions.

5) You hate creating the structure of imports and functions for your React components.

AND 👏 SO 👏 MUCH 👏 MORE

Let's build our snippet

1) Open VS Code with the project that you want to work on
2) Click ⌘ + ⇧ + P, which opens commands list (ctrl+shift+p on Windows).

3) Search for Preferences: Configure User Snippets. This will open another modal instead of the commands list.

4) Here we have a few different options:

• Create global snippets, that will work across all repositories (select New global snippets file).

• Create local snippets, that will work inside a single repository (select New snippets file for '<NAME_OF_YOUR_REPOSITORY'>).

• Select programming language, you want to create a snippet for.

5) If you select local snippets, this will create .vscode folder with a file inside of your repository. The file will have an example of a snippet that you can use as a starting point.

6) Now when you have your file ready, let's take the example from the file and try to understand it.

"Print to console": {
  "scope": "javascript,typescript",
  "prefix": "log",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
}

Line by line

1) "Print to console" is a description of the snippet that will help you to find it in suggested options.

2) In "scope" you need to add all the languages you need that snippet to work in (you don't want to see console.log snippet writing your CSS, right?)

3) "prefix" is literally a name you will need to type in inside your code to get the snippet working.

4) "body" is the most important part. It's an array, which takes strings and each string is the next line of code (in this example, the snippet will create two lines of code). You probably noticed $1 and $2 inside of the body. These are tab stops. It means that after you use the snippet, tabulator will stop first on $1 and after next tab hit, it will jump to $2. That's super useful.

You can also use \n to make a new line and keep the whole body as a single string

5) "description", that's just a longer description of the snippet.

That's it. You've just created your own snippet! 👏👏👏

Few examples of snippets

"Media queries mixin": {
   "scope": "css, scss",
   "prefix": "rwd",
   "body": [
     "@include rwd($1) {",
     "  $2",
     "}"
   ],
   "description": "Snippet is using custom mixin from boilerplate"
}

"React with Styled-Components": {
  "prefix": "rs",
  "body": [
    "import React from 'react';",
    "import styled from 'styled-components';",
    "",
    "const $1 = () => (",
    "  $2",
    ");",
    "",
    "export default $1;"
  ]
}

"setTimeout": {
    "prefix": "st",
    "body": [
      "setTimeout(() => {",
        "$1",
      "}, $2)",
    ],
    "description": "SetTimeout function"
  }

What are the most common use cases of snippets for you? Let me know in the comments!

PS. There's a whole lot of extensions that provide snippets for a particular purpose (React snippets, Vue snippets, ES6 snippets, SCSS snippets, etc.)

Other VS Code Tips & Tricks

• Working on multiple windows in VS Code