Our team at DigiMantra Labs consists of many developers, but it is dominated by Frontend developers after the rising popularity of various Javascript libraries like Angular.js, React.js, and others. We have moved to Microsoft Visual Studio Code and have long forgotten Sublime Text, but a little secret that we still have developers that like “Dreamweaver”. Yes, they do exist 🙂

During one of our workshops “Learn & Rise”, we decided to discuss the various extension that we use every day to make our lives easier. And I collated them all and going to share the top 5 visual 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 would let you peek into last revision of the code and precisely from the line where your cursor is it, sleek, right? You can view the code author, when was it written and can directly hop onto that particular commit and all that from within Visual Code interface. It is a really powerful tool and one must have.

[button-green url=”https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens” target=”_blank” position=”center”]Check GitLens[/button-green]

2. ESLint / TSLint

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

[button-green url=”https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens” target=”_blank” position=”center”]Check ESLint[/button-green][button-green url=”https://marketplace.visualstudio.com/items?itemName=eg2.tslint” target=”_blank” position=”center”]Check TSLint[/button-green]

3. CSS Peek

Css Peek is a great tool if you keep forgetting what was the CSS class used for. However, it also means that your CSS class names are not meaningful or you have written too much “unmaintainable” code. But 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.

[button-green url=”https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens” target=”_blank” position=”center”]Check CSS Peek[/button-green]

4. Path Intellisense

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

[button-green url=”https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense” target=”_blank” position=”center”]Check Path Intellisense[/button-green]

5. Debugger for Chrome

Debugger for Chrome is a great tool if you use the debugger in Visual Code. 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 VS Code which URL to either open or launch in Chrome.

[button-green url=”https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome” target=”_blank” position=”center”]Check Debugger for Chrome[/button-green]

 

These are very 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 code studio’s hack and tips on our block in the comings days. Do not forget to follow us on Twitter, Facebook to read our posts.

 

Stay Digified!!
Sachin Khosla