Pimp your VS Code

I’ve been using Jetbrains products for a long time. I decided to check why VS Code has so many followers. Initially, I assumed that it’s because it’s free of charge, but after some time of using it I found out that is not the case.

It is all about the possibility of extensions and modifications that the creators gave us.

We can easily adjust most things to our preference, which I encourage you to do. Consider my article as an inspiration, not the revealed truth.

My main problem with VS Code was chaos in it’s interface. A lot of unnecessary features that distracted and irritated me. So let’s remove them.

In the beginning, we will modify a little bit the settings.json file (search for ‘settings’ in Command Pallete)

The activity bar visible on the right is unnecessary for me, I use shortcuts

  "workbench.activityBar.visible": false

I’ll also remove the minimap. It seems to be useful, yet in reality it only distracts attention from the code

  "editor.minimap.enabled": false

Go to hell Peek Previews - I want to go straight to the file, I’m not interested in previewing

"editor.gotoLocation.multipleReferences": "goto",
"editor.gotoLocation.multipleDefinitions": "goto",
"editor.gotoLocation.multipleDeclarations": "goto",
"editor.gotoLocation.multipleImplementations": "goto",
"editor.gotoLocation.multipleTypeDefinitions": "goto",

I don’t need information about currently open files in explorer

"explorer.openEditors.visible": 0,

Here comes the controversial decision, I’m turning off the tabs. It may seem absurd, but after it enforces good habits and in the long-term significantly increases productivity, about it later

"workbench.editor.showTabs": false

Additionally, I use my favorite JetbrainsMono font with ligatures and smooth caret animations

"editor.fontFamily": "JetBrains Mono",
"editor.fontSize": 12,
"editor.fontLigatures": true,
"editor.cursorSmoothCaretAnimation": true,

Such a small number of changes have made the view so clear

Let’s move on to the other improvements that count

VS Code has a great file search navigation mechanism. As you saw before, I disabled the bookmarks. All you need is…

Command + P and Command + P

It works great. If you want to open the previous file, just press this shortcut twice. Want to go deeper? Use the shortcut more times. You save a lot of time on not taking your hands off the keyboard. You also don’t waste time looking for a file in the 20 open tabs or the file explorer.

Let’s go to the hints. Give them to me now.

This change speeds up the display of suggestions, additionally snippets are displayed at the top.

"editor.quickSuggestionsDelay": 0,
"editor.suggestSelection": "first",
"editor.snippetSuggestions": "top",

Webstorm has accustomed me to the fact that the function selected from the hints has already open brackets. Let’s add it

"javascript.suggest.completeFunctionCalls": true,
"typescript.suggest.completeFunctionCalls": true,

A few small things that make work more pleasant

Trimming blank lines on save

"files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true,

Auto save on focus change

Especially useful when working with hot reloading

"files.autoSave": "onFocusChange",

How can we improve the clipboard?

We can prevent it from being overwritten by an empty value. We can also format its contents while pasting.

"editor.emptySelectionClipboard": false,
"editor.formatOnPaste": true,

Move cursor down after commenting the line.

For this feature we need an extension that can handle the macro. Add macros extension to your VS Code. Then add the following code to settings.json

"macros": { "commentLine": ["editor.action.commentLine", "cursorDown"] },

and map your favorite key combo in keybindings.json for this action

{
  "key": "cmd+/",
  "command": "macros.commentLine",
  "when": "editorTextFocus && !editorReadonly"
}

Move the global search to the right place

Global search placed in a sidebar and displayed vertically is not very convenient. Let’s find a better place for that

Global search scans all the files in the project even node modules, this puts chaos in the results

Let’s limit its scope

  "search.exclude": {
    // "**/everything-you-want-to-exclude": true,
    "**/node_modules": true,
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/.gitignore": true,
    "**/package-lock.json": true,
    "**/yarn.lock": true
  },

Enable Emmet for JSX

In combination with the extensions listed below, working with HTML and JSX is quick and fun

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "typescript": "typescriptreact",
    "javascript": "javascriptreact"
}

Let’s improve work with the built-in terminal

Add a keyboard shortcut known from most browsers to switch tabs

  {
    "key": "alt+cmd+right",
    "command": "workbench.action.terminal.focusNext",
    "when": "terminalFocus"
  },
  {
    "key": "alt+cmd+left",
    "command": "workbench.action.terminal.focusPrevious",
    "when": "terminalFocus"
  }

it is also useful to add a shortcut to restore focus on the editor

 {
    "key": "cmd+e cmd+e",
    "command": "workbench.action.focusActiveEditorGroup"
 }

I recommend you to check this article to pimp your terminal

Let’s take a look at some useful extensions

• TabNine - AI code completion, you’ll be surprised most of the time by the quality of the hints, sometimes you’ll make facepalm. Still worth it
• Macros - powerful custom macros support
• Setting Sync - synchronize all your IDE settings, you never know when you’ll need it
• Auto Close Tag - makes working with HTML and JSX agile
• Auto Rename Tag - improving work with HTML and JSX
• Bracket Pair Colorizer - significant improvement in code readability
• Colorize - variables containing a colour are highlighted in that colour
• Create Files & Folders: On The Go - create files and folders quickly by entering a path
• Image preview - preview of the images on the import hover
• InteliSense for CSS class names in HTML - make work with HTML and JSX easier
• Path Intelisense - enter paths more efficiently

This is just the beginning of the modification possibilities…

… but the end of the article. As you can see, VS Code is very flexible to modify, everyone will find the possibility to adjust it to their needs. I just touched upon the topic, there are still plenty of useful shortcuts, extensions that can be downloaded from the market, but also easily created by yourself. An article about how to create an extension is on it’s way.