If you program daily, you'll know that having a well-tuned editor makes the difference between a productive day and a festival of frustrations. Visual Studio Code has become the reference editor Thanks to its performance, its extension system, and a huge community that keeps creating new tools.
The real magic of VS Code lies not only in the base editor, but in its ecosystem. Hundreds of extensions add advanced autocomplete, linters, themes, local servers, debugging, icons, Git integration, AI, and much more.In this guide you will find a very complete collection of recommended extensions: from the essential ones for any language, to those specific to JavaScript, Python, PHP, HTML/CSS, TypeScript and daily work with Git, Docker or Markdown.
What is VS Code and why are its extensions so important?
Visual Studio Code is a free and cross-platform code editor Created by Microsoft, available for Windows, macOS, and Linux, and is among the best development environments.
It already includes very powerful features right out of the box: syntax highlighting, IntelliSense, integrated debugging, terminal, Git integration, and basic support for many languagesBut where it really takes off is when you start installing extensions to adapt the environment to your way of working.
The architecture of VS Code is designed to be highly extensible: virtually every aspect of the editor can be improved or replaced, from the debugging system to themes, icons or autocomplete for a specific language.
Furthermore, there is not just one VS Code: You can use the official version or open source alternatives like VSCodiumwhich remove telemetry and certain proprietary parts, but maintain compatibility with most extensions.
How to install and manage extensions in VS Code
Installing extensions in VS Code is very easy. Everything is done from within the editor's own interface.without needing to download files manually.
To add new features, open the editor and go to the extensions panel (square icon in the sidebar or shortcut). Ctrl+Shift+X / Cmd+Shift+X in macOS). From there, search by name or keyword. the extension that interests you.
When you find an interesting extension, check its information sheet: Number of downloads, reviews, compatibility, and screenshotsThat will give you a good indication of whether it's worth installing or not.
To complete the process, simply click the install button. Most extensions activate instantlySome require reloading the editor window, and a few need extra configuration (for example, those that depend on external tools such as ESLint, PHP Debug with Xdebug, etc.).
Essential general extensions for any project
There is a set of extensions that virtually everyone should have installed, regardless of the language or stack they use. They are focused on productivity, formatting, collaboration, version control, and user experience..
prettier
prettier is the de facto standard code formatter In the world of JavaScript and many other languages, it automatically rewrites your code following well-defined style rules.
It is capable of formatting JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular and many more. The idea is that discussions about whether to use single or double quotes, semicolons or not, where to use braces, etc., will disappear because The entire project follows the same convention.
You can use the default settings or create your own rules using file types .prettierrcThe usual thing is to activate the formatting when savingso that every time you press Ctrl+S the code is clean and consistent.
ESLint
While Prettier focuses on the code aspect, ESLint focuses on quality and good practicesIt is the most widely used linter in modern JavaScript and TypeScript projects.
The ESLint extension for VS Code makes analysis run in the background while you type. It displays errors and warnings directly on the code.highlighting problematic lines and offering quick suggestions for correcting them.
You can use widely used configurations such as Airbnb, Standard or the official ESLint recommendationsor define your own rules to adapt them to the project. It is also compatible with plugins for frameworks such as React, Vue, or Node.js.
Better Comments
In large projects, the comments end up being a jumbled mess that's difficult to follow. Better Comments allows you to visually categorize comments using colors according to the prefix you use.
For example, you can have comments of the type ALL, WARNING, IMPORTANT, QUESTIONetc., each with their own style. This makes it much easier to locate pending tasks, critical notes, or key explanations when reviewing the code.
Code Spell Checker
Although it may seem like a minor detail, Spelling errors in variable names, comments, or interface text look quite bad.Code Spell Checker acts as a spell checker for code.
Analyzes identifiers, strings, and comments and Mark the suspicious wordsIt offers suggestions for correcting them. It can be used with multiple languages ​​and is very useful if you write documentation or user-visible text within the code.
Error Lens
VS Code already displays errors and warnings, but sometimes they go unnoticed. Error Lens makes them impossible to ignore displaying the diagnostic information directly next to the affected line and in the editor's margin.
At a glance you'll see where errors are concentrated in a filewithout having to open the issues panel. In large projects with many linters and analysis tools, it's a huge help in ensuring nothing is missed.
coderunner
If you like to try small fragments of code without assembling a whole projectCode Runner is very practical. It allows you to run code from multiple languages ​​(JavaScript, Python, C, C++, Java, PHP, and more) directly from the editor.
You can launch the current file or just the selected block, view the output on an integrated panel or in the VS Code terminal itself, and customize the commands used for each language.
Path Intellisense
When working with many assets, imports, and relative paths, writing them by hand is a guaranteed mistake. Path Intellisense autocompletes file and folder paths while writing strings with paths.
Works on JavaScript/TypeScript imports, CSS references, HTML image paths And generally in any context where VS Code detects that you're typing a route. It saves time and avoids annoying typos.
vscode-icons, Material Icon Theme and other icon packs
Icons are not just a matter of aesthetics. A good icon theme allows you to instantly identify the file type. just by looking at the browser.
vscode-icons, Material Icon Theme, VSCode Great Icons or specific themes like VSCode simpler Icons with Angular They provide custom icons for languages, frameworks, and configuration files (Angular, Docker, env, etc.).
Choosing one or the other is a matter of taste, but Any of them significantly improves the readability of the file treeespecially in single-unit or large projects.
GitLens
GitLens is probably The most powerful extension for working with Git from VS CodeIt takes version control to another level by fully integrating the history within the editor.
Allows you to see who changed each line and when (blame), the history of a file, compare revisions, explore branches and tagsand much more. It also displays contextual annotations on the code with information about the last commit.
If you work in a team, it's wonderful to understand the reasons for certain changes, review regressions, and perform code review without leaving the editor.
Live Share
For pair programming or remote mentoring, Live Share is one of the best things out there.It allows you to share your VS Code session with another person in real time.
You both can edit the same file, debug together, share terminals and local servers and even open an integrated chat. It's perfect for troubleshooting complex bugs or teaching someone how to work on a specific project.
Specific extensions for JavaScript and TypeScript
The JavaScript and TypeScript ecosystem is one of the most pampered by VS Code. If you work in frontend, backend with Node, or full stack development, these extensions will save you many hours..
JavaScript (ES6) code snippets
Writing the same structures over and over again is a drag. JavaScript (ES6) code snippets adds tons of snippets for modern syntax from JS and TS.
With short abbreviations you can generate arrow functions, classes, imports, console.log, loop structures and much more. It's ideal for memorizing less and typing faster.
npm Intellisense and npm extension
When you work with many packages, remembering exact names isn't the most fun. npm Intellisense autocompletes the names of installed modules in your imports and requires.
Meanwhile, the official npm extension for VS Code integrates with your package.json to list and run scripts With one click, view dependencies and manage routine tasks without opening the terminal.
Import Cost
The size of the bundle on the frontend matters, a lot. Import Cost calculates the approximate size of each import and shows it next to the corresponding line.
This way you know instantly if you're bringing in a whole monster of a library for something trivial, and you can evaluate changes like use partial imports, lazy loading, or lighter alternatives.
Quokka.js
Quokka.js functions as a Interactive notepad for JavaScript and TypeScript within VS Code. It executes code as you write it and displays results and variable values ​​in inline annotations.
It's perfect for test quick ideas, understand new APIs, or debug small functions without having to build a whole project from scratch. It has a free version with very useful features and a paid edition with extras.
ES7 React/Redux/GraphQL/React-Native snippets and Simple React Snippets
If you work with the React ecosystem, these two extensions are pure gold. ES7 React/Redux/GraphQL/React-Native snippets offers snippets for components, hooks, Redux, GraphQL and React Nativecovering almost all common patterns.
Simple React Snippets, on the other hand, focuses on a smaller set of snippets for modern React (functional components, basic imports, etc.), ideal if you want something less overwhelming but equally productive.
JavaScript and TypeScript Nightly
If you like to stay up-to-date with language, JavaScript and TypeScript Nightly gives you access to the nightly version of the TypeScript language server. that uses VS Code.
That means new features, performance improvements, and bug fixes before they reach the stable version—ideal for test new language features and detect future changes that may affect your code.
Python Extensions
VS Code, with the right extensions, becomes a Top-notch Python IDEIf you do backend development, data science, or automation with this language, these are almost mandatory.
Python (official extension)
Microsoft's official Python extension is the cornerstone for working with this language in VS CodeWithout it, support is very limited.
Contribute IntelliSense, debugging, testing, integration with virtual environments, code formatting (Black, autopep8), linting with Pylint or Flake8 and many other essential functions.
Pylance
Pylance is the advanced language server for Python which further enhances the official extension. It provides fast static analysis, improved autocomplete, and very detailed type checking.
If you use type annotations or want to detect errors before running the code, Pylance greatly improves the development experience. in medium and large projects.
Jupyter
The Jupyter extension integrates notebooks .ipynb directly in VS CodeYou can create, open, and run cells just like in classic Jupyter, but from the editor.
It is especially useful for data analysis, machine learning, visualization, and rapid prototyping, combining the best of notebooks with the advantages of a full-fledged editor.
Python Docstring Generator
Internal documentation in Python is usually in docstrings. Python Docstring Generator automatically creates the skeleton of the docstring for functions, classes, and methods.
When you type the opening quotation marks, the extension generates fields for description, parameters, and return value based on the function signature, which encourages well-documented code without being such a chore.
PHP and backend extensions
PHP remains a mainstay in the web backend, and VS Code has a very mature ecosystem of extensions for this language.
PHP IntelliSense and Intelephense
PHP IntelliSense was one of the first serious autocomplete extensions for PHP. It offers Suggestions for functions, classes, methods, namespaces, and variables, in addition to basic navigation to definitions.
PHP Intelephense goes one step further: Very fast and deep analysis, refactoring, reference research, updated support for PHP 7 and 8 and more. Even the free version already outperforms most alternatives.
PHP DocBlocker
To maintain decent documentation in large projects, PHP DocBlocker generates DocBlock comments complete for functions, methods, classes, and properties.
In writing / ** on a function, it automatically fills in the parameters and return type, which incentivizes Properly document internal and public APIs.
Compose
Composer is the standard for dependency management in PHP. The corresponding extension integrates with VS Code for run common commands (install, update, require) from the palette, in addition to offering autocomplete and highlighting in composer.json.
This makes it much more comfortable manage libraries, frameworks and scripts without constantly switching between editor and terminal.
PHP Debug
Debugging PHP with var_dump has its charm up to a point. PHP Debug adds a full debugger based on Xdebug. within VS Code.
With him you can Set breakpoints, inspect variables, step through the code and analyze the call stack. The initial setup requires some care, but once set up, it's an essential tool.
Extensions for HTML, CSS and frontend development
If you work on the visual side of the web, there are several extensions that They transform VS Code into a super comfortable environment for layout and styling..
Live server
Live Server mounts a local development server with automatic reloadClicking "Go Live" opens your site in your browser and refreshes the page every time you save a file.
It is ideal for Pure HTML, rapid prototyping, static layout, and simple front-end projectswhere seeing the changes instantly makes all the difference.
HTML CSS Support
This extension improves the integration between HTML and CSS. It offers intelligent autocompletion of classes and IDs defined in your stylesheets. when you write HTML, and vice versa.
It also suggests CSS properties (including supplier prefixes) and works wonderfully combined with Emmet, which greatly speeds up the layout workflow.
IntelliSense for CSS class names and Tailwind CSS IntelliSense
IntelliSense for CSS class names analyzes your CSS, SCSS or Less files to Offer auto-completion of class names in HTMLThis is especially useful when there are utilities or classes with long names.
If you use Tailwind, Tailwind CSS IntelliSense goes a step further, providing Tailwind utility-specific autocompletion, linting, and inline documentation, something almost mandatory to work comfortably with this framework.
CSS Peek and CSS Lint
CSS Peek lets you quickly view and jump to the CSS definition of a class or ID from the HTML, either in a pop-up window or by opening the corresponding file.
CSS Lint acts as a linter for stylesheets, marking errors or problematic patterns (duplicate properties, inefficient rules, etc.), helping to maintain cleaner and more maintainable CSS.
Auto Rename Tag and Highlight Matching Tag
Auto Rename Tag takes care of something as simple as it is useful: When you change the opening tag of an HTML or XML element, it updates the closing tag. automatically so that they don't become unsynchronized.
Highlight Matching Tag highlights the opening/closing pair of the tag where the cursor is locatedThis is very practical in large documents or those with highly nested structures.
Image Preview, Image Optimizer and Color Highlight
Image Preview shows a thumbnail of the image referenced in a route by hovering the cursor over it or in the margin, which helps to verify that the paths are correct without opening the file separately.
Image Optimizer allows compress images (lossy or lossless) from within the editor itself, leaving your assets ready for production without going through external tools.
Color Highlight highlights the color codes (hex, RGB, HSL, etc.) with their actual color as background or underline, making it much easier to work with complex palettes.
Extra productivity extensions, design and customization
In addition to the pure development tools, there are quite a few extensions designed for to make your day-to-day life more comfortable and your editor more pleasing to the eye.
Themes for VS Code
Themes directly affect your visual comfort. Some of the most popular and recommended are: Shades of Purple, Material Theme, Night Owl, Horizon, Noctis or Flatland Monokai.
Each one has its own personality: bright dark schemes, palettes designed to reduce eye strain, light and dark variations, or even completely monochrome themes for those who want zero distractions.
Peacock
When you open several projects at once, it's easy to get confused. Peacock lets you change the accent color of the VS Code window per projectso that at a glance you can tell if you are editing the backend, the frontend, or a specific microservice.
It's a simple but incredibly useful extension if You usually have several workspaces open simultaneously..
Indent-rainbow and Rainbow Brackets
indent-rainbow colors the indentation columns with different tones, helping to see the code structure effortlessly.
Rainbow Brackets does something similar with parentheses, brackets, and bracesassigning a different color to each nesting level. Between the two, locating a missing parenthesis or a poorly indented block becomes much easier.
Todo Tree
If you use comments like TODO, FIXME, or BUG, Todo Tree scans your workspace and creates a dashboard with all these annotations organized in a tree shape.
From there you can navigate directly to each point in the code where there are pending tasks or marked problems, turning the TODOs into a kind of mini task manager linked to the repository.
GitHub Copilot, Tabnine and ChatGPT/AI
AI-based autocomplete tools have made a strong entrance. GitHub Copilot and Tabnine suggest lines or entire blocks of code based on the context, previous tests, or comments.
Extensions that integrate ChatGPT or similar models in VS Code allow request code explanations, refactor functions, or generate tests without leaving the editor. They require API keys, but as a development co-pilot they are very powerful if used judiciously.
Markdown All in One and Improved Markdown Preview
If you document projects or write technical posts, Markdown All in One adds shortcuts, improved preview, index generation, and other conveniences to work with Markdown.
Combined with GitHub-style preview extensions, you get a writing experience very close to how your READMEs or articles will later look in the web.
Docker, Remote SSH and Remote WSL
In professional environments, it is very common to work with containers or remote machines. The official Docker extension allows you to manage images, containers, networks, and volumes. from the sidebar, in addition to facilitating debugging within containers.
Remote SSH and Remote WSL let you Open remote folders or Linux environments (WSL) as if they were local projects, executing commands and debugging right there, but with the convenience of the VS Code interface.
With all these extensions well chosen and configured, Visual Studio Code goes from being a simple lightweight editor to A custom development environment, tailored to your stack, your way of working, and your projects.Finding the balance between not overloading it and having just the tools you need is the key to gaining speed, comfort and quality in your day-to-day programming.
