VS Code Extensions and Settings for Next.js and TypeScript Developers
A good editor setup catches errors before you save and formats code without you thinking about it. For Next.js, TypeScript and Tailwind CSS, nine extensions do almost all of it: ESLint, Prettier, Tailwind CSS IntelliSense, Error Lens, Pretty TypeScript Errors, GitLens, Code Spell Checker, Claude Code, and the Catppuccin theme.
( Before you start )
The extensions
| Extension | ID | Why |
|---|---|---|
| ESLint | dbaeumer.vscode-eslint | Lint problems inline, fixed on save |
| Prettier | esbenp.prettier-vscode | One formatter for JS, TS, CSS, JSON and Markdown |
| Tailwind CSS IntelliSense | bradlc.vscode-tailwindcss | Class autocomplete, hover previews, typo warnings |
| Error Lens | usernamehw.errorlens | Errors printed at the end of the line, not hidden in a hover |
| Pretty TypeScript Errors | yoavbls.pretty-ts-errors | Long type errors made readable |
| GitLens | eamodio.gitlens | Who changed a line, when and why — inline |
| Code Spell Checker | streetsidesoftware.code-spell-checker | Typos in names, strings and comments |
| Claude Code | anthropic.claude-code | Claude Code in a panel, with its changes shown as diffs |
| Catppuccin | Catppuccin.catppuccin-vsc | A soft, low-glare theme — this site’s dark mode is Mocha |
| Catppuccin Icons | Catppuccin.catppuccin-vsc-icons | File icons that match the theme |
( Step by step )
Install them from the terminal
Make sure the code command is on your PATH — on macOS, open the Command Palette and run “Shell Command: Install ‘code’ command in PATH”. Then install the whole set at once:
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension usernamehw.errorlens
code --install-extension yoavbls.pretty-ts-errors
code --install-extension eamodio.gitlens
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension anthropic.claude-code
code --install-extension Catppuccin.catppuccin-vsc
code --install-extension Catppuccin.catppuccin-vsc-iconsCopy these settings
Open the Command Palette, run “Preferences: Open User Settings (JSON)” and merge this in:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.linkedEditing": true,
"files.associations": {
"*.css": "tailwindcss"
},
"typescript.preferences.importModuleSpecifier": "non-relative",
"workbench.colorTheme": "Catppuccin Mocha",
"workbench.iconTheme": "catppuccin-mocha"
}- formatOnSave + defaultFormatter — Prettier formats every file you save.
- source.fixAll.eslint — ESLint fixes what it can each time you save.
- linkedEditing — rename an opening JSX tag and the closing tag follows. It is built in, so you do not need an Auto Rename Tag extension.
- files.associations — opens CSS files in Tailwind mode, which stops “unknown at rule” warnings on Tailwind CSS 4 directives such as
@theme. - importModuleSpecifier — auto-imports use your path aliases, such as
@/lib/utils, instead of../../lib/utils.
Back up your list
# Save every installed extension to a file
code --list-extensions > vscode-extensions.txt
# Reinstall them all on a new machine
xargs -n 1 code --install-extension < vscode-extensions.txtOr turn on Settings Sync from the Accounts menu at the bottom left, and your extensions, settings and keyboard shortcuts follow you to every machine.
( Going further )
Shortcuts worth learning
| Action | macOS | Windows / Linux |
|---|---|---|
| Command Palette | Cmd+Shift+P | Ctrl+Shift+P |
| Go to file | Cmd+P | Ctrl+P |
| Go to symbol in file | Cmd+Shift+O | Ctrl+Shift+O |
| Rename symbol | F2 | F2 |
| Quick fix | Cmd+. | Ctrl+. |
| Select next match | Cmd+D | Ctrl+D |
| Toggle the panel (terminal) | Cmd+J | Ctrl+J |
| Format document | Shift+Option+F | Shift+Alt+F |
Keep the editor fast
- Every extension costs start-up time. Run “Developer: Show Running Extensions” to find the slow ones.
- Disable an extension for one workspace instead of uninstalling it.
- Use Profiles to keep a lean web setup apart from, say, a Python one.
VS Code FAQ
- Do I still need Auto Rename Tag?
- No. Turn on
editor.linkedEditingand VS Code renames the matching tag itself. - Should ESLint or Prettier format my code?
- Prettier formats; ESLint finds problems. Let Prettier own formatting and keep stylistic rules out of your ESLint config, so the two never fight.
- What does the Claude Code extension add?
- It brings Claude Code into VS Code as a panel, with proposed changes shown as diffs in the editor. It needs VS Code 1.94 or later. To shape what it does in your project, see How to write a CLAUDE.md.