My Visual Studio Code Setup
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.
- 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
File in that last path).
My choice for the shortcut?
Command - F6.