11 Visual Studio Code Plugins for Better Development
Visual Studio Code (VS Code) is a free source-code editor made by Microsoft. It is refined and optimized for building and debugging modern web and cloud-based applications. Installing a plugin/extension to VS Code allows you to add languages, themes, debuggers, and tools to support your development workflow.
Earlier I developed my application using Sublime text editor but later I switched to VS Code editor. My experience so far in using the VS Code has been very positive. I found lots of good plugins that helped me improve productivity, quality, readability, and maintainability of my source code. There are many different types of plugins available.
Every programmer will have their own preference of plugin to use based on what area are they focussing to improve on.
Below are some plugins which I recommend you give it a try.
1.) Gitlens
Very powerful plugin. Allows you to view code authorship, blame, recent changes directly on VS Code editor. Can be integrated with JIRA, trello, slack. This is the most commonly used plugin.
2.) JavaScript (ES6) Code Snippets
This extension contains code snippets for javascript in modern es6 syntax. (Snippet is a programming term for small portion of re-usable set of code).
You can try the following handy commands:
- req: require package to const const packagename = require (‘packagename’)
- mde: default module.exports exports module.exports = { };
- fre: forEach loop in ES6 syntax array.forEach(currentItem => { })
- nfn: creates a named function const add = (params) => {}
- clg: console log object with name console.log(object)
3.) Quokka.js
It is a rapid prototyping playground in your editor. Runtime values are updated and displayed in your IDE as you type. It compiles and executes your code immediately displaying results or error.
For some, it could be a distraction, but for me, it really helped writing quality code.
4.) ESLint
Cannot emphasize how important it is to format and document your code. Not only it increased code maintainability but also easier for any other developer to read and understand the logic behind. ESlint helps to auto-format your code.
This extension uses the config in the local folder version. If it is not found then looks into the globally installed version.
5.) Rest Client
This extension allows you to send HTTP request and view the response in VS Code directly. IT supports options like GET/POST, cURL commands as well as GraphQL.
Although I personally like to use postman for testing all API’s but this option is also not that bad to try.
6.) Bracket Pair Colorizer
As the name suggests, it allows matching brackets to be identified with colors.
If you have just started developing than I highly recommend using this extension.
7.) Better Comments
The Better Comments extension will help you create more human-friendly comments in your code. With this extension you will be able to categorise your annotations into diffract sections as below:
- Alerts
- Queries
- TODO
- Highlights
- Any commented code
8.) NPM Intellisense
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into diffract sections as below
9.) View Node Package
This extension allows you to instantly switch from VS Code to the repository or documentation of the respective package.
10.) DOTENV
This extension supports syntax highlighting for environment settings (.env) files
11.) Debugger for Chrome
Works on the web application running locally on your machine via VS studio. This extension operates in 2 modes — it can launch a new instance of chrome or it can attach to the running instance of Chrome. Additionally, you can set breakpoints, watches, and see console logs that are set while executing each step of your code.
Thank you for reading this article. If you use any more Javascript extensions which are helpful while programming, kindly share comments in the comment section below so that others reading this article can benefit along with me.
