필사 모드: Essential VS Code Extensions 2026 — GitLens / Error Lens / Pretty TypeScript Errors / Tailwind / Prisma / Biome Deep Dive
English> "An editor is the skeleton; extensions are the muscle. Without muscle, the skeleton just sits in a chair." — a senior front-end engineer
This post is a **map of the VS Code extension market as of May 2026**. Between 2024 and 2025 the center of gravity shifted dramatically as AI extensions went mainstream. GitHub Copilot became the default, free options like Codeium/Cody/Tabnine lined up beside it, and Continue and Cline anchored the BYOK (Bring Your Own Key) camp. Meanwhile, in the non-AI side of the marketplace, GitLens (GitKraken) cemented itself as the de facto standard Git UI, and the UX consensus that "errors should be inline" became real thanks to Error Lens and Pretty TypeScript Errors.
The post sorts extensions into Git tools (GitLens, GitHub Pull Requests), UI upgrades (Path Intellisense, Error Lens, Pretty TypeScript Errors, Indent Rainbow, vscode-icons, Material Icon Theme), language and framework tooling (Tailwind CSS IntelliSense, Prisma, ESLint, Prettier, Biome, Even Better TOML, Dependi), AI assistants (Tabnine, Codeium, Cody, GitHub Copilot, Continue, Cline), and workflow helpers (REST Client, ThunderClient, ShellCheck, EditorConfig, Polacode, Quokka.js, Code Tour, Project Manager, Live Server, Markdown All in One, Vim/Neovim modes). It closes by walking through Toss/Kakao recommendations in Korea, Mercari/ZOZO recommendations in Japan, and a decision guide that answers "what should you install" by role.
1. The 2026 VS Code extension map — four categories
To make sense of the 2026 marketplace you need a taxonomy. There are over 60,000 extensions and "install everything" is not an answer. Extensions cost memory, CPU on the extension host process, and startup time.
- **Git tooling**: GitLens (GitKraken), GitHub Pull Requests, Git Graph, Git History
- **Error / UI improvements**: Error Lens, Pretty TypeScript Errors, Path Intellisense, Indent Rainbow, vscode-icons, Material Icon Theme
- **Language / framework**: Tailwind CSS IntelliSense, Prisma, ESLint, Prettier, Biome, Even Better TOML, Dependi
- **AI assistants**: GitHub Copilot, Codeium, Tabnine, Cody, Continue, Cline
- **Workflow tools**: REST Client, ThunderClient, ShellCheck, EditorConfig, Polacode, Quokka.js, Code Tour, Project Manager, Live Server, Markdown All in One
- **Editor modes**: Vim, Neovim, VSCodeVim
The categories matter because their responsibility boundaries differ. Git tools answer "why is this code the way it is?". UI improvements clarify "what should I see right now?". Language tools handle "help me type". AI assistants take on "write the code for me". Workflow tools answer "keep me from leaving the editor".
The most common mistake is **installing overlapping extensions in the same category**. Typical 2026 conflicts include ESLint + Prettier + Biome all enabled at once (Biome shines as a standalone), vscode-icons + Material Icon Theme both activated (only one can own the icon-theme contribution), and GitHub Copilot + Codeium + Tabnine all firing autocomplete (their triggers collide so suggestions disappear). **One per category** is the 2026 best practice.
The other macro trend is **AI extensions absorbing non-AI extensions**. Tabnine started as simple autocomplete and now ships AI Chat and Code Review. Codeium started free and built its own IDE, Windsurf. GitHub Copilot added Workspace and Agent Mode and became a small-scale agent. As a result, your single AI extension takes up an outsized share of your daily workflow.
2. GitLens — the standard for Git history
GitLens was created in 2016 by Eric Amodio and acquired by GitKraken in 2022. As of 2026 it has surpassed 35 million downloads on the Marketplace, and it is the de facto Git extension. VS Code's built-in Git UI is intentionally minimal, so GitLens has become the "if you take Git seriously, install this" extension.
Key features:
- **Inline blame**: shows the last-commit info for the current line at the end of the line in muted gray
- **Hover details**: hovering reveals commit message, author, and a diff preview
- **File / line history**: full change history of a file or a single line on one screen
- **Compare view**: arbitrary branches/commits/stashes side by side
- **Repositories view**: every repo in the workspace as a tree of branches/remotes/tags/stashes
- **Worktree management**: create/switch/delete worktrees from the UI
- **Commit Graph**: a dedicated commit graph tab; once Pro, free since 2024
- **Visual File History (Pro)**: a file's evolution visualized on a time axis
// .vscode/settings.json — lighter GitLens setup
{
"gitlens.codeLens.enabled": false,
"gitlens.currentLine.enabled": true,
"gitlens.hovers.currentLine.over": "line",
"gitlens.statusBar.enabled": true,
"gitlens.blame.format": "${author|agoOrDate}",
"gitlens.views.repositories.files.layout": "tree"
}
Strengths:
- **Visual blame lets you trace responsibility in 30 seconds**: "why is this line like this?" gets an answer fast
- **Worktree management** through a GUI — almost no other tool offers this, and it became more relevant in 2025 once Claude Code/Cursor pushed worktree-based workflows
- **Core stays free after the GitKraken acquisition**. Pro covers extras like Visual File History and Workspace
Weaknesses:
- **Default settings are noisy**: the CodeLens lines above functions overwhelm beginners — turn `codeLens.enabled: false`
- **Heavy on low-spec machines**: very large repos (>100k commits) take a while to index
- **Pro features have grown**: post-acquisition some features moved to paid, although core features (blame, hover, history) stay free
**Who should install it**: every developer who uses Git daily. Alternatives include Git Graph (lighter), Git History (focused on file/line history), and GitLens. GitLens is the most comprehensive of the three.
3. Path Intellisense / Error Lens / Pretty TypeScript Errors — the UI-upgrade trio
These three extensions raise the bar for VS Code's default UI. As of 2026 they are also the first bundle a newcomer installs.
Path Intellisense (Christian Kohler)
Autocompletes paths inside `import` or `require` statements. VS Code's built-in completion exists, but Path Intellisense is faster and more accurate, especially with monorepo aliases like the `@workspace/...` form.
{
"path-intellisense.mappings": {
"@app": "${workspaceFolder}/src/app",
"@components": "${workspaceFolder}/src/components"
},
"path-intellisense.showHiddenFiles": false,
"path-intellisense.extensionOnImport": true
}
Over 10 million downloads. In 2026 it is part of the day-one install for most workflows.
Error Lens (Alexander)
Alexander's Error Lens inlines diagnostics (error/warning/info) at the end of the line. Default VS Code requires hovering to see a diagnostic; Error Lens pins it to the screen.
{
"errorLens.enabled": true,
"errorLens.fontSize": "12px",
"errorLens.messageBackgroundMode": "none",
"errorLens.gutterIconsEnabled": true,
"errorLens.followCursor": "allLines",
"errorLens.excludeBySource": [
"cSpell"
]
}
It is a polarizing extension. "Too noisy" is the common complaint; "I can never go back" is the common counter. A middle path is `followCursor: "activeLine"` so only the active line is annotated. Over 7 million downloads.
Pretty TypeScript Errors (yoavbls)
TypeScript error messages are notoriously long, nested, and unclear about where to start reading. Pretty TypeScript Errors restructures them. Type comparisons, missing properties, and signature mismatches all appear with colors and indentation.
// Default TS error — one long line
// Type 'NewUser' is not assignable to type 'User'. ... missing the following properties from type 'User': id, createdAt
// What Pretty TypeScript Errors shows
// type mismatch: NewUser vs User
// Missing properties:
// - id: number
// - createdAt: Date
Especially essential if you bump into generic type errors in React/Next.js/tRPC daily. Over 5 million downloads.
The three share a common pattern: they **present existing information more clearly**. They do not introduce new functionality; they re-lay-out diagnostics, types, and paths in a more readable way. As such you can add them to nearly any workflow without harm.
4. vscode-icons vs Material Icon Theme — the icon war
Two extensions for the sidebar file icons. Only one can be active (they share the same contribution point). In 2026 they are essentially neck-and-neck.
vscode-icons (icons-for-visual-studio-code team)
- **Over 18 million downloads** as of May 2026
- Broader file-type icon coverage
- Flat, simple folder icons
- Deep pool of framework-specific icons (React, Vue, Angular)
- Saturated, vivid color palette
Material Icon Theme (Philipp Kief)
- **Over 25 million downloads** as of May 2026
- Aligned with Material Design guidelines
- Dimensional, filled folder icons
- Fast to support new frameworks (Next.js App Router, Astro, Bun)
- Muted palette that pairs well with dark themes
{
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.activeIconPack": "nest",
"material-icon-theme.hidesExplorerArrows": true
}
Pick which one based on:
- **Dark theme + Next.js/Astro/Bun**: Material Icon Theme blends in
- **Light theme + a mix of languages**: vscode-icons feels more intuitive
- **Monorepo with deep folder trees**: Material Icon Theme's folder depth helps
- **Taste**: Both are good; try each for a week and pick
2026 trend: Material Icon Theme is slightly ahead. That said, plenty of users find Material's folder depth too strong and prefer vscode-icons' simplicity.
5. Indent Rainbow — the original visual aid
oderwat's Indent Rainbow colors indentation levels. It is especially helpful in languages where indentation is syntax (like Python). As of 2025 VS Code's built-in bracket pair colorization covers part of the same ground, so it is no longer mandatory, but it is still popular with Python/YAML developers.
{
"indentRainbow.colors": [
"rgba(255,255,64,0.07)",
"rgba(127,255,127,0.07)",
"rgba(255,127,255,0.07)",
"rgba(79,236,236,0.07)"
],
"indentRainbow.ignoreLinePatterns": [
"/[ \t]* [*]/g"
],
"indentRainbow.tabmixColor": "rgba(255,127,127,0.3)"
}
Strengths:
- Instant indent-level recognition in **Python/YAML/Kubernetes manifests**
- Lower the alpha to keep it subtle
- Detects tab/space mixing via tabmixColor
Weaknesses:
- Easy to make the screen noisy — keep alpha around 0.05-0.1
- Can visually clash with VS Code's bracket pair colorization
Alternatives include Bracket Pair Color DLW (deprecated, replaced by built-in) and Rainbow CSV (for CSV). 2026 recommendation: **install if you live in Python or Kubernetes; otherwise skip**.
6. Dependi (formerly Crates) — inline Rust dependencies
An extension that displays the latest version of a crate inline in Cargo.toml. Originally called "crates", it was rebranded to "Dependi" in 2023 when the maintainer changed; it now supports more than just Rust, including npm (package.json), PHP (composer.json), Python (pyproject.toml/requirements.txt), and Go (go.mod).
Cargo.toml — Dependi shows the latest version inline
[dependencies]
serde = "1.0.197" # latest: 1.0.219
tokio = "1.36.0" # latest: 1.41.0
clap = "4.5.4" # latest: 4.5.21
{
"dependi.npm.indexServerURL": "https://registry.npmjs.org",
"dependi.rust.indexServerURL": "https://crates.io",
"dependi.vulnerability.ghsa.enabled": true,
"dependi.vulnerability.osv.enabled": true
}
Strengths:
- **Faster version-bump decisions** — you can see and edit in Cargo.toml directly
- **Vulnerability indicators**: pulls from GHSA/OSV databases and highlights CVE-bearing versions in red (added in 2024)
- **Multi-language**: Rust plus npm/Python/Go
Weaknesses:
- Private registries require extra config
- Indexing every file in a large monorepo can be slow
Rust developers should install it without question. Node developers benefit too, though Renovate/Dependabot automation may overlap.
7. Vim / Neovim modes — without the mouse
Two options for Vim keybindings in VS Code.
VSCodeVim (vscodevim)
- **Over 70 million downloads**, the de facto standard
- Emulates Vim modes in pure JavaScript
- Supports Visual/Normal/Insert/Command modes, ex commands, macros, leader-key mappings, and so on
- Partial `.vimrc` compatibility
{
"vim.useSystemClipboard": true,
"vim.useCtrlKeys": true,
"vim.hlsearch": true,
"vim.leader": "<space>",
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["<leader>", "w"],
"commands": ["workbench.action.files.save"]
},
{
"before": ["<leader>", "f"],
"commands": ["workbench.action.quickOpen"]
}
],
"vim.handleKeys": {
"<C-d>": true,
"<C-f>": false
}
}
Limitation: cannot run real Neovim Lua plugins. Complex macros or UI plugins are off the table.
vscode-neovim (asvetliakov)
- **Over 2 million downloads**
- Runs an actual Neovim binary as the backend so you reuse init.lua/init.vim
- Far better compatibility than VSCodeVim (except for some UI plugins like Telescope)
- Slightly more setup (requires Neovim 0.10+)
{
"vscode-neovim.neovimExecutablePaths.darwin": "/opt/homebrew/bin/nvim",
"vscode-neovim.neovimInitVimPaths.darwin": "~/.config/nvim/init.lua",
"vscode-neovim.useWSL": false
}
Pick by:
- **Just want Vim keybindings**: VSCodeVim
- **Already maintain a Neovim init.lua**: vscode-neovim
- **Company forbids external binaries**: VSCodeVim is your only option
In 2026 most new Vim users start with VSCodeVim, while existing Neovim users adopt vscode-neovim when they need to step into VS Code occasionally.
8. AI extensions — Tabnine / Codeium / Cody / Copilot / Continue / Cline
In 2026 the AI extension space has settled into six major players, each with a distinct position.
GitHub Copilot (GitHub / Microsoft)
- The default. 10 USD/month for individuals, plus a free tier added in December 2024
- Three interfaces: **Chat / Workspace / Agent Mode**
- Models: GPT-4o, Claude Sonnet 3.5/3.7, Gemini, and others selectable (Pro+ and above)
- Strengths: Microsoft infrastructure integration, MFA/SSO, enterprise governance
- Weaknesses: smaller context window than Cursor/Continue
Codeium (Codeium Inc., now Windsurf)
- **Free for personal use**
- Autocomplete for 70+ languages
- Added Cascade Chat (long-context) in 2024, released its own IDE "Windsurf" in 2025 to compete with Cursor directly
- Strengths: free, fast autocomplete latency, reasonable enterprise tiers
- Weaknesses: weaker codebase indexing than Copilot
Tabnine (Tabnine Ltd.)
- Oldest AI autocomplete (since 2018)
- **Local model option**: workflow where personal data never leaves the device
- Added Tabnine Chat in 2024 and Tabnine Code Review in 2025
- Strengths: safe choice for security-sensitive environments (finance, healthcare, defense)
- Weaknesses: weaker autocomplete quality compared to Copilot/Codeium
Cody (Sourcegraph)
- Backed by Sourcegraph's code-search infrastructure
- **Strongest codebase context**: pulls in the entire monorepo as context
- 2024: Agentic Context (auto-discovers relevant files)
- Strengths: high accuracy on large codebases
- Weaknesses: requires a Sourcegraph setup first
Continue (Continue Dev)
- **OSS, BYOK (Bring Your Own Key)**
- Connects OpenAI/Anthropic/Ollama/local models
- 2025: .continue/config.yaml supports team-wide rules
- Strengths: direct control over model cost, fits companies running their own LLM gateway
- Weaknesses: setup complexity, UX rougher than Copilot
Cline (formerly Claude Dev)
- **OSS, agent-focused**: optimized for "do this task for me", not single-line completion
- Mostly uses Anthropic Claude but supports many models via OpenRouter
- 2025: Plan/Act mode separation, MCP server integration
- Strengths: a real delegation-capable agent
- Weaknesses: high token cost (by nature of an agent)
// keep only one enabled at a time for your sanity
{
"github.copilot.enable": {
"*": true,
"plaintext": false,
"markdown": true
},
"github.copilot.editor.enableAutoCompletions": true,
"continue.enableTabAutocomplete": false,
"codeium.enableConfig": {
"*": false
}
}
Decision guide:
- **Default pick**: GitHub Copilot. Even better if the company pays
- **Free first**: Codeium or Continue + a free model
- **Security-sensitive**: Tabnine (local model option)
- **Large monorepos**: Cody
- **Agentic tasks needed**: Cline
- **Already running an internal LLM gateway**: Continue
**Important**: enabling more than one autocomplete extension causes trigger collisions and suggestions vanish from both. Activate exactly one.
9. Tailwind CSS IntelliSense / Prisma — framework friends
Two of the best official extensions made by framework teams.
Tailwind CSS IntelliSense (Tailwind Labs)
The official extension from the Tailwind team (Adam Wathan included). If you use Tailwind, install it without thinking.
- Class autocomplete (based on the current config)
- CSS preview on hover
- Color swatch beside color classes
- Warnings for unsorted class names
- Custom-class support (apply, theme function)
- Tailwind v4 alpha support from 2024; v4 stable from 2025
{
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
],
"tailwindCSS.includeLanguages": {
"typescript": "javascript",
"typescriptreact": "javascript"
},
"editor.quickSuggestions": {
"strings": "on"
}
}
The regex configuration above is required to get autocomplete inside helpers like `cva`/`cx`/`clsx`/`twMerge`.
Prisma (Prisma)
The official Prisma extension. It supplies syntax highlighting, autocomplete, formatting, and jump-to-definition for relations in schema.prisma.
{
"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma",
"editor.formatOnSave": true
},
"prisma.fileWatcher": true
}
The autocomplete for relations between `model` blocks and the option completion for `@@index`/`@relation` are particularly strong. If you use Prisma, install it without thinking.
Other framework-aware extensions worth knowing:
- **Vue / Volar** (Vue Tooling): Vue's official extension, essential for Vue 3 + TypeScript
- **Svelte** (Svelte team): Svelte's official extension
- **Astro** (Astro team): Astro's official extension
- **Solid** (community): Solid.js
- **Angular Language Service** (Angular team): Angular's official extension
Common pattern: framework-team official extensions almost always outperform third-party alternatives.
10. ESLint / Prettier / Biome — linter + formatter
The noisiest space in the 2026 JS/TS ecosystem. The three tools sit in different positions now.
ESLint (ESLint team)
- **The JavaScript standard linter**
- 2024: v9 migrated to flat config (eslint.config.js)
- Extension is `dbaeumer.vscode-eslint`
- Strengths: overwhelming plugin ecosystem (@typescript-eslint, eslint-plugin-react, eslint-plugin-import, etc.)
- Weaknesses: slow, complex setup
Prettier (Prettier team)
- **JS/TS/HTML/CSS/JSON/Markdown formatter**
- Extension is `esbenp.prettier-vscode`
- Strengths: "no-choice" philosophy that became the standard
- Weaknesses: fewer options than Biome, weak plugin system
Biome (Biome team, formerly Rome)
- **Unified tool written in Rust** (linter + formatter)
- 2024: v1 stable. 2025: v2 with TypeScript type-aware rules
- Extension is `biomejs.biome`
- Strengths: fast (Rust), one tool, minimal configuration
- Weaknesses: plugin ecosystem is thin compared to ESLint, some ESLint rules unsupported
// .vscode/settings.json — ESLint + Prettier combo
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.experimental.useFlatConfig": true,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
// .vscode/settings.json — Biome standalone (replaces ESLint + Prettier)
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
}
}
2026 selection guide:
- **New projects, simplicity first**: Biome standalone
- **Project with many existing ESLint rules**: ESLint + Prettier
- **Monorepo + fast CI required**: Biome (Rust speed)
- **React Native, Expo, other special environments**: ESLint + Prettier (plugin dependency)
**Important**: installing ESLint + Prettier + Biome at the same time causes formatter conflicts where the code flips on every save. Activate exactly one in each category.
11. Even Better TOML / Markdown All in One — markup
Even Better TOML (tamasfe)
An extension for TOML files (Cargo.toml, pyproject.toml, netlify.toml, etc.). Provides syntax highlighting, autocomplete, validation, and formatting.
{
"[toml]": {
"editor.defaultFormatter": "tamasfe.even-better-toml",
"editor.formatOnSave": true
},
"evenBetterToml.schema.associations": {
"Cargo\\.toml": "https://json.schemastore.org/cargo.json",
"pyproject\\.toml": "https://json.schemastore.org/pyproject.json"
}
}
- **JSON Schema integration**: a typo in a Cargo.toml key gets a red squiggle
- **Tombi** as a separate LSP backend (since 2024)
- **Format stability**: comments preserved, rich sort options
Essential for Rust/Python developers. Over 8 million downloads.
Markdown All in One (Yu Zhang)
An extension that bundles nearly everything you need to edit Markdown.
- Keyboard shortcuts (Ctrl+B bold, Ctrl+I italic)
- Auto TOC generation/update
- Auto list numbering
- Table formatting
- Math preview (KaTeX)
- Preview-and-editor sync
{
"markdown.extension.toc.levels": "2..6",
"markdown.extension.toc.updateOnSave": true,
"markdown.extension.preview.autoShowPreviewToSide": false,
"markdown.extension.list.indentationSize": "adaptive",
"markdown.extension.tableFormatter.normalizeIndentation": true
}
Useful for MDX bloggers, README maintainers, and technical writers. Over 13 million downloads.
Alternatives:
- **Markdown Preview Enhanced**: richer preview (mermaid, plantuml, presentation mode)
- **markdownlint**: linting only
12. Live Server (Ritwick Dey) — HTML preview
Ritwick Dey's Live Server boots static HTML on a local server and auto-reloads on file change. With over 40 million downloads it is one of the most-installed extensions in the entire Marketplace.
{
"liveServer.settings.port": 5500,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.CustomBrowser": "chrome"
}
Strengths:
- **One click to a local server**: right-click on index.html and pick "Open with Live Server"
- **Auto-reload** on HTML/CSS/JS changes
- **Mobile testing**: reachable on the LAN by IP
Weaknesses:
- **Maintenance has stalled**: no major updates since 2022
- **ES module imports** require extra configuration
- **No HTTPS** (the community fork Five Server supports it)
Alternatives:
- **Five Server**: a Live Server fork with HTTPS/HTTP2
- **Live Preview** (Microsoft official): built-in preview, no external browser
- **Vite/Next.js framework dev servers**: framework projects do not really need Live Server
2026 recommendation: **install while learning pure HTML/CSS; rely on dev servers for framework projects**.
13. REST Client / ThunderClient — API testing
Replacements for Postman/Insomnia inside VS Code.
REST Client (Huachao Mao)
You write HTTP requests as plain text in `.http` or `.rest` files and execute them.
GET user info
GET https://api.example.com/users/1
Authorization: Bearer {{token}}
Accept: application/json
POST a new user
POST https://api.example.com/users
Content-Type: application/json
{
"name": "Alice",
"email": "alice@example.com"
}
env-specific variables
@baseUrl = https://api.example.com
@token = abc123
Strengths:
- **Plain text file**: commit it to Git and share with the team
- **Postman collection import**
- **Variables / environments**: stored in settings.json
- **Save responses**: refer to previous responses in subsequent requests
Over 8 million downloads. Ideal when API tests live in Git alongside code.
ThunderClient (Ranga Vadhineni)
A GUI-based API client that mimics Postman inside VS Code.
Strengths:
- **Intuitive UI**: familiar to Postman users
- **Collections / environments**: folder-tree structure
- **Test scripts**: JS-based response checks
Weaknesses:
- **Substantially monetized since 2023**: 5-collection cap, paid team sync
- **Open-source posture has eroded**: previously OSS, gradually closed
2026 selection guide:
- **Plain text + Git sharing**: REST Client
- **GUI preference, Postman migration**: ThunderClient (mind the monetization)
- **Team-wide API catalog**: both fall short; consider Bruno/Hoppscotch
14. ShellCheck / EditorConfig — style guards
ShellCheck (Timon Wong)
A static analyzer for bash/sh scripts. ShellCheck itself is an OSS tool; the VS Code extension surfaces its findings.
#!/bin/bash
typical ShellCheck catches
SC2086: missing quotes (risk of word splitting)
files=$1
ls $files # warning
SC2046: using $() result unquoted
files=$(ls *.txt)
echo $files # warning
correct usage
ls "$files"
echo "$files"
{
"shellcheck.enable": true,
"shellcheck.run": "onSave",
"shellcheck.exclude": ["SC2086"],
"shellcheck.customArgs": ["-x"]
}
Strengths:
- Catches almost every classic bash pitfall: quoting, expansion, exit-code handling
- Plugs into CI so local and CI use the same rules
Weaknesses:
- Requires the ShellCheck binary (brew install shellcheck)
- Partial support for non-POSIX shells (zsh/fish are limited)
Essential for DevOps/SRE roles. Over 2 million downloads.
EditorConfig (EditorConfig team)
Reads an `.editorconfig` file to standardize indentation, line endings, and encoding across editors. Nearly every IDE/editor honors it, so it is essential in mixed-IDE teams.
.editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{md,mdx}]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
Strengths:
- **Editor parity**: VS Code/IntelliJ/Vim/Sublime all support it
- **Per-language rules**: Markdown keeps trailing whitespace, Makefile uses tabs
- **Tiny config**: one file, written once
Weaknesses:
- Overlaps with Prettier/Biome in places — set a priority
2026 recommendation: **add `.editorconfig` to every new project**. The extension is free and harmless.
15. Polacode / Quokka.js / Code Tour — demos, scratchpad, tours
These three are the "uncommon but uniquely right for a situation" tools.
Polacode (P. Cong)
Captures code blocks as pretty images. Great for Twitter/blogs/talks.
- Save selection as PNG
- Customize background gradient/padding/shadow
- Mirrors your current VS Code theme/font
Alternatives: Carbon (carbon.now.sh), Ray.so, CodeSnap (VS Code extension). Carbon is more popular in 2026, but Polacode keeps you inside the editor.
Quokka.js (Wallaby.js)
A JavaScript/TypeScript scratchpad. As you write code, per-line results appear inline.
// Quokka shows the evaluated result inline
const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((a, b) => a + b, 0) // 15
const avg = sum / arr.length // 3
const fetched = await fetch('https://api.example.com/data').then(r => r.json())
console.log(fetched) // { id: 1, ... }
- Separate Community (free) and Pro tiers
- Pro adds auto-import, richer output, JSX preview, etc.
- Useful for algorithm practice, debugging, and exploring API responses
Alternatives: Node REPL, the browser console, replit, Observable. Quokka's edge is "instantly inside the editor".
Code Tour (Microsoft)
Builds guided tours through a codebase. Like a slide deck, it says "look at this file at this line, then this function" step by step.
// .tours/onboarding.tour
{
"title": "new-hire onboarding",
"steps": [
{
"file": "src/app.ts",
"line": 1,
"description": "App entry point. Loads dotenv then delegates to server.ts."
},
{
"file": "src/server.ts",
"line": 24,
"description": "Express middleware registration. CORS/auth/error order matters."
}
]
}
- **Onboarding automation**: new hires explore the codebase at their own pace
- **PR storytelling**: bundle the changes in a large PR into a tour
- **OSS tutorials**: a "start here" guide for external contributors
Over 1 million downloads. Used infrequently, but writing one tour pays off for 6-12 months.
16. Project Manager / GitHub Pull Requests — workflow
Project Manager (Alessandro Fragnani)
An extension for rapid project switching. More capable than VS Code's built-in "Recent Workspaces".
- **Saved favorite projects**: grouped by tag/color
- **Auto Git-repo discovery**: scans any folder for git repos
- **VSCode Remote support**: works with SSH/WSL/Containers
{
"projectManager.git.baseFolders": [
"~/dev",
"~/work"
],
"projectManager.git.maxDepthRecursion": 3,
"projectManager.sortList": "Recent",
"projectManager.openInNewWindowWhenClickingInStatusBar": true
}
Shows the current project name in the status bar; clicking it opens the project list. Essential when juggling several clients or side projects.
Alternatives: Workspace Explorer, Peacock (auto-color per project). Project Manager is the most complete.
GitHub Pull Requests (GitHub)
The GitHub-official extension. Create and review PRs inside VS Code.
- **Open / check out / review / merge PRs** inside the editor
- **Inline comments**: reproduces github.com's review UI in the editor
- **Copilot for Pull Requests integration** (Pro+)
- **Codespaces integration**: open a PR in a Codespace
{
"githubPullRequests.pullBranch": "always",
"githubPullRequests.defaultMergeMethod": "squash",
"githubPullRequests.notifications": "pullRequests"
}
Strengths: useful for almost any GitHub-based team. Paired with the CLI (`gh`), keyboard and GUI are both fast.
Weaknesses: no GitLab/Bitbucket support (separate extensions needed).
Alternatives: GitLens' PR integration (partial), GitHub CLI (for terminal lovers).
17. Korea / Japan — Toss, Kakao, Mercari, ZOZO
Company-by-company extension recommendations, drawn from each company's tech blog and public talks.
Toss (Viva Republica)
Bundle published by Toss's front-end chapter (based on Toss SLASH conference materials from 2024-2025):
- ESLint + Prettier (Biome experiments in some new projects)
- GitLens
- Tailwind CSS IntelliSense (tied to the tds design system)
- Error Lens, Pretty TypeScript Errors
- GitHub Copilot (company-wide rollout)
- Code Spell Checker (English typo detection)
- Internal extension: TDS Component Snippet (auto-complete for design-system components)
Toss standardized tooling at the "Frontend Fundamental Chapter" level. New hires install the same extension bundle on day one.
Kakao
Different chapters at Kakao recommend different extensions (per Kakao Tech Blog):
- Common: GitLens, Error Lens, ESLint, Prettier
- BE (Java/Spring): Spring Boot Tools, Lombok, Maven for Java
- FE: Tailwind CSS IntelliSense, Vue Volar, Pretty TypeScript Errors
- DevOps: ShellCheck, Kubernetes, Even Better TOML, HashiCorp Terraform
- AI: KakaoTalk Channel's internal AI tooling plus GitHub Copilot (optional)
Kakao operates an internal LLM gateway, so some teams pair Continue with their internal models.
Mercari
Per Mercari's microservices team's public dotfiles:
- GitLens
- Error Lens
- ESLint + Prettier
- Even Better TOML (some Rust usage)
- ShellCheck
- Go (Google's official extension)
- Protobuf (gRPC usage)
- GitHub Copilot (company-wide adoption announced in 2024)
- Mercari-internal extensions: microservices catalog integration with Backstage
Operating 100+ microservices, Mercari has heavy Project Manager usage.
ZOZO (ZOZOTOWN)
Recommended set from ZOZO TECH BLOG (2024-2025):
- GitLens
- ESLint + Prettier
- Tailwind CSS IntelliSense
- Pretty TypeScript Errors
- vscode-icons (company standard)
- Material Icon Theme also a free choice
- GitHub Copilot
ZOZO maintains an internal extension for "ZOZO Design System" with Material component autocomplete.
Common patterns:
- **GitLens is essentially the default across both countries**
- **GitHub Copilot was rolled out company-wide at major IT firms around 2024** (after passing security reviews)
- **Language/framework extensions are picked per team**
- **Companies with a design system tend to ship an internal extension** for it
18. Who should pick what — newcomers / TS / Rust / full-stack
The final decision guide. "Install everything" is not an answer. Match the bundle to the role.
Newcomer (still learning)
Minimal bundle. Keep the screen quiet.
- **GitLens**: the fastest way to learn Git visually
- **Path Intellisense**: fewer import mistakes
- **Error Lens**: do not miss errors (set followCursor: activeLine to stay quiet)
- **Material Icon Theme**: quick file-type recognition
- **GitHub Copilot free tier** or **Codeium**: get used to AI autocomplete
- **EditorConfig**: applies automatically when joining team projects
- **Live Server**: for plain HTML/CSS learning
Seven total. Add more as you grow.
TypeScript full-stack (Next.js / tRPC / Prisma)
The role that fights type errors daily. UI-upgrade extensions are core.
- The newcomer bundle plus
- **Pretty TypeScript Errors**: indispensable for decoding generic errors
- **Tailwind CSS IntelliSense**: Next.js + Tailwind is the default stack
- **Prisma**: schema.prisma editing
- **ESLint + Prettier** or **Biome**
- **GitHub Copilot Pro**: model choice, Workspace usage
- **REST Client** or **ThunderClient**: API testing
- **GitHub Pull Requests**: PR workflow
Around fourteen total. Adding Continue or Cline boosts capability but watch for Copilot conflicts.
Rust developer
- The newcomer bundle plus
- **rust-analyzer** (Rust official, the IDE in itself)
- **Dependi**: Cargo.toml version management
- **Even Better TOML**: Cargo.toml editing
- **CodeLLDB**: Rust debugger
- **crates.io** (optional)
- Prefer Even Better TOML over Better TOML
- **ShellCheck**: when build scripts are bash
- **GitHub Copilot** or **Codeium**: Rust support is strong
About twelve total. rust-analyzer carries most of the weight.
DevOps / SRE
- The newcomer bundle plus
- **ShellCheck**: required for bash scripts
- **HashiCorp Terraform**: HCL editing
- **Kubernetes** (Microsoft): YAML validation, kubectl integration
- **Docker** (Microsoft): Dockerfile/compose editing
- **Even Better TOML**
- **Remote-SSH / Remote-Containers / Dev Containers**: remote work
- **YAML** (Red Hat): JSON Schema validation
- **GitHub Pull Requests**
AI extensions are optional. DevOps work is more about "how this behaves in this environment" than line-level commands, so AI autocomplete provides less value.
Data engineer / ML
- The newcomer bundle plus
- **Python** (Microsoft): official
- **Pylance** (Microsoft): fast IntelliSense
- **Ruff** (Astral): fast linter + formatter
- **Jupyter** (Microsoft): notebook editing
- **Data Wrangler** (Microsoft): visual pandas DataFrame editing (released 2024)
- **GitHub Copilot** or **Codeium**: strong pandas/sklearn autocomplete
- **Even Better TOML**: pyproject.toml
Around eleven total. Python development is essentially defined by the Microsoft-official trio (Python + Pylance + Jupyter).
Common picks for all roles
- **EditorConfig**: always install
- **GitLens**: always install
- **GitHub Pull Requests**: install whenever you use GitHub
- **Project Manager**: install once you juggle three or more projects
- **Markdown All in One**: install if you write README files or docs
VS Code extension selection is a workflow problem, not a tooling problem. The 2026 difference is that AI extensions became the default, and at the same time unified tools like Biome started a "install one instead of many" current. Pick one per category, spend 30 minutes tuning defaults, and clean house every six months — extensions become allies. Skip that cleanup and they slowly eat memory and slow your startup. **Remember: extensions are easy to add and hard to remove**.
References
- VS Code Marketplace — https://marketplace.visualstudio.com/vscode
- GitLens (GitKraken) — https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
- GitLens (official) — https://www.gitkraken.com/gitlens
- Path Intellisense — https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
- Error Lens — https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
- Pretty TypeScript Errors — https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
- vscode-icons — https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
- Material Icon Theme — https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
- Indent Rainbow — https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
- Dependi — https://marketplace.visualstudio.com/items?itemName=fill-labs.dependi
- VSCodeVim — https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
- vscode-neovim — https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim
- GitHub Copilot — https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
- Codeium — https://marketplace.visualstudio.com/items?itemName=Codeium.codeium
- Tabnine — https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode
- Cody (Sourcegraph) — https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai
- Continue — https://marketplace.visualstudio.com/items?itemName=Continue.continue
- Cline — https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev
- Tailwind CSS IntelliSense — https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
- Prisma — https://marketplace.visualstudio.com/items?itemName=Prisma.prisma
- ESLint — https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- Prettier — https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Biome — https://marketplace.visualstudio.com/items?itemName=biomejs.biome
- Even Better TOML — https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml
- Markdown All in One — https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
- Live Server (Ritwick Dey) — https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- REST Client — https://marketplace.visualstudio.com/items?itemName=humao.rest-client
- Thunder Client — https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client
- ShellCheck — https://marketplace.visualstudio.com/items?itemName=timonwong.shellcheck
- EditorConfig — https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
- Polacode — https://marketplace.visualstudio.com/items?itemName=pnp.polacode
- Quokka.js — https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
- CodeTour — https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour
- Project Manager — https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
- GitHub Pull Requests — https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github
- Stack Overflow Developer Survey — https://survey.stackoverflow.co
- Toss SLASH Conference — https://toss.tech/slash
- Kakao Tech Blog — https://tech.kakao.com
- Mercari Engineering Blog — https://engineering.mercari.com/en/blog/
- ZOZO TECH BLOG — https://techblog.zozo.com
현재 단락 (1/638)
This post is a **map of the VS Code extension market as of May 2026**. Between 2024 and 2025 the cen...