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.

Published
Feb 05, 2023
Updated
Feb 05, 2023
Reading time
2 min read

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"
}

Explorer

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
}

Editor

Font

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"
}