Skip to content

Instantly share code, notes, and snippets.

@jerryperezperez
Created February 21, 2026 20:24
Show Gist options
  • Select an option

  • Save jerryperezperez/628365ff494f51b0f7a90143e5c8026b to your computer and use it in GitHub Desktop.

Select an option

Save jerryperezperez/628365ff494f51b0f7a90143e5c8026b to your computer and use it in GitHub Desktop.

🧩 Cross-Profile VS Code Extensions

A curated baseline of extensions that apply to every developer, regardless of role, stack, or framework.
These are the non-negotiables — tools you'd notice missing before you notice having them.


🔀 Version Control & Collaboration

1. GitLens

ID: eamodio.gitlens
Downloads: 30M+
Description:
Supercharges Git inside VS Code. Shows who changed a line, when, and why — inline, without leaving the editor. Adds a full history explorer, blame annotations, commit search, and visual file diff comparisons.

Why cross-profile:
Every developer using Git benefits from this. The inline blame alone eliminates half the context-switching to GitHub or terminal.

Tips:

  • Use GitLens: Show File History to trace how a file evolved over time
  • The Commits sidebar view is a full Git log replacement
  • Hover over any line to see the last commit message inline

2. Git Graph

ID: mhutchie.git-graph
Downloads: 8M+
Description:
Renders a visual, interactive graph of your Git branches and commits. Click any commit to inspect diffs, cherry-pick, rebase, or create branches — all from a clean visual interface.

Why cross-profile:
Complements GitLens perfectly. GitLens gives you line-level context; Git Graph gives you the big picture of your repo's history and branch structure.

Tips:

  • Right-click any commit for a full action menu (cherry-pick, revert, tag, etc.)
  • Use it to visualize merge conflicts before resolving them
  • Accessible via the Git Graph button in the Source Control panel

3. GitHub Pull Requests

ID: github.vscode-pull-request-github
Downloads: 10M+
Description:
Review and manage GitHub Pull Requests and Issues directly inside VS Code. Comment on code, approve PRs, and check out branches — without switching to the browser.

Why cross-profile:
If your team uses GitHub (and most do), this eliminates the constant tab-switching during code reviews.

Tips:

  • Use Checkout on a PR to test it locally in one click
  • Leave inline comments directly on diff views
  • Combine with GitLens for a complete in-editor GitHub workflow

✨ Quality & Formatting

4. Prettier

ID: esbenp.prettier-vscode
Downloads: 50M+
Description:
The most widely used code formatter. Automatically formats JS, TS, JSON, CSS, HTML, Markdown, YAML, and more on save. Opinionated by design — removes formatting debates from code reviews entirely.

Why cross-profile:
Touches almost every file type modern developers work with. Even if your primary language isn't JS, you'll have JSON configs, Markdown docs, or YAML files that benefit from auto-formatting.

Tips:

  • Set "editor.formatOnSave": true in settings for zero-friction formatting
  • Use a .prettierrc file to share formatting rules across the team
  • Pairs perfectly with EditorConfig for consistent cross-editor behavior

5. EditorConfig

ID: editorconfig.editorconfig
Downloads: 10M+
Description:
Reads .editorconfig files and automatically enforces consistent indentation, line endings, and encoding across all editors on your team — VS Code, IntelliJ, Vim, whatever everyone uses.

Why cross-profile:
Invisible when it works, painful when it's missing. Prevents the classic "why does this file have mixed tabs and spaces" problem in team projects.

Tips:

  • Commit your .editorconfig file to the repo so it applies to everyone automatically
  • Works silently in the background — no configuration needed after install
  • Combine with Prettier for a complete formatting baseline

6. Code Spell Checker

ID: streetsidesoftware.code-spell-checker
Downloads: 10M+
Description:
Catches spelling mistakes in variable names, comments, strings, and documentation. Understands camelCase, snake_case, and PascalCase natively — so getUserById is correctly parsed as three separate words.

Why cross-profile:
Typos in variable names and comments are embarrassing, hard to grep for later, and completely preventable. Works across all languages.

Tips:

  • Right-click a flagged word to add it to your user or workspace dictionary
  • Add a cspell.json to your project to share a custom dictionary with your team
  • Supports 30+ spoken languages for non-English codebases

🤖 AI Assistance

7. GitHub Copilot Chat

ID: github.copilot-chat
Downloads: 20M+
Description:
AI-powered coding assistant with inline completions, a conversational chat panel, and in-editor code generation. Explains code, writes tests, suggests fixes, and answers questions about your codebase.

Why cross-profile:
Role-agnostic by nature — equally useful for writing a SQL query, a React component, a Dockerfile, or a bash script. One of the highest-ROI extensions available regardless of stack.

Tips:

  • Use /explain in chat to understand unfamiliar code instantly
  • Use /tests to generate unit tests for any selected function
  • Use /fix on an error to get a suggested resolution with context
  • Inline chat (Ctrl+I) is faster than the panel for quick edits

🚀 Productivity & Navigation

8. Bookmarks

ID: alefragnani.bookmarks
Downloads: 5M+
Description:
Mark lines in any file and jump back to them instantly. Bookmarks persist across sessions and can be named. Includes a sidebar panel to see all bookmarks across your project.

Why cross-profile:
Invaluable when working across large codebases or revisiting specific lines repeatedly during debugging or review.

Tips:

  • Use Ctrl+Alt+K to toggle a bookmark on the current line
  • Name your bookmarks for better organization in the sidebar
  • Works across all file types — code, config, docs, everything

9. Todo Tree

ID: gruntfuss.vscode-todo-tree
Downloads: 5M+
Description:
Scans your entire workspace for TODO, FIXME, HACK, and other comment tags and aggregates them in a dedicated sidebar tree. Highlights them inline in the editor with configurable colors.

Why cross-profile:
Every developer leaves TODO comments. Without this, they get lost and forgotten. With it, they become a lightweight task tracker built into your code.

Tips:

  • Add custom tags like REVIEW or OPTIMIZE in settings
  • Filter the tree by tag type to focus on just FIXMEs or just TODOs
  • Use it during PR prep to make sure you haven't left stray debug comments

10. Path Intellisense

ID: christian-kohler.path-intellisense
Downloads: 10M+
Description:
Autocompletes file paths as you type them in import statements, src attributes, config files, and anywhere else a path appears. Traverses your actual file system in real time.

Why cross-profile:
File paths appear in every project regardless of stack — imports, configs, Dockerfiles, CI scripts, Makefiles. Eliminates a constant source of small friction.

Tips:

  • Works inside strings, not just import statements
  • Configure pathMappings for monorepos with path aliases
  • Combine with the native VS Code IntelliSense for complete import coverage

11. Project Manager

ID: alefragnani.project-manager
Downloads: 5M+
Description:
Save, organize, and switch between projects instantly. Supports Git repos, SVN, Mercurial, and manual folders. Includes a sidebar panel and keyboard shortcut for rapid project switching.

Why cross-profile:
Any developer working on more than one project at a time benefits immediately. Eliminates the File > Open Recent hunting routine.

Tips:

  • Use tags to group projects by client, stack, or status
  • Combine with Peacock to visually distinguish windows when multiple projects are open
  • Supports remote projects via SSH

12. Error Lens

ID: usernamehw.errorlens
Downloads: 10M+
Description:
Shows errors, warnings, and diagnostic messages inline on the affected line rather than requiring you to hover or check the Problems panel. Makes issues impossible to miss.

Why cross-profile:
Language agnostic — works with any linter, type checker, or language server. Once you've used it, coding without it feels like flying blind.

Tips:

  • Customize message length to keep long error messages from cluttering the line
  • Configure delay so messages don't flash while you're actively typing
  • Use color coding to visually separate errors from warnings at a glance

13. Peacock

ID: johnpapa.vscode-peacock
Downloads: 3M+
Description:
Colors each VS Code window with a unique accent color — title bar, activity bar, and status bar. When you have multiple projects open simultaneously, you instantly know which window you're in.

Why cross-profile:
Sounds trivial until you've accidentally edited the wrong project's file. Every developer with more than one project open will hit this problem eventually.

Tips:

  • Use Peacock: Enter a Color to assign meaningful colors (e.g., red for production configs, green for personal projects)
  • Colors are saved per workspace in .vscode/settings.json — commit them to share with the team
  • Combine with Project Manager for a complete multi-project workflow

14. Resource Monitor

ID: mutantdino.resourcemonitor
Downloads: 1M+
Description:
Displays CPU usage, RAM consumption, and battery level directly in the VS Code status bar. Updates in real time with configurable refresh intervals.

Why cross-profile:
Useful for anyone running heavy local processes — compilers, Docker containers, test suites, dev servers. Saves the alt-tab to Task Manager or Activity Monitor mid-session.

Tips:

  • Configure which metrics to show — CPU only, RAM only, or both
  • Set a short refresh interval (2–3 seconds) for accurate real-time feedback
  • Especially useful on laptops where RAM pressure affects VS Code performance

🌍 Environment & Config

15. DotENV

ID: mikestead.dotenv
Downloads: 8M+
Description:
Adds syntax highlighting for .env files — variable names, values, comments, and quoted strings all get distinct colors. Simple but makes environment config files significantly more readable.

Why cross-profile:
Almost every modern project has at least one .env file. Without this extension, they're plain text. With it, they're as readable as any other config format.

Tips:

  • Works with .env, .env.local, .env.production, and any .env.* variant
  • Pair with a secrets scanner (like GitGuardian) to avoid accidentally committing sensitive values
  • Zero configuration required — install and forget

16. YAML

ID: redhat.vscode-yaml
Downloads: 20M+
Description:
Full YAML language support — validation, autocompletion, hover documentation, and schema association. Integrates with JSON Schema to validate Kubernetes manifests, GitHub Actions, Docker Compose, and hundreds of other YAML formats automatically.

Why cross-profile:
It's nearly impossible to find a modern project without a .yml or .yaml file. GitHub Actions, Docker Compose, Kubernetes, CI configs, linter configs — YAML is everywhere.

Tips:

  • Associates schemas automatically for common formats (k8s, GitHub Actions, etc.)
  • Hover over any key to see its schema documentation inline
  • Flags structural errors before you push, saving failed pipeline runs

17. Even Better TOML

ID: tamasfe.even-better-toml
Downloads: 5M+
Description:
Complete TOML language support with syntax highlighting, validation, formatting, and schema-based autocompletion. Essential for Rust projects (Cargo.toml), Python projects (pyproject.toml), and any tool using TOML for configuration.

Why cross-profile:
TOML is becoming the default config format across ecosystems — Rust, Python, Hugo, and many modern tools default to it. Having support ready before you need it costs nothing.

Tips:

  • Automatically validates Cargo.toml against the Cargo schema
  • Supports pyproject.toml with Poetry and Ruff schema integration
  • Format on save works the same way as Prettier for TOML files

18. Makefile Tools

ID: ms-vscode.makefile-tools
Downloads: 2M+
Description:
Adds IntelliSense, navigation, and a launch configuration interface for Makefiles. Lets you run Make targets directly from VS Code without dropping to the terminal.

Why cross-profile:
Makefiles appear across virtually all stacks as a task runner — C/C++, Python, Go, DevOps scripts, and even frontend projects use them. Having syntax support and target runners is a low-cost quality-of-life improvement.

Tips:

  • Use the Makefile sidebar to browse and run targets without memorizing them
  • Integrates with the VS Code task runner for unified task management
  • Works alongside language-specific build tools, not instead of them

🐳 Containers & Remote

19. Docker

ID: ms-azuretools.vscode-docker
Downloads: 20M+
Description:
Full Docker integration — manage images, containers, volumes, and networks from a dedicated sidebar. Includes Dockerfile and Docker Compose IntelliSense, linting, and one-click container operations.

Why cross-profile:
Modern development almost always involves Docker at some point, even for frontend developers working in team environments. Having the tooling ready when you first encounter a Dockerfile removes a barrier at exactly the wrong moment.

Tips:

  • Right-click any container to open a shell, view logs, or inspect environment variables
  • IntelliSense in Dockerfiles suggests base images, instructions, and common patterns
  • Use the Compose tab to manage multi-service stacks visually

20. Remote Development Pack

ID: ms-vscode-remote.vscode-remote-extensionpack
Downloads: 20M+
Description:
A single pack that installs Remote - SSH, Remote - WSL, and Dev Containers together. Allows you to develop inside containers, on remote servers, or in WSL as if the code were local — full IntelliSense, debugging, and extension support included.

Why cross-profile:
Remote and containerized development environments are increasingly the standard across all roles. Having this installed means you're ready for any environment without reconfiguration.

Tips:

  • Use Dev Containers to define your entire dev environment as code in .devcontainer/
  • Remote - SSH turns any server into a full VS Code workspace
  • WSL integration is essential for Windows developers working with Linux toolchains

🔒 Security

21. SonarLint

ID: sonarsource.sonarlint-vscode
Downloads: 10M+
Description:
Detects bugs, code smells, and security vulnerabilities as you type — before you commit. Supports Java, JS, TS, Python, PHP, HTML, and more. Works like a spell checker but for code quality and security issues.

Why cross-profile:
Language agnostic and catches issues that linters miss — logic bugs, security hotspots, and maintainability problems. The earlier you catch these the cheaper they are to fix.

Tips:

  • Connect to a SonarQube or SonarCloud instance for team-wide rule synchronization
  • Use the "Why is this an issue?" explanation to learn best practices contextually
  • Configure rule severity to reduce noise on personal or early-stage projects

📡 API & Network

22. Thunder Client

ID: rangav.vscode-thunder-client
Downloads: 5M+
Description:
A lightweight REST API client built into VS Code. Send HTTP requests, inspect responses, organize collections, and write tests — without leaving the editor. A leaner alternative to Postman for everyday API testing.

Why cross-profile:
Every developer eventually needs to test an API endpoint. Having a client ready inside VS Code removes the friction of switching to a separate tool for what is often a quick one-off check.

Tips:

  • Use Collections to organize requests by project or service
  • Environment variables let you switch between dev, staging, and prod endpoints instantly
  • Export collections as JSON to share with teammates

📄 Documentation

23. Markdown All in One

ID: yzhang.markdown-all-in-one
Downloads: 10M+
Description:
Complete Markdown editing experience — keyboard shortcuts, table of contents generation, list editing, preview sync, and math equation support. Makes writing and maintaining Markdown docs significantly faster.

Why cross-profile:
Every developer writes READMEs, changelogs, or documentation at some point. Markdown is the universal format for developer docs regardless of stack.

Tips:

  • Use Ctrl+Shift+V to toggle the live preview panel
  • Auto-generates and updates a table of contents from your headings
  • Keyboard shortcuts for bold, italic, and links work just like a text editor

24. Markdown Lint

ID: davidanson.vscode-markdownlint
Downloads: 5M+
Description:
Lints Markdown files against a configurable set of style rules — consistent heading levels, proper list formatting, no trailing spaces, and more. Flags issues inline the same way ESLint flags JS problems.

Why cross-profile:
Keeps documentation consistent and professional, especially in team projects where multiple people contribute to the same docs. A small investment that pays off in cleaner READMEs and wikis.

Tips:

  • Create a .markdownlint.json to customize or disable specific rules per project
  • Combine with Prettier for auto-formatting on top of linting
  • Especially valuable in open source projects where docs quality matters for adoption

🎨 Themes & Customization

25. Material Icon Theme

ID: pkief.material-icon-theme
Downloads: 20M+
Description:
Replaces VS Code's default file and folder icons with a comprehensive set of Material Design icons. Assigns distinct icons to hundreds of file types, frameworks, and config files — making the file explorer significantly easier to navigate visually.

Why cross-profile:
Purely visual but universally beneficial. Recognizing a file type at a glance from its icon rather than reading its extension is a small but constant time saver.

Tips:

  • Enable folder icons for even better visual organization
  • Supports custom icon associations for proprietary file types
  • Pairs naturally with Material Product Icons for a consistent VS Code UI

26. Material Product Icons

ID: pkief.material-product-icons
Downloads: 3M+
Description:
Replaces VS Code's built-in UI icons (sidebar buttons, toolbar icons, status bar) with Material Design equivalents. Complements Material Icon Theme to give VS Code a unified, modern visual style.

Why cross-profile:
Cosmetic but cohesive — once you have Material Icon Theme installed, this completes the look. Zero performance impact.

Tips:

  • Enable via "workbench.productIconTheme": "material-product-icons" in settings
  • Works alongside any color theme
  • No configuration required

27. One Dark Pro

ID: zhuangtongfa.material-theme
Downloads: 10M+
Description:
The most downloaded VS Code color theme. A dark theme based on Atom's One Dark palette — high contrast, easy on the eyes during long sessions, with excellent syntax highlighting across all major languages.

Why cross-profile:
Included as the default dark theme recommendation. Most developers use a dark theme; One Dark Pro is the most battle-tested option with the broadest language support.

Tips:

  • Multiple variants available: One Dark Pro, One Dark Pro Flat, One Dark Pro Mix
  • Flat variant reduces visual noise for minimalist preferences
  • If One Dark isn't your taste, Dracula (dracula-theme.theme-dracula) is an excellent alternative

28. Dracula

ID: dracula-theme.theme-dracula
Downloads: 5M+
Description:
A dark theme with a distinct purple-and-pink palette. High contrast and visually distinctive — popular among developers who find One Dark Pro too blue-toned.

Why cross-profile:
Included as an alternative to One Dark Pro. Theme preference is personal; offering both covers the two dominant dark theme preferences without overwhelming the list.

Tips:

  • Official theme maintained by the Dracula organization — consistent across 300+ apps
  • Soft Dracula variant is available for reduced contrast in well-lit environments
  • Pairs well with Material Icon Theme regardless of editor color choice

📊 Summary Table

⚡ Critical Extensions — Install These First

These are the functional core. Every developer benefits from them regardless of role, stack, or personal preference.

# Extension Category ID
1 GitLens Version Control eamodio.gitlens
2 Git Graph Version Control mhutchie.git-graph
3 GitHub Pull Requests Version Control github.vscode-pull-request-github
4 Prettier Quality & Formatting esbenp.prettier-vscode
5 EditorConfig Quality & Formatting editorconfig.editorconfig
6 Code Spell Checker Quality & Formatting streetsidesoftware.code-spell-checker
7 GitHub Copilot Chat AI Assistance github.copilot-chat
8 Bookmarks Productivity alefragnani.bookmarks
9 Todo Tree Productivity gruntfuss.vscode-todo-tree
10 Path Intellisense Productivity christian-kohler.path-intellisense
11 Project Manager Productivity alefragnani.project-manager
12 Error Lens Productivity usernamehw.errorlens
13 Peacock Productivity johnpapa.vscode-peacock
14 Resource Monitor Productivity mutantdino.resourcemonitor
15 DotENV Environment & Config mikestead.dotenv
16 YAML Environment & Config redhat.vscode-yaml
17 Even Better TOML Environment & Config tamasfe.even-better-toml
18 Makefile Tools Environment & Config ms-vscode.makefile-tools
19 Docker Containers & Remote ms-azuretools.vscode-docker
20 Remote Development Pack Containers & Remote ms-vscode-remote.vscode-remote-extensionpack
21 SonarLint Security sonarsource.sonarlint-vscode
22 Thunder Client API & Network rangav.vscode-thunder-client
23 Markdown All in One Documentation yzhang.markdown-all-in-one
24 Markdown Lint Documentation davidanson.vscode-markdownlint

🎨 Community Favorites — Personalization & Appearance

Not critical to your workflow, but widely adopted as a standard across the VS Code community. These make the editor feel like yours. Install based on personal taste.

# Extension Category ID
25 Material Icon Theme Themes & Customization pkief.material-icon-theme
26 Material Product Icons Themes & Customization pkief.material-product-icons
27 One Dark Pro Themes & Customization zhuangtongfa.material-theme
28 Dracula Themes & Customization dracula-theme.theme-dracula

💡 Installation

⚡ Step 1 — Install the Critical Baseline

These are the extensions that matter for your work. Run this first:

code --install-extension eamodio.gitlens
code --install-extension mhutchie.git-graph
code --install-extension github.vscode-pull-request-github
code --install-extension esbenp.prettier-vscode
code --install-extension editorconfig.editorconfig
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension github.copilot-chat
code --install-extension alefragnani.bookmarks
code --install-extension gruntfuss.vscode-todo-tree
code --install-extension christian-kohler.path-intellisense
code --install-extension alefragnani.project-manager
code --install-extension usernamehw.errorlens
code --install-extension johnpapa.vscode-peacock
code --install-extension mutantdino.resourcemonitor
code --install-extension mikestead.dotenv
code --install-extension redhat.vscode-yaml
code --install-extension tamasfe.even-better-toml
code --install-extension ms-vscode.makefile-tools
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.vscode-remote-extensionpack
code --install-extension sonarsource.sonarlint-vscode
code --install-extension rangav.vscode-thunder-client
code --install-extension yzhang.markdown-all-in-one
code --install-extension davidanson.vscode-markdownlint

🎨 Step 2 — Personalize (Optional but Loved)

These don't affect how you work — they affect how you feel while working. Pick what suits you:

# Icons — makes your file explorer dramatically more readable
code --install-extension pkief.material-icon-theme
code --install-extension pkief.material-product-icons

# Color themes — pick one, or try both and decide
code --install-extension zhuangtongfa.material-theme   # One Dark Pro — most downloaded theme
code --install-extension dracula-theme.theme-dracula   # Dracula — bold, purple-toned alternative

Tip: There's no wrong choice here. Themes are deeply personal and have zero impact on performance or functionality. The only rule is that you should enjoy looking at your editor for 8 hours a day.

@jerryperezperez
Copy link
Author

When you install the extension, some additional extensions may be installed automatically as dependencies. This is handled by the primary extension, so no action is required, but it’s worth mentioning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment