Extensions
Extensions are the modular layer of VS Code. Search the Marketplace, install, configure per workspace or globally. The right 10 extensions can do more than another editor.
Essentials + workspace recommendations
EXAMPLE
// 1) Install / manage extensions
// Command Palette → 'Extensions: Install Extensions'
// CLI:
// code --install-extension dbaeumer.vscode-eslint
// code --uninstall-extension <id>
// code --list-extensions
// 2) Per-workspace recommendations — share with the team
// .vscode/extensions.json
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss",
"prisma.prisma",
"redhat.vscode-yaml",
"editorconfig.editorconfig",
"streetsidesoftware.code-spell-checker",
"ms-azuretools.vscode-docker",
"github.vscode-pull-request-github"
],
"unwantedRecommendations": [
"hookyqr.beautify"
]
}
// VS Code prompts users to install on workspace open.
// 3) The essentials I install on every machine
// JS / TS
// - dbaeumer.vscode-eslint — ESLint
// - esbenp.prettier-vscode — Prettier
// - ms-vscode.vscode-typescript-next — TS nightly
// - dsznajder.es7-react-js-snippets — React snippets
// CSS / Tailwind
// - bradlc.vscode-tailwindcss
// - csstools.postcss
// Python
// - ms-python.python
// - charliermarsh.ruff — fast Python linter/formatter
// - ms-python.vscode-pylance
// - ms-toolsai.jupyter
// Go / Rust / Java
// - golang.go
// - rust-lang.rust-analyzer
// - redhat.java
// DevOps
// - ms-azuretools.vscode-docker
// - hashicorp.terraform
// - ms-kubernetes-tools.vscode-kubernetes-tools
// - github.vscode-github-actions
// DB
// - prisma.prisma
// - mtxr.sqltools — multi-DB client
// - ckolkman.vscode-postgres
// Workflow
// - github.copilot — AI completion
// - github.copilot-chat — AI chat
// - editorconfig.editorconfig
// - streetsidesoftware.code-spell-checker
// - usernamehw.errorlens — inline error messages
// - vscode-icons-team.vscode-icons — file icons
// - gruntfuggly.todo-tree — find TODO comments
// - ms-vsliveshare.vsliveshare — pair programming
// 4) Configure per-workspace
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
"[python]": { "editor.defaultFormatter": "charliermarsh.ruff" },
"[go]": { "editor.defaultFormatter": "golang.go" },
"tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\\\"'`]([^\\\"'`]*).*?[\\\"'`]"]],
"todo-tree.general.tags": ["TODO", "FIXME", "HACK", "XXX"]
}
// 5) Profiles — switch entire extension sets per project type
// Command Palette → 'Profiles: Create Profile'
// Useful: 'Web Dev', 'Python ML', 'Go Backend', 'Writing'
// 6) Build your own extension — when nothing exists
// npm i -g yo generator-code
// yo code
// Choose: TypeScript, no webpack, etc.
// Develop with F5; install via VSIX (vsce package).
// 7) Be careful what you install
// • Extensions run with your USER PRIVILEGES — file access, network, process
// • Stick to publishers you recognise (Microsoft, official orgs, well-known authors)
// • Check the source repo when stakes are high (corporate code, credentials)
// • Review extension permissions periodically
// 8) Performance tips
// • Disable extensions you don't use in the current workspace (per-workspace disable)
// • Profile slow start: Help → About → 'Show Running Extensions' → look for extension load times
// • If something becomes sluggish, bisect: disable half, see if it fixes
// 9) Anti-patterns
// • Don't install 30 syntax-highlight extensions for things you don't use
// • Avoid 'beautify everything' extensions when you have language-specific formatters
// • Don't install MULTIPLE formatters for one language — they fight
Why it matters
.vscode/extensions.json + .vscode/settings.json in your repo turns “works on my machine” into “everyone on the team gets the same lint, format, IntelliSense.” Friction drops, code quality rises.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
// Must-haves for most stacks: // Prettier, ESLint, GitLens, Error Lens, EditorConfig, // language packs (Python, Go, Rust, PHP IntelliSense, …), // Live Server / Live Share, Docker, REST Client.Try it Yourself »
Exercise
File where workspace recommends extensions.
.vscode/
.json
Ten letters.
Discussion
Loading…