If you are a web developer and not living under a rock for the last couple of years, you would have come across the name VS Code. VS Code is by far the hottest code editor right now with an ever-growing fan base. With around 1000 contributors and around 83,000 stars, it is one of the most active projects on GitHub.
So what is that has made the VS Code so popular in a short amount of time?
A lot of things works for VS Code but some notable ones are as follows:
- Open Source and Free
- Lightweight and Fast. You really need to try hard to slow it down.
- Multi-platform: Windows, Linux, and macOS
- Thousands of extensions are available through the Marketplace
- Regular monthly updates
I have been using VS Code for some time now and the things that impresses me the most are its speed and flexibility. You can transform it from being a simple code editor to an IDE that supports all tools and languages to build a modern web app.
In this article, I have listed some of the plugins that I use regularly in the VS Code. These plugins will help you save you time and effort while creating modern web applications. While this list will make more sense to developers who create web apps using TypeScript/JavaScript, some of the plugins can be used irrespective of the language you use.
Settings Sync
Before you start customizing and personalizing your VS Code with extensions, themes, settings, keybindings etc, this is the place to start. Settings Sync extension will help you save all the customization you do using GitHub Gist and restore all these settings when needed. This way you are sure that when you install another copy of the VS Code, you don’t have to start from scratch. You can even share your settings with other people in your team. After you set up the extension with your GitHub account, use the two commands to upload and download the settings.
Upload Key : Shift + Alt + U
Download Key : Shift + Alt + D
Debugger for Chrome
Most of us like our console.log method for debugging JavaScript code, but there are more efficient ways to do that. Debugger for Chrome is an official extension from Microsoft that lets developers debug their code right inside VS Code using the Chrome browser. Most of us love testing our web apps using Chrome and its DevTools. This extension takes it a step further and makes it an awesome experience.
Live Server
The Live Server extension will help you launch a local development server that supports live reload feature for static and dynamic pages. It supports a single click launch from the status bar. Click on the Go Live button to turn the server on/off. This is very helpful when you open the editor and browser window side-by-side and see changes reload automatically when you save the code.
ESLint
The ESLint extension for VS Code is one of the most popular extensions, with over 24 million downloads. The ESLint library is very popular among JavaScript developers, and this extension brings it to the VS Code editor and integrates seamlessly. Before you use the extension, the ESLint library has to be installed locally or globally. You can do so by running npm install ESlint in the workspace folder for a local install or npm install -g ESlint for a global install.
Visual Studio IntelliCode
Visual Studio IntelliCode was introduced in the Visual Studio 2019 IDE as an AI-assisted development feature. This feature was then added to Visual Studio 2017 and VS Code as an extension. Right now, it supports Python, TypeScript/JavaScript, and Java in VS Code. This extension provides AI-assisted IntelliSense by showing recommended completion items for your code context. It shows recommended items at the top of the completions list, marked with a star icon in front for easy visualization. These recommendations are based on thousands of high-quality, open-source projects on GitHub, each with high star ratings.
Git Lens
Git Lens is another very popular extension for VS Code, with over 26 million downloads. Although VS Code has some inbuilt Git capabilities, most teams would love to have more features and insights. Git Lens brings in tons of features on top of what is provided by default. It helps you better understand your code and explore its history to see how it evolved. It is highly customizable, and teams can use it as per their needs. With such a vast list of features, it can be a little overwhelming at first, but as you get used to it, you will feel at home using it.
You can also look at another popular Git extension, Git History. If you are an individual developer, this may be a better choice.
Prettier
A well-formatted code is easier to read and maintain. Formatting code manually takes time and it helps if this task is automated. This is where Prettier comes in handy. Prettier is an opinionated code formatter that makes it easy for developers to format code in a consistent manner. You can set it up so that each time you save a file, it is automatically formatted. This way you don’t even have to remember to run a command each time you want to format your code. If you are working as part of a team, you can share this extension with other developers so that the code formatting is consistent across the team. With over 12 million downloads it is one of the popular extensions for VS Code.
You can also check out Beautify. It is also a very popular extension with similar functionality.
Bracket Pair Colorizer 2
As the name suggests this extension colors a pair of matching brackets to make it easier to identify the scope. It is even more helpful in the situation where you have multiple levels of nested code. At each level, the brackets use different color and this makes it super easy to identify the code between those brackets. You can override the default colors used by the extension and define the colors you want. The extension can also be customized to show active scope brackets in the gutter of the editor.
TODO Highlight
It happens to the best of us. We add TODOs/FIXME annotations to our code and later forget to review them before pushing it to production. This mostly happens because these annotations get mixed up with other comments we add to our code. TODO Highlight, as the name suggests, highlights these annotations in our code to make them stand out from the rest of the comments and grab our attention.
Todo Tree
This extension can be used in tandem with TODO Highlight. It searches your workspace for annotations like TODO and FIXME and lists all of them in the explorer pane in a tree view. This makes it easier to review all the annotations you have added to your code. Clicking on an item in the tree will open the file and place the cursor on the line containing the TODO or FIXME.
Conclusion
There are thousands of extensions available for VS Code, and by no means does the above list cover the best of them. I personally use all of these extensions and recommend giving them a try. The extensions one would prefer to use depend on the type of work one does and the programming language they use. I hope this list will help developers who are new to VS Code and who mostly do front-end development.
