Skip to content

Improve your VS Code setup

Visual Studio Code provides a lot of configuration options. I show you a few of my favorite settings.

Reading time
1 min

The sidebar is located on the left side by default. If you move it the right, toggling the sidebar (cmd+B) will be much more pleasant as your code doesn't jump around anymore.

  "workbench.sideBar.location": "right"


Tree Indentation

The explorer panel shows all files and folders in your project. The default indentation of files/folders is pretty small. Increasing it results in a much more readable tree.

  "workbench.tree.indent": 24

Compact Folders

I don't know about you, but I don't like compact folders. They make navigation in the tree much harder. You can disable them:

  "explorer.compactFolders": false



Choosing a good font is important. I recommend Fira Code, but there are many other good fonts. Also, I recommend enabling font ligatures.

  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true

Line Height

The default line height is pretty dense. Increasing it makes your code much more readable. I recommend a line height of 2 (twice the font size).

  "editor.lineHeight": 2

Render white spaces

White spaces are not visible by default but just rendered as a space. But you can configure VS Code to show a "·" for white spaces. VS Code supports multiple options for when to show white spaces, but I recommend the boundary value which makes white spaces at the start and end of each line visible.

  "editor.renderWhitespace": "boundary"

That's it. What are your favorite VS Code settings? Share them on Twitter.