Top 5 Must-Have Visual Studio Code Extensions

Our team at DigiMantra Labs consists of many developers, but it has been dominated by frontend developers after the rising popularity of various JavaScript libraries like AngularJS, React.js, and others. We have moved to Microsoft Visual Studio Code and have long forgotten Sublime Text, but it's a little secret that we still have developers that like "Dreamweaver." Yes, they do exist!

During one of our workshops, “Learn & Rise,” we discusses the various extensions that we use every day to make our lives easier. I collated them all and I'm going to share the top five VSC extensions that our developers use.

1. GitLens — Git, Supercharged

GitLens is a super tool if you are working on a project that involves multiple team members. It lets you peek into the last revision of the code precisely from the line where your cursor is. Sleek, right? You can view the code author, when was it written, and directly hop onto that particular commit from within the VSC interface. It is a really powerful tool one must have.

2. ESLint/TSLint

This extension lets you integrate ESLint into Visual Studio Code. However, your project must have ESLint installed using the node package manager, or it can be installed globally by a simple command: npm install -g eslint. It works out-of-the-box to lint your code while you type in the editor. If you are working in TypeScript, you should also install TSLint. Again, you need to make sure that it is installed on your computer or globally.

3. CSS Peek

CSS Peek is a great tool if you keep forgetting what was a CSS class was used for. However, that could also mean that your CSS class names are not meaningful, or you have written too much "unmaintainable" code. Still, this is sure going to be handy if you are viewing/rewriting someone else’s code. Again, this can be useful if you are working with a large team and have a large codebase to work with.

4. Path Intellisense

Path Intellisense helps you include filenames or autocomplete them. This is a great tool if you want to type less for difficult filenames and make sure you always include the correct files.

5. Debugger for Chrome

Debugger for Chrome is a great tool if you use a debugger in VSC. It allows you to launch an instance of Chrome navigated to your app, or it can attach to a running instance of Chrome. Using the URL parameter, you tell VSC which URL to either open or launch in Chrome.

These are a few tools that our team members use. The list is very extensive and it really depends on one’s choice. We will be sharing more Visual Studio Code hacks and tips in the coming days.

Stay Digified!