DEV Community

Cover image for Top 5 Must-have VS Code extensions
Archit Sharma
Archit Sharma

Posted on

Top 5 Must-have VS Code extensions

Visual Studio Code is the most popular code editor or IDE (Integrated Development Environment) currently. It's a lightweight source code editor, open-source and easy to use.

Visual Studio Code extensions makes the life of developer's much easier just like VS Code keyboard shortcuts

Here is a list of top 5 must have extensions :-

1. Beautify

Beautify extension VS Code
When it comes to must-have extensions Beautify top's the list. This extension beautify your javascript files, JSON, CSS, Sass, and HTML. The unformatted code in these files is converted into formatted, readable code by this extension.
This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

2. Snippets Pack

Snippet extension VS Code
Snippets help you write repetitive code easily and quickly. However, this might not be enough. You can simply install an extension that includes a bunch of useful snippets according to your programming language.

3. Bracket pair colorizer

Bracket pair colorizer
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. It adds color to each set of opening and closing brackets, making it easier to identify each set of brackets. It's up to you to decide whether you'd like to add this feature to VS Code or not. However, it's a popular tool and many developers find it useful.

4. Live Sass Compiler

Live Sass Compiler VS Code extension
Live Sass Compiler Extension helps you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.
This extension is helpful for web developers while developing web pages with Sass.

5. Live server

Live server VS code extension
The live-server extension automates the reload for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button.
This is one of the most helpful extension for web developers.

Discussion (2)

Collapse
alexomeyer profile image
Alex Omeyer

Thanks for the article, Archit! You might also find the Stepsize extension useful - it helps you bookmark code, create todos, and manage technical debt ✌️