Visual studio code is the best code editor to use at the present time due to its wide range of extensions and support from Microsoft this editor is widely adopted.

In this blog, we look into useful VS Code extensions for front-end development, from fine productivity boosters to advanced debugging helpers.

• JavaScript (ES6) Code Snippets

This extension helps you by not writing that repetitive code again and again. It provides JavaScript, TypeScript, Vue, React, and HTML code snippets.

• CSS Peek

As its name suggests, this extension lets you jump to the CSS code using classes and IDs.

• Auto Close Tag

This extension automatically adds the closing tag of HTML and XML.

• REST Client

Using this extension, we can test APIs and view their response directly in the visual studio code.

• ESLint

ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself.

It’s like a virtual peer who is validating your code while you are writing it.

• Prettier – Code formatter

This extension performs the formatting of the JavaScript, CSS, and HTML code.

• Path Intellisense

Importing code from other files is what everyone does on a daily basis. This extension makes the development time faster by autocompleting file names.

• GitLens

With GitLens, it’s so easy to view code authorship, check commit number, view changes between the last commit and existing changes, and so on.

• Project Manager

Do you work on multiple projects and switch back and forth? Project manager will be a savior to manage multiple projects in visual studio code.

• Live Server

Live Server extension provides the live preview of your web application right within the editor.

This is very handy and useful for the front end developers.

• Debugger for Chrome

This extension brought the powerful chrome debugger right into the visual studio code.

It is very useful for front-end developers to perform the testing and debugging.

• Better Comments

This extension helps you to create more human-friendly and easy-to-read comments.

• Code time

This extension tracks your development time and provides you with useful stats such as how many hours you have code today etc.

• Polacode

We can use this extension to create a beautiful code polaroid and share it.

• Bracket Pair Colorizer

Many times it happens that I just deleted a line with a bracket and invested some time to fix the bracket issue. Fortunately, this little extension can help you immensely to manage brackets by colorizing matching brackets.

• Auto Rename Tag

“Auto Rename Tag” is another must-have extension for Web Development. Thanks to this extension, whenever you rename an Open/Close Tag, the other Tag is automatically renamed.

• Vscode-icons

Web Projects usually have a wide type of files: HTML, CSS, JavaScript, JSON many other types. If you Install this vscode-icons, then you can have a nice visual representation of different file types as per their file Extension.

• Visual Studio IntelliCode

With the Visual Studio IntelliCode extension, you can have AI-assisted development features for TypeScript/JavaScript, Python, Java.

• Code Runner

Code Runner offers the possibility to run Code or Code snippet for virtually all major programming languages in all kinds of shell.

• Live Sass Compiler

VS Code extension can make your life easier by transpiling your SASS/SCSS files into CSS files on the fly and automatically gives you a live preview of the app or the compiled styles in your browser.

Thank you for reading this. Let me know in the comments if I missed some extensions.

Check out my Twitter account for more resources like this.