DEV Community

Daniel Bellmas
Daniel Bellmas

Posted on • Updated on

VS Code Keyboard Shortcuts | Or How To Become Even More Productive

Hi Everyone!

This article presents my favorite and most used keybindings,
and how you can customize your own!

So open your vs-code and follow along :)

First thing is to use the shortcut: ⌘ Cmd+K+S (keep the command key pressed)

Here we can look at all the actions vscode has made for us,
and we can change existing key bindings or search for new ones.

Change existing key bindings or search for new ones

After that, press this button at the top right corner:

press on this button to open the JSON file

Or you can open this editor by going to the menu under Code > Preferences > Keyboard Shortcuts. (File > Preferences > Keyboard Shortcuts on Windows)

Here we can see the JSON file where our custom keybinding will be declared.

Every keybinding has to have a key and command keys.
key: the keys we combine
command: the action
(we can also add a when key that will specify when we want to execute the action.)

Below you'll see my keybindings that I use all the time

[
  // Refresh the vscode window
  {
    "key": "cmd+r",
    "command": "workbench.action.reloadWindow",
    "when": "editorTextFocus"
  },
  // Transform the current selection to uppercase
  {
    "key": "ctrl+u",
    "command": "editor.action.transformToUppercase"
  },
  // Calculate the current selection
  {
    "key": "ctrl+m",
    "command": "editor.emmet.action.evaluateMathExpression",
    "when": "editorHasSelection"
  },
  // Create a new folder
  {
    "key": "ctrl+n",
    "command": "explorer.newFolder"
  },
  // Create a new file
  {
    "key": "ctrl+f",
    "command": "explorer.newFile"
  },
  // Extension shortcut: Add a log of the current selection
  {
    "key": "shift+cmd+l",
    "command": "turboConsoleLog.displayLogMessage"
  },
  // 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

You can notice that I'm using the turboConsoleLog extension for logging my variables, but I also wanted that the same shortcut will also output an empty console.log().

There you have it 🙏🏼 Hope you enjoyed 🙂

For more detailed information on shortcuts in general visit: visual studio keybindings

customize all the things

I'll soon post about how to add custom snippets, so be sure to like and follow 😉

Stay Tooned!

Brace yourselves, more personalization is coming!

Top comments (4)

Collapse
 
oryam profile image
Oryam

Awesome! Thanks for this.

Collapse
 
stephenscaff profile image
Stephen Scaff

Thanks bud! Just switched to VS Code recently (from Atom). Been meaning to look this up. So, super helpful.

Collapse
 
danielbellmas profile image
Daniel Bellmas

That means a lot, thank you!

Collapse
 
yarivshamash profile image
Yariv Shamash

Super cool, is so hard to find a straight to the point tutorial on keyboard shortcuts!
Thanks Daniel!!