Extensions¶

Essential VS Code extensions for development.

Managing Extensions¶

Install Extension¶

Cmd+Shift+X to open Extensions
Search for extension
Click "Install"

Via Command Line¶

# Install
code --install-extension ms-python.python

# List installed
code --list-extensions

# Uninstall
code --uninstall-extension extension-id

Extension Recommendations¶

Create .vscode/extensions.json in project:

{
  "recommendations": [
    "ms-python.python",
    "esbenp.prettier-vscode"
  ],
  "unwantedRecommendations": [
    "some.extension"
  ]
}

Essential Extensions¶

Python¶

Python (ms-python.python)

Core Python extension:

IntelliSense
Debugging
Code navigation
Jupyter support

Pylance (ms-python.vscode-pylance)

Fast Python language server:

Type checking
Auto-imports
Rich completions

Black Formatter (ms-python.black-formatter)

Python code formatter.

Ruff (charliermarsh.ruff)

Fast Python linter:

{
  "ruff.lint.args": ["--config=pyproject.toml"]
}

JavaScript/TypeScript¶

ESLint (dbaeumer.vscode-eslint)

JavaScript/TypeScript linting:

{
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

Prettier (esbenp.prettier-vscode)

Code formatter for multiple languages:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Rust¶

rust-analyzer (rust-lang.rust-analyzer)

Rust language support:

IntelliSense
Code actions
Debugging support

{
  "rust-analyzer.checkOnSave.command": "clippy"
}

Go¶

Go (golang.go)

Official Go extension:

IntelliSense
Debugging
Testing support

{
  "go.formatTool": "gofmt",
  "go.lintTool": "golangci-lint"
}

Docker¶

Docker (ms-azuretools.vscode-docker)

Docker support:

Dockerfile syntax
Docker Compose
Container management
Image exploration

Git¶

GitLens (eamodio.gitlens)

Git supercharged:

Blame annotations
Code authorship
Rich history
Visual diff

{
  "gitlens.currentLine.enabled": false,
  "gitlens.hovers.enabled": false
}

Git Graph (mhutchie.git-graph)

Visual git history:

Branch visualization
Interactive rebasing

Language Support¶

HTML/CSS¶

HTML CSS Support (ecmel.vscode-html-css)

CSS IntelliSense in HTML.

CSS Peek (pranaygp.vscode-css-peek)

Jump to CSS definitions.

Markdown¶

Markdown All in One (yzhang.markdown-all-in-one)

Markdown tools:

Shortcuts
Table of contents
Preview

markdownlint (davidanson.vscode-markdownlint)

Markdown linting.

YAML¶

YAML (redhat.vscode-yaml)

YAML language support with schema validation.

{
  "yaml.schemas": {
    "https://json.schemastore.org/github-workflow": ".github/workflows/*.yml"
  }
}

TOML¶

Even Better TOML (tamasfe.even-better-toml)

TOML language support.

Productivity¶

Code Spell Checker¶

Code Spell Checker (streetsidesoftware.code-spell-checker)

Spell checking for code:

{
  "cSpell.userWords": ["pytest", "asyncio"]
}

Path Intellisense¶

Path Intellisense (christian-kohler.path-intellisense)

Autocomplete file paths.

Bracket Pair Colorizer¶

Built into VS Code now:

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

Todo Tree¶

Todo Tree (gruntfuggly.todo-tree)

Track TODOs and FIXMEs:

{
  "todo-tree.general.tags": ["TODO", "FIXME", "HACK", "XXX"]
}

Error Lens¶

Error Lens (usernamehw.errorlens)

Show diagnostics inline:

{
  "errorLens.enabledDiagnosticLevels": ["error", "warning"]
}

Themes¶

Popular Themes¶

Dracula Official (dracula-theme.theme-dracula)
One Dark Pro (zhuangtongfa.material-theme)
Tokyo Night (enkia.tokyo-night)
Catppuccin (catppuccin.catppuccin-vsc)
GitHub Theme (github.github-vscode-theme)
Gruvbox Theme (jdinhlife.gruvbox)

Icon Themes¶

Material Icon Theme (pkief.material-icon-theme)
vscode-icons (vscode-icons-team.vscode-icons)

Remote Development¶

Remote - SSH¶

Remote - SSH (ms-vscode-remote.remote-ssh)

Edit on remote machines:

{
  "remote.SSH.defaultExtensions": [
    "ms-python.python"
  ]
}

Dev Containers¶

Dev Containers (ms-vscode-remote.remote-containers)

Develop inside containers:

.devcontainer/devcontainer.json configuration
Reproducible environments

WSL¶

WSL (ms-vscode-remote.remote-wsl)

Edit in Windows Subsystem for Linux.

Testing¶

Test Explorer UI¶

Test Explorer UI (hbenl.vscode-test-explorer)

Unified test interface.

Python Testing¶

Pytest support built into Python extension:

{
  "python.testing.pytestEnabled": true,
  "python.testing.pytestArgs": ["tests"]
}

Extension Packs¶

Python Extension Pack¶

Multiple Python extensions bundled.

Remote Development¶

All remote extensions in one pack.

Extension Settings¶

Per-Extension Configuration¶

{
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "gitlens.currentLine.enabled": false,
  "eslint.validate": ["javascript", "typescript"]
}

Disable Extension for Workspace¶

Cmd+Shift+X
Find extension
Click gear icon
"Disable (Workspace)"

Recommended Setup¶

Python Development¶

{
  "recommendations": [
    "ms-python.python",
    "ms-python.vscode-pylance",
    "ms-python.black-formatter",
    "charliermarsh.ruff",
    "ms-toolsai.jupyter"
  ]
}

Web Development¶

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag"
  ]
}

DevOps¶

{
  "recommendations": [
    "ms-azuretools.vscode-docker",
    "redhat.vscode-yaml",
    "hashicorp.terraform"
  ]
}

Performance Tips¶

Disable unused extensions: Right-click > Disable
Use workspace recommendations: Only enable what you need
Check extension impact: Help > Process Explorer