Sidebar location
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 Monaspace (or Fira Code), but there are many other good fonts. Also, I recommend enabling font ligatures.
{
"editor.fontFamily": "Monaspace Argon",
"editor.fontLigatures": "'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'liga'"
}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"
}Minimap Slider
The minimap shows a preview of the whole file on the right side of the editor, with a slider that indicates the current viewport. I like to show the slider always, not only on hover:
{
"editor.minimap.showSlider": "always"
}