iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

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

Test yourself

Q1. Install extensions from…
Q2. Recommended workspace extensions are listed in…
Q3. For Python, a popular extension is…

Discussion

Loading…