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.

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.

© 2020 Stefano Picker