VS Code Tips & Tricks

Visual Studio Code comes with its default settings that works really well. But with every tool we use, we always want to have the power to customize things to work best for us. The Settings editor provides a way for us to make those customizations.

To open it up press Ctrl + ,. We could also open it up via the Command Palette. Press Ctrl + Shift + P to open up the Command Palette and search for “settings.” Select “User Settings”. The Settings editor contains a list of all the settings that we could customize inside VS Code.

By the side, we have the Settings groups that separate them into sections for easy accessibility. It also has a search box where you could search for a specific setting. We could change the “color theme.”

We could also change the “Side Bar Location” to right. We are currently working in the “UI” view of the Settings editor. VSCode also provides us with the JSON view.

We could access it by clicking on the button at the top right corner of the editor. But I want to be displayed side by side with the UI editor so I’ll split the editor by pressing Ctrl + \. This splits the editor to the right.

Then I could search for it through the Command Palette and open it up. This shows us the layout side by side. We could see all the default settings i have previously set to suite my development needs. If you just installed VSCode then this JSON object would be empty.

So, whenever you change a setting from its default value, it would be updated in this JSON file. Let’s change the font size. You can see it updated instantly. And notice the blue line beside the settings in the UI view. This shows that the setting has been updated from its default value.

Clicking on gear icon shows a menu for different actions like resetting the config to its defalt value or manually copying the JSON value so you could update it in the JSON settings. Also note that the JSON editor has intellisense for autocompletion.

We could also set language specific settings. You can see that i have done some for html and javascript. Let’s add one for Dart. Press Ctrl + Shift + P to open up the Command Palette. Search for settings and select “Configure Language Specific Settings.” Select “Dart.” This creates the corresponding object for the Dart related setting.

Set the "editor.fontSize: 12". Now open up any dart file and you can see the font size only applies to dart files.

The Settings editor has two modes: The “User” and the “Workspace.” So far, we’ve been working on the User settings. It is the global settings for all projects created with VSCode. The second mode: Workspace, affects only the current VSCode project you’re working on. A workspace is just simply a folder opened in VSCode.

Let’s change the color theme for this workspace. Click on the Workspace tab and Search for color theme. Change it to something else.

This creates a .vscode folder with a settings.json file to keep track of the workspace changes. You can see the settings we just updated. We would be using the “Workspace” settings for the rest of the course so that you could get the file in your download materials.

Next press Ctrl + Shift + N to open up a new window. You can see that the color theme only affects only the workspace we made the changes in.

Workspace settings can be really beneficial when with teams working on a repository. A project might have specific debugging, visual or language related settings and this could be shared in the project’s repository.

Note that Workpace settings takes precedence over the User settings. So anything declared here would override the User settings. You can reset all settings to its default value by deleting everything inside the root object both for the global(User) and workspace settings.

Finally, to view the default settings, open up the Command Palette and search for “default settings” and select it. It opens up a JSON file with all the settings with their description and possible values.