How it actually looks
three themes out of the workbench's own state, the font out of settings.json
These keys decide the whole look. The values are one machine's; the keys are what you would write
in your own settings.json to land on the same screen.
workbench.colorTheme
colour theme | Dark 2026 — ships with the editor. Set in settings.json. |
workbench.iconTheme
file icons | Seti (Visual Studio Code) — ships with the editor. Set in settings.json. |
workbench.productIconTheme
the UI icons | Default — ships with the editor. Never set; this is the fallback. |
editor.fontFamily
editor font | 'Fira Code', Menlo, Monaco, 'Courier New', monospace at 15px,
ligatures on. Set in settings.json. |
Fira Code is the only name in
that list anyone chose, and the one thing on this page no editor or extension installs for you:
brew install --cask font-fira-code
Worth checking rather than assuming — missing, nothing errors: the text quietly renders in the
next name along with editor.fontLigatures still on and no ligatures in sight.
Takes all 43 — one machine's set, not a recommendation, so click three cards
below instead if you only want three. Needs the code command, which the macOS app does
not install for you: run Shell Command: Install 'code' command in PATH from the
command palette first. Anything already installed is skipped; restart VS Code once it finishes.
Click a card to copy its own install command · ↗ opens it on the Marketplace.
- Hex Editor↗
ms-vscode.hexeditor — Allows viewing and editing files in a hex editor
- CSS Variable Autocomplete↗
vunguyentuan.vscode-css-variables — Autocomplete CSS Variable support CSS, SCSS, LESS, PostCSS, VueJS, ReactJS and more
- AHEAD Data De-identification Tool↗
ahead.ahead-data-de-identification-tool — De-identify FCS files by removing sensitive metadata
- Partial Diff↗
ryu1kn.partial-diff — Compare (diff) text selections within a file, across files, or to the clipboard
- EditorConfig↗
editorconfig.editorconfig — EditorConfig Support for Visual Studio Code
- Sort package.json↗
unional.vscode-sort-package-json — Sort package.json
- Markdown yaml Preamble↗
bierner.markdown-yaml-preamble — Renders yaml front matter as a table in the built-in markdown preview
- Better Todo Tree↗
fanaticpythoner.better-todo-tree — An independent, actively maintained fork of Todo Tree for VS Code: the familiar workflow, major new features, active fixes, benchmarked speedups of 696+ folds, modern compatibility.
- Remote Explorer↗
ms-vscode.remote-explorer — View remote machines for SSH and Tunnels.
- Remote - SSH↗
ms-vscode-remote.remote-ssh — Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
- Dev Containers↗
ms-vscode-remote.remote-containers — Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set.
- Error Lens↗
usernamehw.errorlens — Improve highlighting of errors, warnings and other language diagnostics.
- Python Environments↗
ms-python.vscode-python-envs — Provides a unified python environment experience
- TypeScript 7↗
typescriptteam.native-preview — TypeScript and JavaScript language support powered by the native TypeScript language server.
- Even Better TOML↗
tamasfe.even-better-toml — Fully-featured TOML support
- CSS Peek↗
pranaygp.vscode-css-peek — Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
- Markdown All in One↗
yzhang.markdown-all-in-one — All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
- Pretty TypeScript Errors↗
yoavbls.pretty-ts-errors — Make TypeScript errors prettier and more human-readable in VSCode
- XML↗
redhat.vscode-xml — XML Language Support by Red Hat
- YAML↗
redhat.vscode-yaml — YAML Language Support by Red Hat, with built-in Kubernetes syntax support
- ESLint↗
dbaeumer.vscode-eslint — Integrates ESLint JavaScript into VS Code.
- Remote - SSH: Editing Configuration Files↗
ms-vscode-remote.remote-ssh-edit — Edit SSH configuration files
- Dependi↗
fill-labs.dependi — Empowers developers to efficiently manage dependencies and address vulnerabilities in Rust, Go, JavaScript, Typescript, PHP, Python, Dart, C#, F#, Elixir, Gradle (Java/Kotlin), and Terraform projects.
- Container Tools↗
ms-azuretools.vscode-containers — Makes it easy to create, manage, and debug containerized applications.
- Python↗
ms-python.python — Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.
- Ruff↗
charliermarsh.ruff — A Visual Studio Code extension with support for the Ruff linter and formatter for Python.