VS Code is a popular open-source code editor that supports a wide range of extensions to enhance its functionality. In this blog, we will explore some of the best extensions available to improve your coding experience and productivity.

1. Live Server

If you're working on a project HTML/CSS/JavaScript only, this extension Launches a local development server with a live reload feature (on file change).

• Make sure you're opening the folder not the file in Visual Studio Code.

• Open your HTML file and press alt+L+alt+O.

2. HTML End Tag Labels

When you work on a static website without any JavaScript framework like React, you may have a long HTML file and you get confused when you see the nested <div>. This extension comes in handy because it shows you at the end of the tag the Id and the Class for the closed tag.

3. Auto Rename Tag

Automatically rename paired HTML/XML.

4. HTML CSS Support

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

5. Material Icon Theme

This extension provides beautiful icons for your files and folder like the image below.

6. Fluent Icons

This extension offers a set of icons based on Microsoft's Fluent design language. It enhances the appearance of the code editor by adding these icons to various parts, including the file explorer, providing a more visually appealing and consistent interface.

7. CodeSnap

A tool that allows developers to take screenshots of their code snippets. With this extension, developers can easily capture an image of their code and include it in their documentation, and blog posts...

1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.

2. Select the code you'd like to screenshot.

3. Adjust the width of the screenshot if desired.

4. Click the shutter button to save the screenshot to your disk.

   

8. Code Spell Checker

This spell checker is an essential tool for catching spelling mistakes in both code and documents. It is designed to be highly accurate, reducing the number of false positives to a minimum. You can trust its ability to help you produce typo-free work.

9. VSCode Dimmer

The "Dimmer" extension helps you focus on selected code by reducing the opacity of text outside of selections. This extension supports multiple selections, making it an excellent tool for working on large code files. You can set a keybinding for "dimmer.ToggleDimmer"

Search for "Toggle Dimmer" in the command palette, or use the "dimmer.enabled" setting to toggle the extension on and off.

By default, the extension will dim all lines that do not have an extension. You can use the "dimmer.context" setting to leave a specific number of lines before and after the un-dimmed lines.

You can also set the value to a negative number to dim everything except the selection. This extension comes in handy when you are working with long code files and need help tracking your current position.

10. Footsteps

The ability to jump between different parts of your code is a crucial aspect of modern software development. With the "highlight and fade" functionality provided by this VSCode extension, you can keep track of where you are in your code, and which lines you have recently edited.

As you move away from a particular line, it will gradually fade, making it easier to see which lines are currently relevant to your work. Additionally, the extension supports quick navigation between lines using keyboard shortcuts, such as ctrl+alt+left and ctrl+alt+right.

By using this extension to keep your place when navigating your code, you can focus on the task at hand and get more done in less time.

11. Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

12. IntelliCode

Visual Studio IntelliCode is a suite of AI-powered tools that improve developer productivity with features like AI-assisted IntelliSense and statement completion, code formatting, and style rule inference. These capabilities help developers write code faster, more accurately, and in compliance with best practices.

Alternative:

• GitHub Copilot

• Tabnine AI

13. Import Cost

This VSCode extension allows you to easily check the size of any imported packages directly in the editor.

14. Comment Anchors

Comment Anchors is a VSCode extension that lets you add bookmarks to your code by placing anchors within comments or strings. These anchors can be used to track TODOs, write notes, create foldable sections, or build a simple navigation system that makes it easier to navigate your files.

The extension offers an easy-to-use sidebar for viewing anchors in the current file or across the entire workspace. With many configuration options available, Comment Anchors can be customized to fit your personal workflow and increase your productivity.

Alternative:

• Todo Tree

• TODO Highlight

• Better Comments

15. Image preview

Shows an image preview in the gutter and on hover.

15. CSS Peek

HTML and ejs code editing will get enhanced by this extension, which adds support for "Go To Definition" and "Go To Symbol" in Workspace. It also identifies Classes and IDs in CSS/sass/less strings within the source code.

16. Turbo Console Log

This extension makes debugging much easier by automating the operation of writing meaningful log messages.

• Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)

• Pressing ctrl + alt + L (Windows) or ctrl + option + L (Mac)

16. Quokka.js

Quokka.js is a productivity tool for developers, designed to facilitate rapid prototyping of JavaScript/TypeScript. As you type, the runtime values are constantly updated and displayed alongside your code in your IDE.

17. SCSS IntelliSense

SCSS IntelliSense (Variables, Mixins, and Functions) for all files in the workspace.

18. Live Sass Compiler

There are various methods to compile SASS code, such as using SASS CLI. However, if you prefer a faster approach, this extension can come in handy. It is a VSCode extension that assists you in compiling/transpiling your SASS/SCSS files into CSS files in real-time and with live browser reload.

19. GitLens

GitLens enhances the capabilities of Git within VS Code, revealing previously undiscovered insights within each repository. It allows you to quickly view code authorship details through Git blame annotations and CodeLens, effortlessly navigate and investigate Git repositories, obtain valuable information through comprehensive visualizations and robust comparison commands, and much more.

20. ES7+ React/Redux/React-Native snippets

ES7+ React/Redux/React-Native Snippets is a popular extension for Visual Studio Code that provides a collection of code snippets to help developers write code faster when working with React, Redux, and React Native. The extension includes snippets for common tasks such as creating new components, adding event handlers, and managing Redux state.

21. Sapling

A convenient way to navigate through your React application. With Sapling, you can easily traverse your component tree and find the exact component you're looking for.

22. Glean

The extension provides refactoring tools for your React codebase.

23. REST Client

REST Client allows you to send HTTP requests and view the response in Visual Studio Code directly.

24. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense provides intelligent code completion, linting, and hover previews for Tailwind CSS classes in your HTML, CSS, and JavaScript files. It helps you write code faster and with fewer errors by suggesting the correct class names.

25. Prettier

If you don't have prettier already installed on your project it's good to have this extension that allows you to format your code on file save.

26. Next JS/TS Snippets

If you're working with Next.js, these snippets can help you speed up your development process.

• np - nextPage

• npssp - nextPageServerSideProps

• npsp - nextPageStaticProps

• npspth - nextPageStaticPaths

• nssp - nextServerSideProps

• nsp - nextStaticProps

• nspth - nextStaticPaths

• nip - nextInitialProps

• nimg - nextImage

• napp - nextApp

• ndoc - nextDocument

• napi - nextApi

• nmid - nextMiddleware

---

Don't miss these other lists!

• 50+ websites for web developers

• Top +30 Web/App Design Inspiration sites for your next project

• Best 50 websites for freelance / full-time remote jobs