Deep links

Pimp your VS Code

When I switched from Webstorm to VS Code, I wanted to make it as similar as possible. During the time, I noticed that doesn't make sense. VS Code has a much more robust workflow, it just needs a few changes, about which you will read in this article.
Developer productivity
Peter Bedlechowicz
11 Jan 2022
5 minute read
Share this post

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.

Developer productivity
Peter Bedlechowicz
January 15, 2024

Our React Native toolbox: 24 essential tools for developers in 2024

React Native
Mobile development
Explore 24 tools that every React Native developer needs in 2024!
See article

Errors handling with RN Notificated

React Native
Errors handling
Mobile development
React native notificated
Have you ever wondered what is the best way to handle errors in Your app? RN Notificated seems to be an answer for Your doubts. Fully customized, fast, and most importantly easy to use!
See article
January 25, 2024

How to set video as a background in React Native application

React Native Video
Video background
React Native
Explore step-by-step guidance on integrating video backgrounds into your React Native applications using the react-native-video library. This article provides practical tips and code examples to enhance your app's UI with dynamic video elements, suitable for both beginners and experienced developers in React Native.
See article
Do you need help with developing react solutions?

Leave your contact info and we’ll be in touch with you shortly

Leave contact info
Become one of our 10+ ambassadors and earn real $$$.
By clicking “Accept all”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.