10 VS Code Extensions You Must Install
Source: Dev.to
1. Prettier – Code Formatter
Prettier is an opinionated code formatter that supports multiple languages including JavaScript, TypeScript, CSS, HTML, and more. It eliminates debates about code style by automatically formatting your code on save.
Why you need it
Consistent code formatting across your entire team without any effort. It integrates seamlessly with most popular frameworks and libraries.
Pro tip
Enable “Format on Save” in your VS Code settings and create a .prettierrc configuration file in your project root to ensure everyone follows the same formatting rules.
2. ESLint
ESLint is the premier linting tool for JavaScript and TypeScript. It identifies problematic patterns, helps you follow best practices, and catches potential bugs before they reach production. It’s highly configurable and supports custom rules.
Why you need it
Catch errors early, enforce coding standards, and maintain code quality across your codebase.
Pro tip
Combine ESLint with Prettier using eslint-config-prettier to prevent rule conflicts, and enable “Auto Fix on Save” to automatically clean up your code as you work.
3. GitLens
GitLens supercharges the Git capabilities built into VS Code. It visualizes code authorship via blame annotations, lets you explore repositories, and provides rich visualizations of your Git history.
Why you need it
Understanding who changed what, when, and why becomes effortless, turning Git into a powerful collaboration platform.
Pro tip
Use the Commit Graph view to visualize branches and merges. If inline blame annotations get too noisy, disable them and rely on hover tooltips instead.
4. Live Server
Live Server launches a local development server with live‑reload capability for static and dynamic pages. Changes to HTML, CSS, or JavaScript are instantly reflected in the browser.
Why you need it
Instant feedback accelerates your workflow, especially on front‑end projects.
Pro tip
Right‑click any HTML file in the Explorer and select “Open with Live Server,” or use the shortcut Alt+L, Alt+O (Windows/Linux) / Cmd+L, Cmd+O (Mac).
5. Auto Rename Tag
Automatically renames paired HTML/XML tags. When you rename one tag, its corresponding opening or closing tag updates simultaneously.
Why you need it
Simple but incredibly time‑saving when working with markup languages. No more hunting for mismatched tags.
Pro tip
Ensure it’s activated for JSX and TSX files by checking the activationOnLanguage setting in your VS Code configuration.
6. Path Intellisense
Provides intelligent autocomplete for file paths in your project. As you type a path, it suggests and completes filenames.
Why you need it
Eliminate typos in file paths and navigate large codebases more efficiently.
Pro tip
Keep your project structure organized with clear, consistent naming conventions—the extension works best with logical folder hierarchies.
7. Bracket Pair Colorizer 2
Colors matching brackets to make it easier to identify pairs, especially in nested code. VS Code now includes built‑in bracket pair colorization, but this extension offers additional customization.
Why you need it
Instantly understand code structure and reduce time spent matching brackets.
Note
Enable native colorization by adding the following to your settings:
{
"editor.bracketPairColorization.enabled": true
}8. REST Client
Allows you to send HTTP requests and view responses directly within VS Code. Create .http or .rest files to organize requests.
Why you need it
Test APIs without switching to external tools like Postman. Keep request documentation alongside your code.
Pro tip
Use variables and environments to manage different configurations (dev, staging, production).
9. Better Comments
Helps you create more human‑friendly comments by categorizing annotations (alerts, queries, TODOs, highlights) with different colors.
Why you need it
Make comments more organized and visually distinct, improving documentation and team communication.
Pro tip
Customize comment styles in settings.json and add your own tags beyond the defaults (!, ?, TODO, *).
10. Error Lens
Enhances the display of errors, warnings, and diagnostics by highlighting the entire line and showing the message inline.
Why you need it
Spot errors immediately without interrupting your workflow; the inline display saves time and reduces context switching.
Pro tip
If inline messages become distracting, adjust the settings to show only errors or modify the background highlight intensity.
Tips for Installing Extensions
- Read the reviews and ratings before installing.
- Check the last update date to ensure the extension is actively maintained.
- Review the permissions requested by each extension.
- Disable extensions you’re not using to keep VS Code performant.
- Sync your extensions across devices using VS Code’s Settings Sync feature.
- Start with the essentials (Prettier, ESLint, GitLens, Live Server) and add specialized tools based on your needs.
These extensions represent just a fraction of what’s available in the VS Code Marketplace, but they form a solid foundation for any developer.