19 Must-Have Visual Studio Code Plugins of 2021 for Web Developers
Visual Studio Code is one of the most widely used code editors in the developer community. And one of the reasons for its popularity being the number of extensions available to make development easier. From extensions that make learning how to code painless to functional extensions that make development processes more efficient, there's something for every kind of developer.
Here, we will discuss some of the most useful Visual Studio Code plugins that could help speed up your development process.
1. Settings Sync
Settings sync is a plugin that allows you to sync your VS Code settings, themes, file icons, key bindings, etc., to GitHub. This way, you'll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VS Code environment on new devices or having to manually set up everything again.
Go to the link and read the instructions to properly configure your VS Code editor to take advantage of the plugin.
2,635,278 installs
Average Rating: 4.6 out of 5.
2. Prettier
Prettier is an opinionated code formatter. Prettier is one of the best code formatters available. It comes in handy when you are working on a project and sharing your code with the team; everyone will have the same code format. It makes for easier readability and efficient coding. You can set your code to be formatted on every save by properly configuring prettier.
14,140,068 installs
Average Rating: 3.7 out of 5.
3. ESLint
ESLint is a tool for identifying and reporting patterns found in ECMAScript/JavaScript code, intending to make code more consistent and avoid bugs. In simple words, ESLint helps you fix errors in your code and also format it. ESLint statically analyses your code to quickly find problems.
15,643,858 installs
Average Rating: 4.4 out of 5.
4. Visual Studio IntelliCode
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning. It helps developers and programmers with intelligent code completion suggestions.
It comes with default support for Python, TypeScript/JavaScript, React, and Java.
12,581,106 installs
Average Rating: 4 out of 5.
5. Icons
Icons help you identify files and folders more easily and helps you differentiate between different file types by looking at the file icon. It gives a more pleasant look and feels to the native boring editor. There are different types of icons available in the market. You can choose to apply a minimalistic look to the editor or go crazy with the icons, as there are many icon packs to choose from. Listed below are some popular icon packs:
6. Remote - SSH
The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.
- Develop on the same operating system you deploy to or use more extensive, faster or more specialized hardware than your local machine.
- Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
- Access an existing development environment from multiple machines or locations.
- Debug an application running somewhere else, such as a customer site or in the cloud.
4,201,807 installs
Average Rating: 4.3 out of 5.
7. Live Server
The live server plugin lets you launch a local development Server with live reload feature for static & dynamic pages. You don't have to worry about reloading your webpage manually in your browser after writing your code. The live server takes care of it. You have to properly configure it to work correctly. Every time you save your code, it reloads the webpage for you. This saves you a lot of time and makes development more straightforward.
13,643,332 installs
Average Rating: 4.4 out of 5.
8. Import Cost
This extension will display inline in the editor the size of the imported package. The extension utilizes a webpack with a babili-webpack-plugin to detect the imported size. Importing hefty packages can affect the user experience. This extension helps you with that. When the import is too large, Import Cost warns you by displaying the size in red. You can configure what size should be considered small, medium, or large.
1,205,738 installs
Average Rating: 3.8 out of 5.
9. JavaScript (ES6) code snippets
This extension is a must-have for every JavaScript developer. It provides code snippets, and it comes with pre-built support not just for JavaScript ES6 but also for Typescript, ReactJS, Vue, and HTML.
5,877,947 installs
Average Rating: 4.8 out of 5.
10. Auto Rename Tag
Renaming a particular tag can be tricky when there are hundreds of lines of code within a single tag and when there are many nested tags. Auto Rename Tag is a super helpful VS Code extension for web developers. As the name suggests, Auto Rename Tag renames the second tag as the first one is updated and vice versa. This extension helps you not only with HTML but also with React because of JSX.
6,119,516 installs
Average Rating: 3.3 out of 5.
11. Debugger for Chrome
Debugger for chrome is a VS Code extension developed by Microsoft, and it allows you to debug your JS code in VS Code. You can set breakpoints, step your way through the code, debug scripts added dynamically, and more.
It helps to detect errors earlier in the development process, gain helpful information on data structures, and allow straightforward interpretation.
8,352,266 installs
Average Rating: 4.2 out of 5.
12. Docker
The Docker extension is developed by Microsoft, making it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.
9,990,340 installs
Average Rating: 4.7 out of 5.
13. DotENV
It's pretty common to configure Node.js applications using environment variables. And, one of the most popular modules for managing environment variables is dotenv. The DotENV extension for VS Code adds convenient syntax highlighting when editing a .env file.
18,97,756 installs
Average Rating: 4.7 out of 5.
14. ES7 React/Redux/GraphQL/React-Native snippets
This is for advanced developers who are now working with JavaScript frameworks such as React and other technologies compatible with its production and complex applications. With the help of this snippet, you can easily create class-based components, functional components.
3,222,181 installs
Average Rating: 4.3 out of 5.
15. Git Graph
Git Graph lets you view a Git graph of your repository and efficiently perform Git actions from the graph. You can also configure it to look the way you want. You can display the local and remote branches, perform git actions, compare two commits, and a lot more with this handy tool.
1,537,777 installs
Average Rating: 5 out of 5.
16. GitLens
GitLens is an open-source extension for Visual Studio Code created, developed, and maintained by Eric Amodio.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
GitLens is robust, feature-rich, and highly customizable to meet your needs.
10,103,571 installs
Average Rating: 4.8 out of 5.
17. npm Intellisense
npm Intellisense is a Visual Studio Code plugin that autocompletes NPM modules in import statements.
3,295,873 installs
Average Rating: 4.6 out of 5.
18. Path Intellisense
Path Intellisense is a Visual Studio Code plugin that autocompletes filenames. This helps in reducing the time taken to type the file paths and also helps in reducing errors related to wrong paths.
5,133,441 installs
Average Rating: 4.8 out of 5.
19. WakaTime
WakaTime is an open-source VS Code plugin for metrics, insights, and time tracking automatically generated from your programming activity. You can see the time spent on each programming language, find the time you spent per feature/commit, and you can get fully automatic reports via email.
475,008 installs
Average Rating: 4.4 out of 5.
Top comments (0)