This is how I set up my VS Code.

Advantages of VS Code

It contains an interactive debugging system that is easy to use once you understand it.

It contains a git interface panel for checking in code, along with an easier to read side-by-side file diff-er, which is easier to read than git diff.

If contains a terminal window. Since I usually have three open, I use it as my active one to do commands on such as restarting the server, and I can drop my terminal windows down to two.


One time setups

Shell command to open vscode from terminal using code:


Cmd + P to pull up the command palette, type >shell command, hit enter.

  • Fix issue: in React Native projects, it tries to add import console from 'console'; when using console.log. Remove auto imports: Go to Code > Preferences > Settings > Search for Javascript Auto Imports > uncheck Enable/disable auto imports suggestions.

Preferred Packages


Path Intellisense - when typing a path name, will give a dropdown for filling in the file path.

Beautify css/sass/scss/less - To format this stuff automatically. Shift + option + F

VS Live Share - Great for sharing the same coding session with someone.

Project Manager - create and manage a quick list of your project folders to switch between

linter-xo - because I'm a bastard and not just using eslint, I use xo. Mapped xo.fix to Option + F


Beautify - To format JS. Previously the built-in JS prettifier worked fine, but then it stopped working, so I installed this. Shift + option + F

GhostText - Type in text fields using VSCode instead of your browser. Very useful when you're typing a lot of code in-browser. E.g. I used this when adding hundreds of lines of custom styles in SquareSpace's tiny custom styles window. Also text editor shortcuts are nice to have.

Settings Sync - Once you want to move your VS Code settings to another computer

Quokka.js - Like node repl in your file? Seems really cool but I keep forgetting to use it.

Inline Parameters for VSCode - Adds the name of the args to your function calls.


Code::Stats - because fun and not productive

Add jsdoc comments - Highlight a function, Cmd + Shift + P for Command palette, type doc, to get "Add Doc Comments" to pop up, hit enter and a comment section above your code creates boilerplate for documentation on a function. Still testing, not sure if this saves much time.

TODO Highlight - Highlight TODO or FIXME in your code.

Packages to check out:

REST Client - send requests to your server like postman, but from files in VSCode.

Top JavaScript VSCode Extensions - Someone's opinion.

Handy Shortcuts

**^ is control for Mac Shortcut icons.

** is option for Mac Shortcut icons. It's less commonly known as alt.

⌘ + \ split editor

Shift + Cmd + v open .md preview. Works well with above split editor

⌘ + Shift + e open explorer tab

⌘ + Shift + f open find tab

⌘ + Shift + d open debug tab

Option + up/down move line up/down

ctrl + ` open terminal window

Shift + ⌥ + F prettify document

⌥ + ⌘ + Up/Down add another cursor above or below the cursor

⌥ + ⌘ + [ Fold selection (i.e. collapse a function)

⌥ + ⌘ + ] Unfold selection

⌘ + K, ⌘ + J Unfold all

⌘ + K, ⌘ + 1 Fold first level depth

⌘ + K, ⌘ + 2 Fold second level depth

⌘ + K, V Open markdown preview


⌘ + D add selection to next occurrence of what the cursor is on (i.e. next find match)

⌘ + K, ⌘ + D move last selection to next find match

Find Functions

⌘ + F local file search - will search the highlighter word or where the cursor currently is

⌥ + ⌘ + W match whole word option on finder


Shift + arrow key select ahead a letter

Option + arrow key jump ahead a word

Option + shift + arrow key select ahead a word

⌘ + ⌥ + left/right change window. I put my thumb between cmd and ⌥ to press both with one finger.

⌘ + click navigate to that file or function definition. May need additional configuration if you are using aliases.

ctrl + - / ctrl + shift + - to navigate back/foward a file when using cmd+click to navigate around. It technically is moving your cursor back a position.

Debug panel shortcuts

(After filling in commit message) cmd + Enter to commit the message with staged files.

Built-in snippets

When you type these things, it'll auto-fill for you:

/** will start a multi-line comment in Javascript

User Snippets

Shortcuts for common things:

  "console.log": {
    "prefix": "co",
    "body": [
    "description": "Creates a quick console log statement"
  "console.log name": {
    "prefix": "con",
    "body": "console.log('$1', $1);",
    "description": "To create a quick console log of a variable"

My Lint Settings


  "xo": {
    "extends": "xo-react",
    "space": true,
    "semicolon": false,
    "complexity": "never",
    "rules": {
      "camelcase": "warn",
      "unicorn/filename-case": 0,
      "comma-dangle": [
      "spaced-comment": [
          "exceptions": [


"xo": {
    "extends": "xo-react", <- for react support
    "space": true,
    "semicolon": false,
    "complexity": "never", <- for my never-ending switch-case statements that are more than 20 case statements long. My scenario is Redux + message box that reacts to a lot of different actions. I don't think I ever will be like "oh shit, I didn't mean to add _that_ many."
    "rules": {
      "camelcase": "warn", <- I like camels
      "unicorn/filename-case": 0, <- I honestly forget
      "comma-dangle": [ <- have commas at the end of a list in arrays/objects!
      "spaced-comment": [ <- this was basically for...
          "exceptions": [ <- this because we've some blocks of //////////... in our code that would format into // //////... with the linter

Graveyard packages

VS Code packages that I uninstalled as I did not find them useful:

Prettier - adds a shortcut for formatting your code nicely - Shift + ⌥ + F. This actually is already built in and seemed to have caused freezing/crashing to occur while this was installed.