Code Editor Tips and Tricks

Snippets, Emmet, and Keyboard Shortcuts
10m 28s
VSCode Settings
11m 46s

Most of the content for this lesson is in the videos above. In some of the videos we might make references to things you want so here's the stuff you might need from the videos

Snippets, Emmet, and Shortcuts

Snippets are a way for you to write a little piece of code and then you hit the Tab key and it will trigger a bigger chunk of code. The whole idea is to speed up the process of writing common code. It also helps you avoid basic mistakes. Emmet is a big library of snippets that's already built into VSCode. If you're using other code editors, you might need to install Emmet separately.

Snippets are great, but sometimes you just need to be a good keyboard user with the wide array of available shortcuts you have on your computer. Shortcuts generally come in two types:

  • Operating System Based
  • Application Based

In the video above, we show you some common OS based shortcuts that we think you should learn. We also showed some VSCode based (Application Based) shortcuts. Here are the official "cheat sheets" for VSCode's shortcuts. Don't try to learn all of these, it's too much. But if you focus on just a few at a time it can make a big difference.

Mac
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Windows
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Linux
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

VSCode Settings

Here are the settings we showed you in the video above.

{
  "explorer.confirmDelete": false,
  "editor.tabSize": 2,
  // Use "Subtle Match Brackets" instead of the boxy
  // ones built-in
  "editor.matchBrackets": "none",
  "editor.renderIndentGuides": false,
  "editor.renderLineHighlight": "gutter",
  "editor.minimap.enabled": false,
  "editor.formatOnPaste": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "One Monokai",
  "workbench.iconTheme": null,
  "files.restoreUndoStack": false,
  // This prevents the "quick suggestions" menu from
  // popping up all the time which is something I don't
  // like to see, but that menu also makes Emmet behave
  // oddly. 
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  // With turning off quickSuggestions, now we need to 
  // tell Emmet how we want to start our snippet triggers
  "emmet.triggerExpansionOnTab": true,
}

Extensions

The extension we installed for our setting to use "Subtle Match Brackets" was https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets

Loading content