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.
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.