5 VS Code extensions worth installing

A default VS Code works, but these five make it faster to read, harder to break and easier to keep clean. Below: what each one does, the install ID, the settings that make it actually work, and the honest catch.

code --install-extension PKief.material-icon-theme
code --install-extension johnpapa.vscode-peacock
code --install-extension usernamehw.errorlens
code --install-extension aaron-bond.better-comments
code --install-extension esbenp.prettier-vscode

01Material Icon Theme

Gives every file and folder its own icon (React, JS, config, tests…), so you find things in a big project at a glance. About 36 million installs.

• After installing, open the Command Palette (Ctrl+Shift+P) → Preferences: File Icon Theme → Material Icon Theme.

02Peacock

Colours each project window differently, so with three windows open you never type into the wrong project.

• Command Palette → Peacock: Change to a Favorite Color (or enter your own hex).
• Catch: the colour is written into .vscode/settings.json of that project. On a team repo, either agree on it or keep that file out of your commit.

// .vscode/settings.json (written by Peacock)
{
  "workbench.colorCustomizations": { "activityBar.background": "#e8692e" },
  "peacock.color": "#e8692e"
}

03Error Lens

Prints errors and warnings at the end of the line where they happen, so you don't have to hover over the red squiggle.

• Catch: it doesn't find errors itself. It shows what VS Code already reports: TypeScript, ESLint or your language's extension. No linter, nothing to show.

04Better Comments

Colours comments by the tag you start them with.

• Catch: it's an older extension (v3.0.2, no updates since 2023). It still works fine; just don't expect new features.

05Prettier, Code formatter

Formats your code the same way every time you save: spacing, quotes, line breaks. Installing it alone does nothing; add these two settings.

// File → Preferences → Settings → open settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• Want the same style for your whole team? Add a .prettierrc file to the project, so everyone formats alike.