My Custom Snippets in VScode

#vscode #productivity #tooling #tutorial

Hi Everyone!

This one is short but sweet 🙂

To create your own snippets you'll need to select Code > Preferences (User Snippets under File > Preferences on Windows), and then select the language for which the snippets should appear, or the New Global Snippets file option.

And here are my three favorite ones, and I'll explain why:

For scss files where $spacer = 1rem

  "Add spacer": {
    "prefix": "s",
    "body": ["* $$spacer"],
    "description": "Adds a spacer to the current line"
  }

I use this one a lot with the key binding I made, (to see how, you'll need to see my other post about key bindings).

And here is the code for that:

  // Calculate the current selection
  {
    "key": "ctrl+m",
    "command": "editor.emmet.action.evaluateMathExpression",
    "when": "editorHasSelection"
  }

This shortcut will make you stay in vscode and use its inner calculator rather than touching your mouse and slowing you down...
And you know how much they don't like us touching our mice.
(I couldn't find a good meme, is that even possible?!)

For the global scope: to add todo comments quickly

  "TODO comment": {
    "prefix": "to",
    "body": "// TODO $1",
    "description": "Add a TODO comment"
  }

And the last one that I use almost all the time is the console.log() snippet, and again if you want to create your own keyboard shortcut that uses a snippet too 🤯 you can find it here.

This is a special case where we use a snippet and the keyboard shortcut, which is honestly the best of both worlds.

Here is the code for it:

// Add an empty log statement
  {
    "key": "shift+cmd+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus && !editorHasSelection",
    "args": {
      "snippet": "console.log($1);"
    }
  }