Visual Studio Code Settings

The settings.json file is the heart of your Visual Studio Code customization. It allows you to configure editor behavior, appearance, extensions, and much more.

Accessing Your Settings

You can open your settings in several ways:

Using the Command Palette: Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS), type Preferences: Open User Settings (JSON), and select it.
Using the Menu: Go to File > Preferences > Settings (Windows/Linux) or Code > Preferences > Settings (macOS), then click the {} icon in the top right corner.

You can configure settings at a User level (global for all projects) or a Workspace level (specific to the current project). Workspace settings override User settings.

Common Setting Categories

Editor Settings

These settings control the behavior of the editor itself.

Setting	Description	Default Value
`editor.fontSize`	The font size of the editor in pixels.	`14`
`editor.fontFamily`	The font family of the editor. Use comma-separated values for fallbacks.	`'Consolas', 'Droid Sans Mono', 'monospace'`
`editor.tabSize`	The number of spaces per tab.	`4`
`editor.insertSpaces`	Insert spaces when pressing Tab.	`true`
`editor.wordWrap`	Controls word wrapping. Possible values: `'off'`, `'on'`, `'wordWrapColumn'`, `'bounded'`.	`'off'`
`editor.minimap.enabled`	Controls whether the minimap is shown.	`true`
`editor.renderWhitespace`	Controls how whitespace is rendered. Values: `'none'`, `'all'`, `'boundary'`, `'selection'`.	`'none'`

Appearance Settings

Customize the look and feel of VS Code.

Setting	Description	Default Value
`workbench.colorTheme`	The color theme used in the workbench.	`'Default Dark+'`
`workbench.iconTheme`	The icon theme used for file explorers.	`'vscode-icons'` (if installed)
`workbench.activityBar.visible`	Controls whether the Activity Bar is visible.	`true`
`workbench.statusBar.visible`	Controls whether the Status Bar is visible.	`true`

Language-Specific Settings

You can configure settings on a per-language basis. To do this, use the language identifier (e.g., python, javascript, html).

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[python]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    }
}

Extension Settings

Many extensions provide their own settings that can be configured in settings.json. These are usually prefixed with the extension's name.

Example: Settings for the Prettier extension might look like:

"prettier.semi": false,
"prettier.singleQuote": true

Example settings.json

Here's a sample settings.json file demonstrating various customizations:

{
    // --- Editor Settings ---
    "editor.fontSize": 15,
    "editor.fontFamily": "'Fira Code', Consolas, monospace",
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.renderWhitespace": "all",
    "editor.rulers": [80, 120], // Vertical rulers at 80 and 120 characters
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 120,
    "editor.minimap.enabled": false,

    // --- Appearance Settings ---
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.activityBar.visible": true,
    "workbench.sideBar.location": "left",

    // --- File Handling ---
    "files.autoSave": "onFocusChange",
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/Thumbs.db": true,
        "node_modules": true,
        "dist": true,
        "build": true
    },

    // --- Language Specific Settings ---
    "[python]": {
        "editor.defaultFormatter": "ms-python.python",
        "editor.codeActionsOnSave": {
            "source.organizeImports": true
        }
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },

    // --- Extension Settings (Example for Prettier) ---
    "prettier.enable": true,
    "prettier.printWidth": 100,
    "prettier.tabWidth": 2,
    "prettier.singleQuote": true,
    "prettier.semi": false,

    // --- Terminal Settings ---
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

    // --- Version Control ---
    "git.enabled": true
}

Format on Save: Set "editor.formatOnSave": true to automatically format your code when you save a file. Ensure you have a formatter extension installed and configured.
Exclude Folders: Use "files.exclude" to hide folders like node_modules or build outputs from the Explorer view, decluttering your workspace.
Keybindings Overrides: You can override default keybindings or define new ones in the keybindings.json file. Access it via the Command Palette: Preferences: Open Keyboard Shortcuts (JSON).
IntelliSense for Settings: VS Code provides IntelliSense (autocompletion) for setting keys and values as you type in settings.json. Hover over a setting for more details.
Workspace vs. User Settings: Remember that Workspace settings take precedence. This is useful for project-specific configurations without affecting your global setup.

Common Issue: If settings are not being applied, check if you are editing the correct settings.json file (User vs. Workspace). Also, ensure there are no syntax errors in your JSON. VS Code will usually highlight syntax errors.

If an extension's setting isn't working, verify the setting name against the extension's documentation. Some extensions might require a reload of the VS Code window after changes.

VS Code Docs