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 available through 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.
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
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.
Visual Studio IntelliCode
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 the history to see how the code 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.
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.
It happens to the best of us. We add TODOs/FIXME annotations to our code and later forget to review them before pushing 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 appear standout from the rest of the comments to grab our attention.
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.
There are thousands of extensions available for VS Code and by no means, the above list covers the best of them. I personally use all of these extensions and recommend to give them a try. The extensions one would prefer to use depends 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.
Do let us know about your favorite VS Code extension in the comments section below.