Setting Up VS Code

Download VS Code 550 from code.visualstudio.com (https://code.visualstudio.com/ 550 ) (version 1.137 shipped on September 9, 2026; updates install themselves). On Windows, tick Add to PATH during setup; on macOS, run Shell Command: Install 'code' command in PATH from the Command Palette. You can then open any project folder from a terminal with code ..

Five shortcuts cover most of your day: Ctrl+Shift+P (Cmd+Shift+P) opens the Command Palette, Ctrl+P jumps to a file by name, Ctrl+ toggles the integrated terminal, Alt+Click adds a cursor, and F2 renames a symbol across files. HTML and CSS support, **Emmet 148,459 ** abbreviations and the TypeScript/JavaScript language service are built in: type ul>li.item*3` in an HTML file and press Tab to get a list with three items.

VS Code keeps the editor responsive by running extensions and language servers in separate processes

Next, make the setup part of the project so every teammate gets it. A .vscode/extensions.json file makes VS Code offer to install the listed extensions when someone opens the folder; the IDs are the publisher.name strings shown on each Marketplace page.

.vscode/extensions.json: recommended extensions for a front-end projectJSON

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.live-server",
    "bradlc.vscode-tailwindcss",
    "usernamehw.errorlens"
  ]
}

Prettier 68,264 formats code consistently, ESLint 39,810 flags bugs using your eslint.config.js, Live Preview serves the folder on a local web server with an embedded browser that reloads as you type, Tailwind CSS 5,202 IntelliSense completes utility classes (Tailwind CSS), and Error Lens prints diagnostics at the end of the offending line.

.vscode/settings.json: format and fix on saveJSON

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "editor.linkedEditing": true,
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange",
  "[markdown]": { "editor.wordWrap": "on" }
}

Settings cascade from lowest to highest priority: defaults, your user settings (%APPDATA%\Code\User\settings.json on Windows, ~/Library/Application Support/Code/User/settings.json on macOS, ~/.config/Code/User/settings.json on Linux), workspace settings in .vscode/settings.json, and finally language-specific blocks such as [markdown]. linkedEditing renames a closing HTML tag while you edit its opening tag. Commit both files to Git 1,932 .

MENU