Boost Your Productivity with These 25 VS Code Extensions
Table of contents
- 1. Live Server
- 2. HTML End Tag Labels
- 3. Auto Rename Tag
- 4. HTML CSS Support
- 5. Material Icon Theme
- 6. Fluent Icons
- 7. CodeSnap
- 8. Code Spell Checker
- 9. VSCode Dimmer
- 10. Footsteps
- 11. Path Intellisense
- 12. IntelliCode
- 13. Import Cost
- 14. Comment Anchors
- 15. Image preview
- 15. CSS Peek
- 16. Turbo Console Log
- 16. Quokka.js
- 17. SCSS IntelliSense
- 18. Live Sass Compiler
- 19. GitLens
- 20. ES7+ React/Redux/React-Native snippets
- 21. Sapling
- 22. Glean
- 23. REST Client
- 24. Tailwind CSS IntelliSense
- 25. Prettier
- 26. Next JS/TS Snippets
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
Make sure you're opening the folder not the file in Visual Studio Code.
Open your HTML file and press
2. HTML End Tag Labels
<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.
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...
Open the command palette (
Ctrl+Shift+Pon Windows and Linux,
Cmd+Shift+Pon OS X) and search for
Select the code you'd like to screenshot.
Adjust the width of the screenshot if desired.
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.
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
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.
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.
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.
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)
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.
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.
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.
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
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.
Don't miss these other lists!