VS Code for AI Coders: Essential Setup Guide

Essential Extensions

Install these from the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X):

Code Quality

• ESLint (dbaeumer.vscode-eslint) — Shows ESLint errors as red/yellow underlines in real time. Install this and configure ESLint in your project.
• Prettier (esbenp.prettier-vscode) — Format-on-save. AI generates inconsistently formatted code; Prettier fixes it every time you save.
• Error Lens (usernamehw.errorlens) — Shows error messages inline next to the code rather than just as underlines. Game-changing for readability.

AI Assistance

• GitHub Copilot (github.copilot) — Inline completions and chat. Free tier available.
• GitHub Copilot Chat (github.copilot-chat) — Chat panel for asking questions about your code.

Note: If you use Cursor, you already have a VS Code fork with better AI integration built in. These extensions apply to standard VS Code.

Navigation and Git

• GitLens (eamodio.gitlens) — Shows git blame inline (who wrote this line), file history, and makes navigating changes easy. Essential for understanding AI-generated code that was committed previously.
• Path Intellisense (christian-kohler.path-intellisense) — Autocompletes file paths in imports. Prevents the "file not found" errors from typos in import paths.
• Auto Rename Tag (formulahendry.auto-rename-tag) — When you rename an HTML opening tag, the closing tag updates automatically.

Language Support

• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — Autocomplete for Tailwind classes with color previews. Essential if AI generates Tailwind code.
• Prisma (Prisma.prisma) — Syntax highlighting and formatting for Prisma schema files.
• Thunder Client (rangav.vscode-thunder-client) — API testing tool (like Postman) built into VS Code. Test your API endpoints without leaving the editor.

Optimal Settings.json

Press Ctrl+Shift+P → "Open User Settings JSON" and add these settings:

{
  // Format on save with Prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint auto-fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // Better font for code
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,

  // Visual improvements
  "editor.minimap.enabled": false,      // Disable minimap (saves space)
  "editor.wordWrap": "on",              // Wrap long lines
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",

  // File explorer
  "explorer.confirmDelete": false,
  "explorer.sortOrder": "type",

  // TypeScript
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.importModuleSpecifier": "relative",

  // Git
  "git.autofetch": true,
  "git.confirmSync": false,

  // Error Lens
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.messageTemplate": "$message",

  // Copilot
  "github.copilot.enable": {
    "*": true,
    "markdown": true,
    "plaintext": false
  }
}

Project .vscode/settings.json

Some settings should be project-specific and shared with your team. Create .vscode/settings.json in your project root:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  }
}

Commit this file to Git so every team member (and AI agents working in the project) gets the same editor behavior automatically.

Essential Keyboard Shortcuts

• Ctrl+P / Cmd+P — Quick open file by name (fastest way to navigate)
• Ctrl+Shift+P / Cmd+Shift+P — Command palette (run any VS Code command)
• F12 — Go to definition (jump to where a function/variable is defined)
• Shift+F12 — Find all references (see everywhere a function is used)
• F2 — Rename symbol (rename a variable/function across all files)
• Ctrl+` — Toggle integrated terminal
• Ctrl+B / Cmd+B — Toggle sidebar
• Alt+Click — Multiple cursors (edit in multiple places simultaneously)
• Ctrl+D / Cmd+D — Select next occurrence of current word
• Ctrl+Shift+K — Delete current line

The most impactful shortcuts for working with AI-generated code: F12 (jump to definition to understand what AI is calling), F2 (rename to fix AI's generic variable names), and Ctrl+P (navigate the project quickly).

Workspace Layout Tips

Split editor for AI work

When reviewing AI-generated code, use the split editor (Ctrl+\ / Cmd+\) to keep the AI chat on one side and the code on the other. Or open the component and its test file side-by-side.

Workspace files (.code-workspace)

For larger projects with multiple repos or root directories, use a .code-workspace file. This lets VS Code treat multiple folders as one project with unified search, shared settings, and combined file navigation.

Zen mode

Ctrl+K Z toggles Zen Mode — hides all panels and shows only the editor. Useful when reviewing AI-generated code and you need to focus without distractions.

What to Learn Next

• What Is ESLint? — Configure ESLint to power the ESLint VS Code extension.
• What Is Prettier? — Format-on-save setup for VS Code.
• Cursor Beginner's Guide — The AI-native VS Code fork used by most serious vibe coders.
• Browser DevTools Guide — Pair VS Code with DevTools for complete debugging coverage.

FAQ