DEV Community

Daniel Bellmas
Daniel Bellmas

Posted on • Updated on

My Custom Snippets in VScode

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:

  1. For scss files where $spacer = 1rem
  "Add spacer": {
    "prefix": "s",
    "body": ["* $$spacer"],
    "description": "Adds a spacer to the current line"
  }
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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?!)

  1. For the global scope: to add todo comments quickly
  "TODO comment": {
    "prefix": "to",
    "body": "// TODO $1",
    "description": "Add a TODO comment"
  }
Enter fullscreen mode Exit fullscreen mode

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.

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);"
    }
  }
Enter fullscreen mode Exit fullscreen mode

For more information on snippets in general visit:
Snippets in Visual Studio Code

Top comments (3)

Collapse
 
dranoid profile image
dranoid

How did i ever not think of the TODO snippet😑😂. This was a nice read!

Collapse
 
danielbellmas profile image
Daniel Bellmas

Changed my life 😂.
Thank you!!

Collapse
 
oryam profile image
Oryam

+1 for the spacer and the evaluation 🚀