Visual Studio Code is a lightweight but powerful source code editor for Windows, Mac and Linux. VS Code provides support for most common programming languages, including support for syntax coloring, auto completion, error checking, linting and debugging of applications written in JavaScript.
VSCode has lots of extensions available that can be used to improve the developer experience even more. Some of the extensions you may want to look into are:
Import Costs
Your website is getting slow because you have imported too much of unnecessary and large files?
Download Import Costs which will tell you about the size of the file that is being imported so that you can optimize it on the spot.
Better Comments
Comments are a very important part of the code even though the compiler avoids it we as developers can’t. Better comments allow you to write dev friendly comments, with a color scheme attached to it.
Highlight Matching Tag
I know it is not exactly for the Javascript code but it is very useful when you write HTML or JSX.
Highlight Matching Tag allows you to keep the track of the matching tags making it easier for you to code and debug.
Javascript (ES6) Code Snippets
No need to mention that JavaScript is the core of web development. There are lots of code snippets that we used on a daily basis and this extension helps you by not writing that repetitive code again and again.
It provides JavaScript, TypeScript, Vue, React, and HTML code snippets. I personally believe this is a must-have extension for web development.
Link: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
You can install it by searching the name on the extension section of the visual studio code.
CSS Peek
As its name suggests, this extension lets you jump to the CSS code using classes and IDs.
Link: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
You can install it by searching the name on the extension section of the visual studio code.
This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.
It also allows you to quickly jump to the right CSS code if you know the class or ID name.
Auto Close Tag
This extension automatically adds the closing tag of HTML and XML. Thank me later 🙂
Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
You can install it by searching the name on the extension section of the visual studio code.
REST Client
Testing API and integration to the UI is a huge part of web development. I am sure you have done it so many times.
I often used REST clients such as Postman to test my APIs. Using this extension, we can test APIs and view their response directly in the visual studio code.https://giphy.com/embed/Swr9ld1UnphiJkR7lS
via GIPHY
Link: https://marketplace.visualstudio.com/items?itemName=humao.rest-client
You can install it by searching the name on the extension section of the visual studio code.
ESLint
If you don’t lint your code then it’s high time you do. Once you start using linting, it will make your life so much better and easy. You won’t be spending hours debugging small syntactic errors or a wrong variable name.
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.
Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
You can install it by searching the name on the extension section of the visual studio code.
Before installing ESLint in visual studio, install it as a global package first.npm install -g eslint
Prettier – Code formatter
This extension performs the formatting of the JavaScript, CSS, and HTML code.
Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
You can install it by searching the name on the extension section of the visual studio 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.
You type the name of the file in statements and it will search and give you suggestions.
Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
You can install it by searching the name on the extension section of the visual studio code.
GitLens
We use Git almost every day of our life. GitLens is the visual studio code plugin to supercharge git capabilities.
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.
Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
You can install it by searching the name on the extension section of the visual studio code.
Project Manager
Do you work on multiple projects and switch back and forth? I know I do and the project manager has been a savior to manage multiple projects in visual studio code.
Link: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
You can install it by searching the name on the extension section of the 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.
Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
You can install it by searching the name on the extension section of the visual studio code.
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.https://giphy.com/embed/f9S2xIFYN2y8yN1qHa
via GIPHY
Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
You can install it by searching the name on the extension section of the visual studio code.
Better Comments
This extension helps you to create more human-friendly and easy-to-read comments.
Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
You can install it by searching the name on the extension section of the visual studio code.
Prettier
Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.
You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.
Tired of formating your code manually? Cool. Install Prettier.
Prettier is an opinionated code formator and it doesn’t care how you write your code. It just formats your code in a neat and tidy manner.
Code time
This extension tracks your development time and provides you with useful stats such as how many hours you have code today etc.
It’s pretty useful to keep track and see the progress. This is not strictly for web development only, anyone can use this extension.
Link: https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode
You can install it by searching the name on the extension section of the visual studio code.
Settings Sync
I use a different machine for my work and personal use. I use visual studio code in both machines, however, I don’t want to repeat the same steps to configure the editor every time.
Enters Setting Sync extension. It creates and stores your configuration in Github gist and synchronizes wherever you want. Simple and awesome!
Link: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
You can install it by searching the name on the extension section of the visual studio code.
Polacode
Like code snippet like this?
Then this extension is for you. We can use this extension to create a beautiful code polaroid and share it.
Link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode
You can install it by searching the name on the extension section of the visual studio code.
Bracket Pair Colorizer
Nesting code can be very messy and no matter how much you try to avoid it you will have nested brackets lying in your codebase.
Bracket Pair Colorizer allows you to see when your if condition or a function ends in a very clean manner.
Remote – SSH
The Remote – SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.
You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.
Bracket Pair Colorizer
The clue’s in the title, but Bracket Pair Colorizer gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together.
Custom bracket characters can also be configured, and you can add a background color to the active scope too.
Auto Rename Tag
While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.
The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.
edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.
GitLens
GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).
GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.
Git History
Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.
The extension is quite comprehensive as well. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.
Conlusion
Visual Studio Code is a lightweight but powerful source code editor. Since it has become my main go-to editor since I started using VS Code, I wanted to compile a list of all the extensions that I use to make development easier.