30 Visual Studio Code Extension for Web Development

What Is Visual Studio Code?

Visual Studio Code is open-source and developed by Microsoft, so you can rest assured to use it because it is completely free and always updated to the latest versions. Not only that, but it is also very suitable for developing large, complex projects and also supports Git integration. This tool also provides extensions to help us code faster, manage files efficiently. Here is the list of top 30 Visual Studio Code Extensions for you.

Visual Studio Code Extension

Visual Studio Code

Visual Studio Code Extension

Debugger for Chrome

Debugger for Chrome helps you to debug program code errors right in VS Code without opening Google Chrome to use developer tools. It has many useful features such as setting breakpoints, displaying the console. One of the best Visual Studio Code Extension.

Debugger for Chrome

JavaScript (ES6) code snippets

JavaScript (ES6) code snippets make it possible to call the structure of a function or property… quickly through the provided syntax. For example, when you type clg, it will automatically compile to console.log(object). You can refer to the annotation table on its settings page. In addition, it also supports many languages in file extensions such as TypeScript, JavaScript React, TypeScript React, HTML, and Vue.js. Another great visual studio code extension to use .

JavaScript (ES6) code snippets

Live Server

Live Server helps launch local servers quickly with live auto-reload for static and dynamic web pages. For example, when you change a piece of information on an HTML page, it will automatically update without us having to press reload on the browser. It also has many options for user settings such as custom port number, default browser setting, SVG support, HTTPS, proxy, etc. One of the best visual studio code extensions to use.

Live Server

Auto Close Tag

Auto Close Tag is a visual studio code extension to built to help you automatically close tags when you open them. For example, when you type, it will automatically add. In addition, it also has support for many other languages such as XML, PHP, Vue.js, JavaScript, TypeScript, JSX, TSX, etc. it also has some settings that make it easy to tweak such as setting a non-automatic tag list dynamic close, use keyboard shortcuts to manually add closing tags.

Auto Close Tag

Prettier — Code formatter

Prettier — Code formatter is a visual studio code extension that helps you to reformat the code automatically and create a common code style for the programming team through its own rules defined by the extension. It also supports a variety of languages such as JavaScript, TypeScript, Flow, JSX, JSON, HTML, Vue.js, Angular, etc.

Prettier — Code formatter

TODO Highlight

TODO Highlight helps you highlight important comments in the code so that later programmers or ourselves can understand what to note or what to do before using and coding. In addition, it also has a number of beautifully designed themes, supporting many languages such as JavaScript, HTML, CSS, PHP, etc. Another amazing visual studio code extension to go for.

TODO Highlight

Auto Rename Tag

Auto Rename Tag is a visual studio code extension that helps to automatically rename both pairs of tags in HTML, XML. For example, when you change the name of the opening tag, the corresponding closing tag will also be automatically changed. You can see a detailed example in the Usages section.

Auto Rename Tag

Better Comments

Better Comments displays comments in separate categories, making it easier to categorize and visualize such as important announcements to highlight, warnings, to-dos, etc. Also, you can Customize to suit your purposes and preferences such as setting comment syntax, editing background color for comments. It is the most used visual studio code extension.

Better Comments

ESLint

ESLint is a tool that analyzes the code in the program to find errors as well as the code that needs improvement. In addition, it also provides you with solutions to optimize or fix errors faster. You can also customize ESLint’s parser to fit your purpose or project.

ESLint

Beautify

Beautify is a visual studio code extension that helps you reformat the way your code is displayed in a more beautiful way. It supports popular languages such as JavaScript, JSON, CSS, Sass, and HTML.

Beautify

Bracket Pair Colorizer

Bracket Pair Colorizer is an extension that highlights the corresponding brackets in the code by using color. It helps you to easily detect missing brackets or have a visual look when there are too many nested brackets in the code. Another great visual studio code extension to use.

Bracket Pair Colorizer

Path Intellisense

Path Intellisense is an extension that helps you automatically perform file names (autocompletes filenames) by suggesting paths every time you type the path to where the file is stored.

Path Intellisense

Import Cost

Import Cost makes it possible to check the size of imported files easily through the information displayed directly in the code when we import. It is also the most used visual studio code extension.

Import Cost

Code Time

Code Time helps you to calculate the time you work on visual studio code. In addition, it also summarizes the time you spend on each project, the level of working with the code through the chart of the days of the week, showing the average value of the time you work in a month.

Code Time

CSS Peek

The CSS Peek visual studio code extension helps to find the ids or classes of HTML tags in CSS files that contain those classes or attributes. In addition, it also allows you to go to those CSS files instantly.

CSS Peek

Project Manager

Project Manager visual studio code extension makes it easy to switch between projects in VS Code. It provides a sub-menu so that you can store the projects to work on and switch back and forth quickly.

Project Manager

Browser Preview

Browser Preview displays the browser right on Visual Studio Code so you can see the results as well as debug the program more easily.

Browser Preview

GitLens — Git supercharged

GitLens — Git supercharged is a utility that provides many useful features to help you work with Git better, such as displaying comments for each line of code about the commit developer, displaying detailed information about revisions code in the file.

GitLens — Git supercharged

Polacode

Polacode is a utility that helps you take a picture of your code and save it right on your computer easily. In addition, you can also choose pre-designed themes to help the code stand out and be more beautiful during the shooting process.

Polacode

vscode-icons

The vscode-icons is a utility we can set up many beautiful icons for Visual Studio Code.

vscode-icons

Settings Sync

Settings Sync makes it easy for you to save the settings for Visual Studio Code on your computer on GitHub and use it for other machines easily, such as information about extensions, or settings that you need. already set up. Now you can easily set up for many different machines without having to recall the extensions and settings that you have installed for VS Code.

Settings Sync

Quokka

Quokka makes it possible for you to test each small piece of JavaScript, TypeScript code and display it directly on VS Code without using console.log() to display it in the browser.

Quokka

EditorConfig

EditorConfig is an extension that helps maintain code style consistency for multiple developers working on the same project. And each programmer can work on many different code editors such as VS Code, Atom, Notepad++…, it all supports plugins on each platform that help programmers can read and edit style code one at a time. easy way.

EditorConfig

Material Icon Theme

Material Icon Theme is a Material Design icon setup utility for Visual Studio Code.

Material Icon Theme

Color Highlight

Color Highlight is a utility that helps you display colors for objects found on the page. For example, many color codes that VS Code cannot display, this utility is a great choice for you.

Color Highlight

REST Client

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

REST Client

Live Share

Live Share helps developers in the team to share the code in the program in real-time to easily edit and debug the program such as sharing debugging sessions, terminal instances, localhost web apps, voice calls.

Live Share

Code Spell Checker

Code Spell Checker helps you to check the spelling of the code in the program. However, it only supports languages such as English, Swedish, French, German.

Code Spell Checker

Vetur

Vetur is an extension that provides useful tools for Vue.js such as debug, error checking, Syntax-highlighting, snippet.

Vetur

ES7 React/Redux/GraphQL/React-Native snippets

ES7 React/Redux/GraphQL/React-Native snippets is an extension that provides snippets for React, Redux, and GraphQL in JS/TS with the ES7 solution. You can refer to the syntax table on its main page!

Conclusion

To Know more about Web Application Development and its trends, connect with FunctionUp. FunctionUp is a pay after placement bootcamp that trains candidates and help them securing a high paying job in Tech. To know more, visit us here

FunctionUp
We help you break the glass ceiling which blocks entry to tech. We are a team of IIT / ISB alumni who are passionate about solving the key problem of starting a career in tech. A lot of smart and handworking graduates find it difficult to crack high paying tech jobs either because of their background and their college not being able to help them get interviews. Hence, we started this placement bootcamp that hand holds people from skilling till employment.

Leave a Reply

Your email address will not be published. Required fields are marked *