My Visual Studio Code Setup

June 2020

I recently installed VS Code on a new machine, so I thought I would list here the steps that I followed to get the best experience on my editor of choice.

Cleaning up the Workspace

First of all, I need a tidy workspace. So I adopted a few recommendations from Burke Holland's VS Code Can Do That workshop:

1 - Turning off the Minimap in Settings - Text Editor - Minimap.

2 - Hiding the Breadcrumbs at the top of each open file, by typing and selecting toggle breadcrumbs in the Command Palette (Cmd/Ctrl + Shift + P).

3 - Hiding the Open Editors normally shown in the Sidebar, by going to the Settings and searching for explorer open editors visible (which can be set to 0).

4 - Moving the Sidebar to the right, by typing and selecting toggle side bar position in the Command Palette (Cmd/Ctrl + Shift + P).

It took me some time to get used to that last one, but I decided to give it a chance and now I love it. The main advantage is that my code does not shift around whenever I toggle the Sidebar visibility (Cmd/Ctrl + B) to gain more working space for my code.

Last but not least, I always install the popular Material Icon Theme extension by Philipp Kief, which makes it easier to visually identify files and folders in the Sidebar.

Javascript Tools

There are two must-have VS Code extensions to work in Javascript:

ESLint by Dirk Baeumer
Prettier by Esben Petersen

Both provide extensive setup instructions in their respective descriptions.

I always make sure to have Prettier format my code automatically whenever I save a file, by going to the Settings and searching for format on save where I can simply tick the checkbox.

I also installed the MDX extension by Matija Marohnic, which makes MDX markup files more readable, and GraphQL for VS Code by Kumar Harsh, which does the same for GraphQL schemas.

Flutter / Dart

I recently started using Flutter / Dart to develop multi-platform apps. This required two additional extensions in VS Code: Flutter and Dart. Conveniently, the first automatically installs the second as a dependency.

Among the other things, those extensions enable Hot Reload of mobile apps on save (in emulators as well as physical devices) after selecting Run - Run without Debugging in the VS Code menu.

Since I prefer using shortcuts with the Command key on Mac, I changed the default shortcut for Run - Run without Debugging by going to Code - Preferences - Keyboard Shortcuts in the VS Code menu. (On Windows, you would replace Code with File in that last path).

My choice for the shortcut? Command - F6.