Settings

VS Code has hundreds of configurable settings. Most of them you will never need to touch. This page covers the 6 that make a meaningful difference to how comfortable and error-free your daily work is.

How to Open Settings

There are two ways to reach VS Code settings:

Via menu: File → Preferences → Settings

Via keyboard (faster): Ctrl+, (Ctrl + comma)

Both open the same Settings panel.

The Settings UI vs settings.json

VS Code settings come in two forms, and you will encounter both:

Settings UI (the visual panel)

When you press Ctrl+,, you see a visual panel with a search box at the top and categories on the left. This is the Settings UI. Every setting has a human-readable name, a description, and an input control (checkbox, text box, dropdown).

This is where beginners should start. Search for a setting by name, see what it does, and change it with a click or a type.

settings.json (the raw file)

Behind the Settings UI, all your settings are stored in a JSON file. To open it directly, press Ctrl+Shift+P, type "Open User Settings JSON", and press Enter.

The file looks like this:

The Excel analogy: The Settings UI is like Excel's Format Cells dialog — a visual interface where you tick boxes and choose options. The settings.json file is like editing the underlying XML of an Excel file directly. The Settings UI is easier to navigate; the JSON file is faster when you know exactly what you want to change.

The 6 Settings to Configure

Setting 1 — Format On Save

What it does: Automatically formats your code every time you save the file (Ctrl+S). After Prettier is installed and set as the default formatter, this setting is what activates it.

How to set it:

Or in settings.json: "editor.formatOnSave": true

Why it matters: Without this, Prettier does nothing until you manually trigger it. With it, your code is always clean the moment you save — you never accumulate a messy codebase that needs a big formatting pass later.

Setting 2 — Tab Size

What it does: Controls how many spaces one Tab press inserts. Standard for JavaScript and TypeScript is 2 spaces.

How to set it:

Or in settings.json: "editor.tabSize": 2

Why it matters: The entire JavaScript ecosystem — React, TypeScript, Tailwind, all our dependencies — uses 2-space indentation. If your tab size is set to 4, your code and the libraries' code look different when viewed together. Prettier also defaults to 2 spaces. Setting this to 2 keeps everything consistent.

Setting 3 — Word Wrap

What it does: When a line of code is longer than the editor window width, word wrap makes it continue on the next visual line instead of extending off-screen to the right. You would need to scroll horizontally to read it without wrap.

How to set it:

Or in settings.json: "editor.wordWrap": "on"

Why it matters: TypeScript error messages, long JSX attribute chains, and complex Tailwind class lists are often very long. Without word wrap, you constantly scroll right to see the full line. With wrap, the entire content is always visible. This is purely a readability preference — it does not change the code itself.

Setting 4 — Auto Save

What it does: Automatically saves your file after a short delay when you stop typing, so you do not lose changes if you forget to press Ctrl+S.

How to set it:

Or in settings.json: "files.autoSave": "afterDelay" and "files.autoSaveDelay": 1000

Why it matters: How many times have you made a change in Excel, forgotten to save, and lost it when the file closed? Auto Save prevents this entirely. After 1 second of no typing, your file saves automatically. Combined with Format On Save, this means your code is always clean and saved without any effort.

Setting 5 — Default Terminal Profile (Git Bash)

What it does: Sets Git Bash as the default shell in VS Code's integrated terminal instead of PowerShell.

Why Git Bash: Git Bash gives you a Unix-like terminal that understands standard command-line tools the same way macOS and Linux do. Most documentation, most tutorials, and most error messages you will search online assume a Unix-style terminal. Git Bash on Windows is compatible with all of these. PowerShell is powerful but uses different syntax — commands that work in Bash break in PowerShell.

How to set it:

Or in settings.json: "terminal.integrated.defaultProfile.windows": "Git Bash"

After changing this, the new terminal should show a $ prompt with a green-coloured path — that is Git Bash.

Setting 6 — Turn Off the Minimap

What it does: Removes the minimap — the tiny code preview that appears on the right edge of the editor.

How to set it:

Or in settings.json: "editor.minimap.enabled": false

Why it matters: The minimap takes up approximately 50 pixels of horizontal editor space. At common laptop screen widths (1366px wide), this is genuinely noticeable. The minimap is useful on very long files (thousands of lines) where you need to jump between sections visually. For the files you will write during training — typically under 300 lines — the minimap provides no benefit and reduces your coding space.

Your Final settings.json

After applying all 6 settings, open your User Settings JSON to verify. Press Ctrl+Shift+P, type Open User Settings JSON, and press Enter. Confirm these entries are present: "editor.formatOnSave": true, "editor.tabSize": 2, "editor.wordWrap": "on", "files.autoSave": "afterDelay", "terminal.integrated.defaultProfile.windows": "Git Bash", and "editor.minimap.enabled": false.

Settings Sync — Keep Your Settings Across Machines

VS Code has a built-in Settings Sync feature. When enabled, it uploads your settings, extensions list, keyboard shortcuts, and snippets to a GitHub or Microsoft account. Any VS Code installation signed into that account gets your settings automatically.

This means:

• Your settings are backed up even if your laptop is lost or reset
• If you work on a second machine, your VS Code is identical on both
• If VS Code is reinstalled, your settings are restored with one sign-in

To enable Settings Sync:

Project-Level Settings (.vscode/settings.json)

Beyond your personal settings, projects can have their own settings file. When VS Code opens a project folder, it looks for a folder called .vscode inside the project and reads settings.json from it.

Why this exists: Different projects may need different settings. A project might use 4-space indentation (some older projects do). A project might use a different Prettier configuration. A project might need the TypeScript version from inside the project's node_modules rather than VS Code's built-in version.

The Excel analogy: Your User Settings are like your personal Excel preferences (default font, grid lines on/off, default number format). The .vscode/settings.json is like the Excel file's own formatting that overrides your preferences when you open that specific file.

You will see .vscode/settings.json in some of the projects we work on. Do not delete it — it contains settings that the whole team shares and that make the project work correctly.

A typical .vscode/settings.json in our projects:

This tells VS Code: use the TypeScript version installed in this project (not a global one), and use Prettier as the formatter for TypeScript and TSX files.