/ How to

How to Open and Edit Settings JSON Configuration File in VS Code Editor

Visual Studio Code (VS Code) stores its settings in a JSON configuration file called settings.json. This file allows you to customize VS Code to suit your preferences and workflow. Here is a step-by-step guide on how to open and edit the settings JSON file in VS Code:

Locating the Settings JSON File

The settings.json file is stored in the following locations:

  • Windows: %APPDATA%\Code\User\settings.json
  • macOS: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

Opening the Settings JSON File

There are a few ways to open the settings JSON file in VS Code:

1. Keyboard Shortcut

Use the keyboard shortcut:

  • Windows / Linux: Ctrl + ,
  • macOS: Cmd + ,

This will open the User Settings file directly.

2. Command Palette

Press Ctrl + Shift + P to open the Command Palette then type “Preferences: Open Settings (JSON)” and select it.

3. Menu Bar

Go to File > Preferences > Settings. Click on the { } icon in the top right corner of the Settings UI.

Editing the Settings JSON File

The settings.json file contains VS Code settings in JSON format. Here are some tips for editing settings:

  • Settings are organized into categories like editor, explorer, terminal, etc.
  • Each setting has an id and a value.
  • To override a default setting, specify the id and the new value.
  • Settings values can be of type boolean, string, number, etc.
  • Use IntelliSense autocompletions with Ctrl + Space to select settings IDs.
  • Format the file with Alt + Shift + F to tidy up the JSON.
  • Comments are not valid in JSON, but can be useful. Prefix them with //.

Here is an example settings.json file with some customizations:

// Editor Settings
"editor.fontSize": 18,
"editor.tabSize": 2,

// Explorer Settings 
"explorer.compactFolders": false,

// Terminal Settings
"terminal.integrated.fontSize": 16

Common Settings

Here are some common settings you may want to customize:

Editor

  • editor.fontSize – Font size
  • editor.tabSize – Number of spaces per tab
  • editor.wordWrap – Turn on/off word wrap

Explorer

  • explorer.compactFolders – Flatten nested folders in explorer

Terminal

  • terminal.integrated.fontSize – Integrated terminal font size
  • terminal.integrated.shell.windows – Default shell on Windows

Formatting

  • editor.formatOnSave – Format files on saving
  • editor.defaultFormatter – Default formatter for language

Refer to the Documentation for the full list of customizable settings.

Summary

  • The settings JSON file is located at settings.json in your VS Code user folder.
  • Use the keyboard shortcut, command palette, or menu bar to open the file easily.
  • Customize VS Code by overriding default setting values.
  • Use IntelliSense and formatting to edit the file cleanly.
  • Many editor, explorer, terminal, and formatting settings can be tweaked.

Learning to configure VS Code is a great way to boost your productivity by customizing it to your preferences. The settings JSON file gives you a simple yet powerful way to do this.

Related Posts