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

#javascript #vscode #productivity #tutorial

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.

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

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);"
    }
  }
]

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