VS Code Guide — Tips, Extensions, and Workflow Optimization

Visual Studio Code (VS Code) is a free, open-source code editor by Microsoft that has become the most popular development environment for JavaScript, TypeScript, Python, and nearly every modern programming language.

In this tutorial, you will learn how to set up VS Code for peak productivity, customize keybindings, configure essential extensions like ESLint and Prettier, master the integrated terminal, use the debugging tools, and sync settings across machines. Real-world developers at DodaTech use VS Code daily to build Doda Browser, DodaZIP, and Durga Antivirus Pro — editors matter for shipping quality code fast.

What You’ll Learn

By the end of this guide, you will have a fully optimized VS Code setup with custom keybindings, linting and formatting automation, a productive debug workflow, and cross-device settings synchronization.

Why VS Code Matters

Every minute you save on editor configuration compounds over a career. Developers who master their editor write code faster, catch bugs earlier, and navigate large codebases more efficiently. VS Code’s extension ecosystem lets you turn a simple editor into a full IDE tailored to your stack.

VS Code Learning Path

    flowchart LR
  A[Setup & Keybindings] --> B[Extensions]
  B --> C[Terminal & Debugging]
  C --> D[Settings Sync]
  D --> E{You Are Here}
  D --> F[Custom Snippets]
  D --> G[Remote Development]
  style E fill:#f90,color:#fff
  

Installation and Setup

Download VS Code from code.visualstudio.com. It supports Windows, macOS, and Linux.

Command Palette

The most important shortcut: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS). Every action in VS Code is accessible here — opening files, running commands, installing extensions.

Keybindings Worth Memorizing

Essential Extensions

ESLint

Lints JavaScript and TypeScript code in real time, catching errors before you run the file.

Configure in settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Prettier

Formats code automatically on save, eliminating style debates.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.tabWidth": 2
}

GitLens

Supercharges the built-in Git features — inline blame annotations, commit search, file history, and branching visuals.

Other Extensions

• Error Lens: Inline error messages
• Path Intellisense: Auto-completes file paths
• Material Icon Theme: File icons for visual scanning
• Bracket Pair Colorizer: Color-matched brackets
• Live Share: Real-time collaborative editing

Integrated Terminal

VS Code’s integrated terminal lets you run build commands, Git operations, and scripts without leaving the editor.

Open with `Ctrl+`` (backtick). Configure a custom shell:

{
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.defaultProfile.linux": "zsh",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 13
}

Split terminals vertically with Ctrl+Shift+5. Each terminal remembers its working directory.

Debugging

Set breakpoints by clicking the gutter (left of line numbers). Press F5 to start debugging. Configure launch profiles in .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229
    }
  ]
}

Expected output when debugging starts

Debugger attached.
Breakpoint 1 hit at line 12 in index.js
> 12   const result = processData(input);

Key debugging features:

• Watch expressions: Evaluate variables in real time
• Call stack: Navigate up and down execution frames
• Variables pane: Inspect local, closure, and global scopes
• Breakpoint conditions: i > 100 — only break when a condition is met

Settings Sync

Enable Settings Sync from the gear icon in the bottom-left corner (Manage → Turn on Settings Sync). Your settings, keybindings, extensions, and UI state are backed up to your GitHub or Microsoft account.

{
  "sync.gist": "your-gist-id",
  "sync.quietSync": false,
  "sync.removeExtensions": true
}

When you set up a new machine, sign in and sync restores everything within seconds.

Common Errors

1. ESLint and Prettier Conflicts

Rules like semi and quotes conflict when both tools try to format differently.

Fix: Use eslint-config-prettier to disable ESLint rules that overlap with Prettier. Add it to your ESLint config: "extends": ["prettier"].

2. Integrated Terminal Not Recognizing PATH

On macOS, VS Code might not load shell profile files. Add this to settings.json:

{
  "terminal.integrated.inheritEnv": false,
  "terminal.integrated.profiles.linux": { "bash": { "path": "bash", "args": ["-l"] } }
}

3. Extensions Not Activating

Extensions activate on specific language or workspace events. If an extension seems inactive, check its activation events in the Extensions panel, or reload the window (Ctrl+Shift+P → Developer: Reload Window).

4. GitLens Not Showing Blame Annotations

GitLens requires a Git repository. Run git init in the workspace folder or open a folder with an existing .git directory. Check that Git is installed and on your PATH.

5. Settings Sync Conflicts

When two machines push conflicting settings, sync may fail. Resolve by choosing one as the source and discarding the other’s changes. Use Settings Sync: Show Synced Data to inspect.

6. Debugger Not Attaching to Node.js

Start your Node.js process with the --inspect flag:

node --inspect-brk index.js

Then use the “Attach to Process” launch configuration.

7. Missing IntelliSense for Imported Modules

Install type definitions: npm install --save-dev @types/node. Ensure jsconfig.json or tsconfig.json exists in the project root.

Practice Questions

1. What keyboard shortcut opens the Command Palette?

Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS). Every command in VS Code is accessible here.

2. How do you configure ESLint to auto-fix on save?

Set "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } in settings.json.

3. What is the purpose of launch.json in VS Code?

It stores debugging configurations — program path, environment variables, arguments, and the Node.js runtime options.

4. How do you enable Settings Sync?

Click the gear icon in the bottom-left corner, select “Turn on Settings Sync”, and authenticate with GitHub or Microsoft.

5. Challenge: Custom keybindings

Create a keybinding that inserts a console.log statement at the cursor position. Open keybindings.json and add:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1');$0"
  }
}

Mini Project: VS Code Workspace Configuration

Create a .vscode folder in your project root with three files:

settings.json — project-level editor settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.rulers": [80, 100],
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

extensions.json — recommended extensions for team members:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens",
    "pkief.material-icon-theme"
  ]
}

launch.json — debug configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Start Dev Server",
      "program": "${workspaceFolder}/server.js",
      "env": { "PORT": "3000" }
    }
  ]
}

Commit these to version control so every team member has identical settings. This is the exact approach used at DodaTech for Doda Browser and DodaZIP development.

FAQ

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.