Explore how to edit the VS Code preferences JSON file to help make the app work the way you want it to.
- [Instructor] One of the best features of Visual Studio Code is how extensible and configurable it is. In this chapter, we're going to take a look at some of the ways that you can shape that application to work the way that you want to work. There are multiple ways that you can customize Visual Studio Code. There is a wide range of application preferences that can be set. You can install extensions to modify and enhance the capabilities of the app. You can change keyboard shortcuts, and you can create your own smart code snippets. So let's start by looking at how to change the app's preferences.
To open the app preferences, I'll go to the Code menu here on my Mac and select Settings under the Preferences menu. Now, in Windows and Linux, you'll find the Preferences menu item under the File menu. When I choose that item, I'll get a split view editor, and if you've used other source code editors like Sublime Text, this will probably look very familiar to you. On the left is a large JSON file that contains default values for all the application settings, and it's also broken up into multiple categories.
You'll notice that if you try to change the values in this file, you can't; it's just read-only. The editor on the right-hand side is where you place your custom values for the settings that you want to change, and you can see here, I've already done that for a couple of settings. I've changed the font size and the color theme. At the top of the editor is a search box. You can quickly narrow down the list of settings by entering a search term here. For example, as I type the word font, you can see that the list displays all the settings in each category that contain that term.
Next to the search box, there are two buttons: one for User Settings and one labeled Workspace Settings. If I change a value in the User Settings, it will apply to all of your files and projects, and this is useful, for example, to have one place to define how many spaces to use to indent and what fonts to use and so on. You can also define settings for individual workspaces by switching over to Workspace Settings. This values will apply to the workspace they're defined in and will override the User Settings.
All right, so let's go ahead and try some of these out. First, I'll search for the line numbers setting by typing linenum, and there's the result under the edit category and you can see that they're currently on. To change it, I'll add that property in the right-side editor. So, I'll go ahead and click this little pencil icon, and I'll change it to off. And you can see that when I do that in the right-hand editor, that property has been added for me with the new value that I have selected. Now, I could edit the property directly in text.
But since VS Code understands the preferences file schema, it offers a way for me to choose from valid property names by clicking on the little pencil icon. So I can choose things like off, on or relative for this particular setting. So, you can see that when I save now, the line numbers have disappeared. So, I'll go ahead and turn them back on by choosing on, and I'll save. All right. It's also possible to change the configuration settings for specific languages. So, let's go ahead and set some preferences specifically for JSON.
Now, to do this, I'm going to bring up the command palette by typing Command Shift P, and you use Control Shift P if you're on another platform, and I'm going to type in the word preferences. And then, I'm going to select this option here called Configure Language Specific Settings. This will bring up a list of the installed languages here in VS Code. So, I'm going to scroll down, and I'm going to select JSON, and you can see that, in my editor on the right side, a category has been added for JSON.
So, within this category, I can specify settings that will only apply when I'm working within that language in an editor. So, for example, let's suppose that I wanted the cursor to be different in the JSON file. So, I'll start typing editor dot cursor, and you see, as I type that, there is an option for cursorStyle. So, I'm going to select that, and that will add an entry for my editor cursorStyle to my JSON section. Now, it defaults to the line value.
I'm going to go ahead and click on the little pencil, and I'm going to change that to underline. And when I click Save, you can see that the cursor has now changed to an underline style because I'm editing a JSON file. But, when I open up an HTML file, you can see that the cursor is still a thin vertical line. Now, it would take a long time for me to go through all the available options. So, I suggest you take some time and explore the settings file.
Let me clear this out right here. All right, in particular, the commonly-used Editor and Workbench sections are good places to start since they directly control the most popular parts of how the app works. After that, take a look at some of the language-specific sections such as HTML. Each of the settings in the default file are commented with what they do. So, don't be afraid to experiment with different settings.
Joe Marini kicks off the course by taking you through the app's user interface, and showing how to work with its basic editing features. Next, Joe demonstrates how to customize VS Code by configuring preferences, setting your own keyboard shortcuts, and working with snippets. He also explains how to maximize your productivity by installing and managing extensions from the Visual Studio Marketplace. Plus, he discusses how VS Code works with folders and collections of files, helps you understand the IntelliSense feature, and dives into the app's advanced code editing features, such as automatic formatting.
- Installing Visual Studio Code
- The VS Code UI
- Understand how VS Code works with built-in Git integration
- Customizing VS Code
- Configuring preferences
- Setting keyboard shortcuts
- Using extensions
- Working with snippets
- Using VS Code to edit different parts of the same file
- Using multiple selections
- Understanding how VS Code works with JSON files