VS Code Tips & Shortcuts: The Complete Guide for 2026

1. Getting Started with VS Code

VS Code (Visual Studio Code) is a free, open-source code editor built by Microsoft on the Electron framework. It runs on Windows, macOS, and Linux and supports virtually every programming language through its extension ecosystem. Unlike full IDEs, VS Code starts fast and stays lightweight while offering IDE-level features when you need them.

The Command Palette

The single most important feature to learn is the Command Palette. It gives you access to every command in VS Code without touching the mouse.

Pro tip: In Quick Open (Ctrl+P), type @ to switch to symbol search, : to go to a line number, or # to search symbols across the workspace. You can also type ? to see all available prefixes.

Essential First Steps

After installing VS Code, configure these settings for the best experience:

// Open settings: Ctrl+, (or Cmd+, on macOS)
// Click the {} icon in the top right to open settings.json

{
    "editor.fontSize": 14,
    "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.tabSize": 4,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "boundary",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "editor.formatOnSave": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active"
}

These settings enable font ligatures for cleaner code symbols, auto-save to prevent lost work, format-on-save for consistent style, and bracket pair colorization to visually match brackets. Disabling the minimap reclaims screen space on smaller monitors.

2. Essential Keyboard Shortcuts

Mastering keyboard shortcuts is the single biggest productivity boost you can get from VS Code. These shortcuts eliminate mouse usage for the most common operations.

Navigation Shortcuts

Editing Shortcuts

Search and Replace Shortcuts

Pro tip: In Find and Replace, enable regex mode (Alt+R) to use capture groups. For example, find (\w+): (\w+) and replace with $2: $1 to swap key-value pairs. This is incredibly powerful for bulk refactoring.

3. Multi-Cursor Editing

Multi-cursor editing is one of VS Code's most powerful features. It lets you type in multiple places simultaneously, turning repetitive edits into a single operation.

Practical Multi-Cursor Workflows

Rename a variable across a function: Select the variable name, press Ctrl+D repeatedly to select each occurrence, then type the new name. All occurrences update simultaneously. Use Ctrl+K Ctrl+D to skip an occurrence you do not want to change.

Convert a list to an array: Suppose you have a list of items, one per line. Place your cursor at the beginning of the first line, then press Ctrl+Alt+Down to add cursors on every line. Type a quote, press End to jump to the end of each line, type another quote and a comma. You have converted every line in seconds.

Box selection for column editing: Hold Shift+Alt (or Shift+Option on macOS) and drag to create a rectangular selection. This is perfect for editing aligned data in CSV files, log files, or aligned variable declarations.

// Before: plain list
red
green
blue
yellow

// Select all lines, Ctrl+Alt+Down to add cursors, then edit:

// After: JavaScript array
const colors = [
    "red",
    "green",
    "blue",
    "yellow",
];

Pro tip: Combine Ctrl+D with Ctrl+K Ctrl+D for surgical multi-cursor placement. Select a word, press Ctrl+D to add matching occurrences one by one, and press Ctrl+K Ctrl+D to skip any you want to leave unchanged. This is faster and safer than find-and-replace for targeted renaming.

4. Code Folding and Navigation

Code folding lets you collapse sections of code to focus on the parts that matter. VS Code supports both indentation-based folding and language-aware folding.

Custom Fold Regions

You can define custom fold regions using comments. This works in any language:

// #region Authentication
function login(username, password) {
    // ...
}

function logout() {
    // ...
}

function resetPassword(email) {
    // ...
}
// #endregion

// #region User Profile
function getProfile(userId) {
    // ...
}

function updateProfile(userId, data) {
    // ...
}
// #endregion

Navigation with Breadcrumbs

Enable breadcrumbs in the editor to see your current location within the file structure. Click any segment to navigate to siblings or children.

{
    "breadcrumbs.enabled": true,
    "breadcrumbs.filePath": "on",
    "breadcrumbs.symbolPath": "on"
}

Pro tip: Use Ctrl+K Ctrl+2 to fold everything to level 2, which gives you a perfect high-level overview of a file by showing class and top-level function signatures while hiding implementation details. Combine this with the Outline view (Ctrl+Shift+O) for fast navigation in large files.

5. Integrated Terminal Tips

The integrated terminal eliminates context switching between your editor and a separate terminal window. VS Code supports multiple terminal instances, split terminals, and custom profiles.

Terminal Profiles

Configure different terminal profiles for different workflows:

{
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell"
        },
        "Git Bash": {
            "source": "Git Bash",
            "icon": "terminal-bash"
        },
        "Node.js": {
            "path": "node",
            "icon": "symbol-event"
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.cursorStyle": "line",
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.scrollback": 10000
}

Terminal Link Detection

VS Code automatically detects file paths and URLs in terminal output and makes them clickable. Hold Ctrl (or Cmd) and click a file path to open it directly in the editor. When a compiler or linter outputs errors with line numbers like src/app.ts:42:10, clicking opens the file at that exact location.

Pro tip: Use Ctrl+Shift+5 to split your terminal side-by-side. Run your dev server on one side and use the other for Git commands, tests, or other tasks. You can also drag terminal tabs between split groups to reorganize them.

6. Snippets: Built-in and Custom

Snippets are templates that insert commonly used code patterns with a few keystrokes. VS Code comes with built-in snippets for many languages and lets you create your own.

Using Built-in Snippets

Type a snippet prefix and press Tab to expand it. Some common built-in snippets:

Creating Custom Snippets

Open the Command Palette and select Snippets: Configure User Snippets. Choose a language or create a global snippet file.

// File: javascript.json (user snippets)
{
    "React Functional Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "interface ${1:ComponentName}Props {",
            "    $2",
            "}",
            "",
            "export const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ $3 }) => {",
            "    return (",
            "        <div>",
            "            $0",
            "        </div>",
            "    );",
            "};",
            "",
            "export default ${1:ComponentName};"
        ],
        "description": "React functional component with TypeScript"
    },
    "Console Log Variable": {
        "prefix": "clv",
        "body": [
            "console.log('${1:variable}:', ${1:variable});"
        ],
        "description": "Log a variable with its name"
    },
    "Try-Catch Async": {
        "prefix": "tca",
        "body": [
            "try {",
            "    const ${1:result} = await ${2:asyncFunction}();",
            "    $0",
            "} catch (error) {",
            "    console.error('${3:Error message}:', error);",
            "}"
        ],
        "description": "Async try-catch block"
    }
}

Snippet Syntax Reference

Pro tip: Use the $TM_SELECTED_TEXT variable to create "surround with" snippets. Assign a keybinding to the snippet, select text, trigger it, and the selected text gets wrapped. For example, wrap selected text in a try/catch block or a console.log() call.

7. Settings and Customization

VS Code has hundreds of settings that you can customize. The Settings UI (Ctrl+,) provides a searchable interface, but editing settings.json directly gives you full control.

Opening Settings

Recommended settings.json Configuration

{
    // Editor
    "editor.fontSize": 14,
    "editor.lineHeight": 1.6,
    "editor.fontFamily": "'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace",
    "editor.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "on",
    "editor.wrappingIndent": "indent",
    "editor.smoothScrolling": true,
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.cursorBlinking": "smooth",
    "editor.renderWhitespace": "boundary",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.linkedEditing": true,
    "editor.stickyScroll.enabled": true,

    // Minimap
    "editor.minimap.enabled": false,

    // Files
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/__pycache__": true
    },

    // Formatting
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    // Search
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/build": true,
        "**/.next": true,
        "**/coverage": true
    },

    // Terminal
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.cursorStyle": "line",

    // Workbench
    "workbench.startupEditor": "none",
    "workbench.tree.indent": 16,
    "workbench.editor.enablePreview": false
}

Language-Specific Settings

Override settings for specific languages using language identifiers:

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter",
        "editor.tabSize": 4,
        "editor.formatOnSave": true
    },
    "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": {
            "other": false,
            "comments": false,
            "strings": false
        }
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features",
        "editor.tabSize": 2
    }
}

Pro tip: Use files.trimTrailingWhitespace and files.insertFinalNewline to automatically clean up whitespace on every save. This prevents noisy diffs in version control where the only change is trailing whitespace. Pair with editor.renderWhitespace: "boundary" to see problematic whitespace without visual clutter.

8. Workspace and Project Settings

VS Code supports three levels of settings: User (global), Workspace (per-project), and Folder (per-folder in multi-root workspaces). Workspace settings override user settings, allowing project-specific configuration that can be committed to version control.

Creating Workspace Settings

Workspace settings live in a .vscode/settings.json file in your project root:

// .vscode/settings.json
{
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "files.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/.turbo": true
    },
    "typescript.tsdk": "node_modules/typescript/lib",
    "eslint.workingDirectories": [
        "packages/frontend",
        "packages/backend"
    ]
}

Recommended Extensions

Suggest extensions to your team by creating .vscode/extensions.json:

// .vscode/extensions.json
{
    "recommendations": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "bradlc.vscode-tailwindcss",
        "ms-python.python",
        "eamodio.gitlens"
    ],
    "unwantedRecommendations": [
        "hookyqr.beautify"
    ]
}

Multi-Root Workspaces

When working with monorepos or related projects, use multi-root workspaces. Create a .code-workspace file:

// myproject.code-workspace
{
    "folders": [
        {
            "name": "Frontend",
            "path": "./packages/frontend"
        },
        {
            "name": "Backend",
            "path": "./packages/backend"
        },
        {
            "name": "Shared",
            "path": "./packages/shared"
        }
    ],
    "settings": {
        "editor.formatOnSave": true,
        "files.autoSave": "afterDelay"
    },
    "extensions": {
        "recommendations": [
            "esbenp.prettier-vscode"
        ]
    }
}

Pro tip: Commit your .vscode/settings.json and .vscode/extensions.json to version control so your entire team uses consistent formatting, linting, and tools. However, never commit .vscode/launch.json with hardcoded paths or sensitive environment variables. Add those to .gitignore or use variables in launch configurations.

9. Essential Extensions by Category

The extension marketplace is what makes VS Code truly powerful. Here are the essential extensions organized by category, curated for 2026.

Language Support

Git and Version Control

Productivity

Themes and Appearance

Pro tip: Only install extensions you actually use. Every extension adds to startup time and memory usage. Use the @installed filter in the Extensions view and periodically audit which extensions you have enabled. Disable workspace-specific extensions globally and only enable them per-workspace.

10. Debugging with VS Code

VS Code has a powerful built-in debugger that supports breakpoints, step-through execution, variable inspection, and watch expressions. It works with JavaScript, TypeScript, Python, Go, C++, and many more languages through debug adapters.

Launch Configuration

Create a .vscode/launch.json file to configure your debug sessions:

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Node.js",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/src/index.js",
            "console": "integratedTerminal",
            "env": {
                "NODE_ENV": "development"
            }
        },
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src"
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "restart": true
        },
        {
            "name": "Debug Current File",
            "type": "node",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        },
        {
            "name": "Debug Jest Tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": [
                "--runInBand",
                "--no-coverage",
                "${fileBasenameNoExtension}"
            ],
            "console": "integratedTerminal"
        }
    ]
}

Advanced Breakpoint Features

VS Code supports several types of breakpoints beyond simple line breakpoints:

• Conditional Breakpoints: Right-click the breakpoint gutter and select "Conditional Breakpoint." Enter an expression like count > 100 or user.role === "admin". The debugger only stops when the condition is true.
• Logpoints: Instead of stopping execution, logpoints output a message to the Debug Console. Right-click the gutter and select "Logpoint." Use curly braces for expressions: User {user.name} logged in at {Date.now()}.
• Hit Count Breakpoints: Stop only after the breakpoint has been hit a specific number of times. Useful for loops where the bug occurs on iteration 500.
• Exception Breakpoints: Configure the debugger to break on caught or uncaught exceptions from the Breakpoints panel.

Pro tip: Use logpoints instead of adding console.log statements to your code. They provide the same debugging information without modifying your source files and without cluttering your commits with debugging leftovers. You can also use compound launch configurations to start multiple debug sessions simultaneously, such as a frontend and backend server.

11. Git Integration

VS Code has built-in Git support that handles staging, committing, branching, and merging without leaving the editor. Combined with extensions like GitLens, it provides a complete Git workflow.

Staging and Committing

The Source Control panel (Ctrl+Shift+G) shows all changed files. You can stage individual files, specific hunks within a file, or even individual lines. Click the + icon next to a file to stage it, or open the diff view and use the gutter icons to stage specific changes.

Inline Diff View

Click any modified file in the Source Control panel to see a side-by-side diff. VS Code highlights additions in green and deletions in red. Use the inline change indicators in the gutter (colored bars) to quickly navigate to changed sections in large files.

Merge Conflict Resolution

When a merge conflict occurs, VS Code highlights the conflicting sections and provides clickable options directly in the editor:

• Accept Current Change — keep your version
• Accept Incoming Change — keep the other branch's version
• Accept Both Changes — keep both versions
• Compare Changes — see a side-by-side diff of the conflict

For complex conflicts, use the three-way merge editor (introduced in VS Code 1.70+). Open it via the Command Palette: "Merge Editor: Open Merge Editor." It shows the base, incoming, and current versions side by side with a result panel at the bottom where you compose the final version.

Useful Git Settings

{
    "git.autofetch": true,
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "git.autoStash": true,
    "git.pruneOnFetch": true,
    "git.branchProtection": ["main", "master"],
    "scm.diffDecorations": "gutter",
    "diffEditor.ignoreTrimWhitespace": false,
    "diffEditor.renderSideBySide": true
}

Pro tip: Enable git.autofetch to keep your local repository aware of remote changes. Enable git.enableSmartCommit to automatically stage all changes when committing with no staged files, saving a step in your workflow. Use git.branchProtection to prevent accidental direct commits to main or master.

12. Remote Development

VS Code's Remote Development extensions let you work on code hosted on remote machines, inside containers, or in WSL, all with the same local editor experience. Your extensions and settings run remotely where the code lives, so IntelliSense, debugging, and terminal commands all work as expected.

Remote - SSH

Connect to any machine you can SSH into. Install the Remote - SSH extension, then:

1. Press Ctrl+Shift+P and select "Remote-SSH: Connect to Host"
2. Enter your SSH connection string: user@hostname
3. VS Code opens a new window connected to the remote machine
4. Open folders and files on the remote machine as if they were local

Configure frequently used hosts in your SSH config:

# ~/.ssh/config
Host dev-server
    HostName 192.168.1.100
    User developer
    Port 22
    IdentityFile ~/.ssh/id_ed25519
    ForwardAgent yes

Host gpu-box
    HostName ml-server.company.com
    User researcher
    Port 2222
    IdentityFile ~/.ssh/ml_key
    LocalForward 8888 localhost:8888

Dev Containers

Dev Containers define your entire development environment in a .devcontainer/devcontainer.json file. Every team member gets an identical environment regardless of their local setup.

// .devcontainer/devcontainer.json
{
    "name": "Node.js & TypeScript",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
    "features": {
        "ghcr.io/devcontainers/features/docker-in-docker:2": {},
        "ghcr.io/devcontainers/features/github-cli:1": {}
    },
    "forwardPorts": [3000, 5432],
    "postCreateCommand": "npm install",
    "customizations": {
        "vscode": {
            "settings": {
                "editor.formatOnSave": true,
                "editor.defaultFormatter": "esbenp.prettier-vscode"
            },
            "extensions": [
                "esbenp.prettier-vscode",
                "dbaeumer.vscode-eslint",
                "ms-azuretools.vscode-docker"
            ]
        }
    }
}

WSL (Windows Subsystem for Linux)

The WSL extension lets Windows users run VS Code against a full Linux environment. Open a WSL terminal and type code . to launch VS Code connected to WSL, or use the Command Palette to select "WSL: Connect to WSL."

Pro tip: Use port forwarding to access remote services locally. When you run a web server on a remote machine or inside a container, VS Code automatically detects open ports and offers to forward them. You can also manually forward ports via the Ports panel. This means you can run your application on a powerful remote server while viewing it in your local browser.

13. Tasks and Build Automation

VS Code tasks let you run build scripts, test suites, linters, and other tools directly from the editor. Tasks integrate with problem matchers to parse output and display errors in the Problems panel.

Creating Tasks

Create a .vscode/tasks.json file in your project:

// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build",
            "type": "npm",
            "script": "build",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": ["$tsc"],
            "presentation": {
                "reveal": "silent",
                "panel": "shared"
            }
        },
        {
            "label": "Test",
            "type": "npm",
            "script": "test",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "problemMatcher": []
        },
        {
            "label": "Lint",
            "type": "shell",
            "command": "npx eslint src/ --fix",
            "problemMatcher": ["$eslint-stylish"],
            "presentation": {
                "reveal": "onProblem"
            }
        },
        {
            "label": "Dev Server",
            "type": "npm",
            "script": "dev",
            "isBackground": true,
            "problemMatcher": {
                "pattern": {
                    "regexp": ".",
                    "file": 1,
                    "location": 2,
                    "message": 3
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting development server",
                    "endsPattern": "Compiled successfully"
                }
            }
        },
        {
            "label": "Docker Build",
            "type": "shell",
            "command": "docker build -t myapp:latest .",
            "problemMatcher": []
        }
    ]
}

Running Tasks

Compound Tasks

Run multiple tasks in sequence or parallel:

{
    "label": "Build and Test",
    "dependsOn": ["Build", "Test"],
    "dependsOrder": "sequence"
}

// Run in parallel (e.g., start backend and frontend)
{
    "label": "Full Stack Dev",
    "dependsOn": ["Dev Server", "API Server"],
    "dependsOrder": "parallel"
}

Pro tip: Set "presentation": { "reveal": "silent" } for tasks that run quietly in the background, or "reveal": "onProblem" to only show the terminal when errors occur. Use isBackground: true for long-running tasks like dev servers so VS Code does not wait for them to complete before running dependent tasks.

14. Code Refactoring Features

VS Code provides powerful refactoring tools that help you restructure code safely. These features use language servers to understand your code semantically, ensuring refactors are applied correctly across your entire project.

Rename Symbol (F2)

The most used refactoring. Place your cursor on any identifier and press F2. VS Code renames every reference across your entire project, including imports, exports, and type definitions. It previews all changes before applying them.

Extract Method/Variable

Select a block of code and press Ctrl+. (Quick Fix) to see available refactorings. "Extract to method" creates a new function with the selected code and replaces the original with a call. "Extract to variable" assigns an expression to a named constant.

// Before: repeated complex expression
function calculateTotal(items) {
    const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    const tax = items.reduce((sum, item) => sum + item.price * item.quantity, 0) * 0.08;
    return subtotal + tax;
}

// After: Extract variable for the repeated expression
function calculateTotal(items) {
    const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    const tax = subtotal * 0.08;
    return subtotal + tax;
}

Organize Imports

VS Code can automatically sort and remove unused imports:

{
    "editor.codeActionsOnSave": {
        "source.organizeImports": "explicit"
    }
}

Or trigger manually with Shift+Alt+O (Organize Imports).

Pro tip: Use F2 for renaming instead of find-and-replace. Rename Symbol understands scope and context, so it will not accidentally rename a variable in a different scope that happens to have the same name. For JavaScript and TypeScript, it also updates string references in import paths and dynamic imports.

15. Emmet Shortcuts for HTML/CSS

Emmet is a built-in toolkit for high-speed HTML and CSS authoring. It uses abbreviation syntax that expands into full HTML or CSS with a single Tab press. Once you learn Emmet, you can write HTML markup five to ten times faster.

Essential HTML Abbreviations

CSS Abbreviations

Emmet Wrap with Abbreviation

Select existing text and press Ctrl+Shift+P then choose "Emmet: Wrap with Abbreviation." Type an abbreviation like div.wrapper to wrap the selection in a <div class="wrapper"> element. This is incredibly useful for restructuring existing HTML.

Pro tip: Enable Emmet in additional file types like JSX by adding to your settings:

{
    "emmet.includeLanguages": {
        "javascript": "html",
        "typescript": "html",
        "javascriptreact": "html",
        "typescriptreact": "html"
    },
    "emmet.triggerExpansionOnTab": true
}

16. IntelliSense and Code Completion

IntelliSense provides intelligent code completions, parameter info, quick info, and member lists. It goes beyond simple autocomplete by understanding your code's types, context, and imported modules.

IntelliSense Features

• Auto-imports: When you accept a suggestion for a symbol from another file, VS Code automatically adds the import statement at the top of the file.
• Path completion: Type a path in an import statement and IntelliSense suggests available files and directories.
• Signature help: When you type a function call, VS Code shows the function's parameters and their types inline.
• Type inference: In TypeScript and JavaScript, VS Code infers types from usage and provides accurate completions even without explicit type annotations.
• AI-powered completions: With GitHub Copilot, you get whole-line and multi-line completions based on context and natural language comments.

IntelliSense Settings

{
    "editor.suggestSelection": "first",
    "editor.acceptSuggestionOnCommitCharacter": true,
    "editor.snippetSuggestions": "top",
    "editor.wordBasedSuggestions": "matchingDocuments",
    "editor.quickSuggestions": {
        "other": "on",
        "comments": "off",
        "strings": "off"
    },
    "editor.parameterHints.enabled": true,
    "editor.suggest.showKeywords": true,
    "editor.suggest.showSnippets": true,
    "editor.suggest.preview": true,
    "typescript.suggest.autoImports": true,
    "javascript.suggest.autoImports": true
}

Pro tip: If IntelliSense suggestions are not appearing or seem incorrect, try restarting the language server. Open the Command Palette and run "TypeScript: Restart TS Server" or "Developer: Reload Window." For JavaScript projects without TypeScript, create a jsconfig.json file in your project root to enable full IntelliSense with path resolution.

17. Settings Sync

Settings Sync keeps your VS Code configuration identical across all your machines. It syncs settings, keybindings, extensions, snippets, and UI state through your Microsoft or GitHub account.

What Gets Synced

Enabling Settings Sync

1. Click the gear icon in the bottom left corner of VS Code
2. Select "Turn on Settings Sync"
3. Choose which items to sync
4. Sign in with Microsoft or GitHub
5. Repeat on your other machines

Machine-Specific Settings

Some settings should not sync between machines, such as font size (different monitor resolutions) or terminal paths (different operating systems). Mark settings as machine-specific in settings.json:

// These settings are ignored by Settings Sync by default:
// terminal.integrated.defaultProfile.*
// terminal.integrated.profiles.*
// window.zoomLevel

// To explicitly exclude a setting from sync, use:
// Settings Sync: Configure (from Command Palette)
// Add settings to the "settingsSync.ignoredSettings" array:
{
    "settingsSync.ignoredSettings": [
        "editor.fontSize",
        "window.zoomLevel",
        "terminal.integrated.fontFamily"
    ]
}

Profiles

VS Code Profiles let you create different configurations for different workflows. For example, a "Python Data Science" profile with Jupyter and Python extensions, and a "Web Development" profile with React and Tailwind extensions.

Create profiles via Ctrl+Shift+P → "Profiles: Create Profile." Switch between profiles from the gear menu in the bottom left. Profiles sync across machines too.

Pro tip: Create separate profiles for different project types to keep VS Code fast. A profile with only Python extensions loads faster for Python work than a profile with 50 extensions for every language. You can also export profiles to share your setup with teammates.

18. Performance Optimization

VS Code is fast out of the box, but it can slow down with too many extensions, large workspaces, or misconfigured settings. Here is how to keep it running smoothly.

Diagnosing Performance Issues

Reducing Startup Time

{
    // Disable telemetry
    "telemetry.telemetryLevel": "off",

    // Disable features you do not use
    "editor.minimap.enabled": false,
    "editor.occurrencesHighlight": "off",
    "editor.renderControlCharacters": false,
    "workbench.startupEditor": "none",

    // Reduce file watching overhead
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/dist/**": true,
        "**/build/**": true,
        "**/.next/**": true,
        "**/coverage/**": true
    },

    // Limit search scope
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/build": true,
        "**/coverage": true,
        "**/*.min.js": true,
        "**/.git": true
    },

    // Disable unnecessary features for large files
    "editor.largeFileOptimizations": true,
    "editor.maxTokenizationLineLength": 10000
}

Extension Management

• Audit regularly: Run "Developer: Show Running Extensions" and note activation times. Anything over 500ms deserves investigation.
• Use workspace-specific extensions: Disable language extensions globally and enable them only in relevant workspaces. A Go extension does not need to run when you are editing a Python project.
• Choose lighter alternatives: Some extensions duplicate built-in functionality. VS Code now has built-in bracket colorization, so you can uninstall the Bracket Pair Colorizer extension.
• Watch for runaway extensions: Use the Process Explorer to identify extensions consuming excessive CPU or memory.

Large Workspace Tips

For monorepos or projects with many files:

{
    // Exclude large directories from file explorer
    "files.exclude": {
        "**/node_modules": true,
        "**/.git": true,
        "**/dist": true,
        "**/.cache": true
    },

    // Increase memory for TypeScript server
    "typescript.tsserver.maxTsServerMemory": 4096,

    // Disable auto-detection of tasks in large repos
    "task.autoDetect": "off"
}

Pro tip: If VS Code feels slow, the first thing to check is the Process Explorer (Ctrl+Shift+P → "Developer: Open Process Explorer"). Look for processes using high CPU. If it is an extension host process, the "Show Running Extensions" command will tell you which extension is the culprit. Often, disabling or updating a single problematic extension fixes all performance issues.

19. Lesser-Known Features

VS Code is packed with features that most developers never discover. These hidden gems can significantly improve your workflow.

Timeline View

The Timeline view (in the Explorer sidebar) shows a chronological history of changes to the current file. It includes both Git commits and local file saves, so you can see and restore previous versions even if you forgot to commit. Click any entry to see a diff against the current version.

Sticky Scroll

Sticky Scroll pins the current scope (function, class, or block) at the top of the editor as you scroll through a file. It makes it easy to see which function you are in, even in deeply nested code. Enable it with:

{
    "editor.stickyScroll.enabled": true,
    "editor.stickyScroll.maxLineCount": 5
}

Bracket Pair Colorization and Guides

Built-in bracket pair colorization assigns different colors to matching brackets at different nesting levels. Bracket pair guides draw lines between matching brackets to visualize scope.

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.guides.bracketPairsHorizontal": true
}

Zen Mode

Zen Mode removes all distractions: sidebar, activity bar, status bar, and panel all disappear. The editor goes full screen with your code centered. Toggle it with Ctrl+K Z.

Linked Editing

When editing HTML, linked editing automatically updates the closing tag when you change the opening tag. No extension needed:

{
    "editor.linkedEditing": true
}

Screencast Mode

Screencast Mode shows keystrokes on screen as you type. It is perfect for presentations, pair programming, and recording tutorials. Toggle via Ctrl+Shift+P → "Developer: Toggle Screencast Mode."

Built-in Markdown Preview

Open any Markdown file and press Ctrl+Shift+V to see a live preview. Press Ctrl+K V to see the preview side-by-side with the editor. The preview updates as you type and supports GitHub Flavored Markdown, math equations, and Mermaid diagrams.

Auto Save and Hot Exit

VS Code can automatically save files and preserve unsaved changes across restarts. Hot Exit means you can close VS Code with unsaved files, and they will all be exactly as you left them when you reopen.

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.hotExit": "onExitAndWindowClose"
}

Editor Minimap and Scrollbar

If you keep the minimap enabled, customize it for better readability:

{
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 80,
    "editor.minimap.showSlider": "always",
    "editor.scrollbar.verticalScrollbarSize": 12
}

Pinned Tabs

Right-click a tab and select "Pin Tab" to keep important files from being closed by the preview mechanism. Pinned tabs appear as small icons on the left side of the tab bar. Configure their behavior:

{
    "workbench.editor.pinnedTabSizing": "compact"
}

Pro tip: Use the Timeline view as an insurance policy against lost work. Even without Git, every save creates a timeline entry that you can restore. Combine this with Hot Exit and auto-save, and you essentially have automatic version history for every file you work on.

20. Custom Keybindings

Custom keybindings let you map any VS Code command to any key combination. Open the keybindings editor with Ctrl+K Ctrl+S, or edit keybindings.json directly for full control.

Keybindings Editor

Useful Custom Keybindings

// keybindings.json
[
    // Toggle terminal with a single key
    {
        "key": "ctrl+`",
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // Duplicate line without clipboard (alternative)
    {
        "key": "ctrl+shift+d",
        "command": "editor.action.copyLinesDownAction"
    },

    // Navigate between editor groups
    {
        "key": "ctrl+h",
        "command": "workbench.action.focusLeftGroup"
    },
    {
        "key": "ctrl+l",
        "command": "workbench.action.focusRightGroup"
    },

    // Save all files
    {
        "key": "ctrl+shift+s",
        "command": "workbench.action.files.saveAll"
    },

    // Toggle word wrap
    {
        "key": "alt+z",
        "command": "editor.action.toggleWordWrap"
    },

    // Open recent project
    {
        "key": "ctrl+shift+o",
        "command": "workbench.action.openRecent"
    },

    // Close all editors in group
    {
        "key": "ctrl+k ctrl+w",
        "command": "workbench.action.closeEditorsInGroup"
    },

    // Focus explorer
    {
        "key": "ctrl+e",
        "command": "workbench.view.explorer",
        "when": "!explorerViewletVisible"
    },
    {
        "key": "ctrl+e",
        "command": "workbench.action.focusActiveEditorGroup",
        "when": "explorerViewletVisible"
    }
]

Keybinding Conditions (when clauses)

The when clause makes keybindings context-aware. The same key can do different things depending on what is focused:

// Example: Escape closes the find widget when it is visible,
// but exits Zen Mode when the find widget is not visible
[
    {
        "key": "escape",
        "command": "closeFindWidget",
        "when": "findWidgetVisible && editorTextFocus"
    },
    {
        "key": "escape",
        "command": "workbench.action.exitZenMode",
        "when": "inZenMode && !findWidgetVisible"
    }
]

Pro tip: Use the "Record Keys" feature in the Keyboard Shortcuts editor to find conflicts. Click the keyboard icon, press your desired key combination, and VS Code shows all commands currently bound to those keys. Remove conflicting bindings before adding your own. Also, export your keybindings as a JSON file and share it with your team for consistent shortcuts across the project.