Have you spent all that time trying out various extensions to figure out which one suits you best?
Probably the best code editor out there, Visual Studio Code has a marketplace full of extensions. It is a popular lightweight code editor that has the ability to offer great stability and performance. Here are 7 top VS code extensions that might help in boosting the productivity of a developer and make VS Code experience a lot better.
VS Code Extensions
1. ESLint:
One thing that JavaScript developers use extensively to verify their code quality is ‘linters’. Linters are these exceptional tools that dig out certain classes of bugs and detect codes that are difficult to maintain. One of the most popular and highly recommended lint extension is ESLint. ESLint in VS Code has nearly 12 million downloads. It supports various styles including Airbnb, Google, and Standard.
The main idea behind creating ESLint was to enable developers to create their own linting rules. These rules can follow the same pattern, both for the tests as well as for the rules themselves. ESLint is written using Node.js in order to provide a rapid runtime environment and effortless installation via npm.
2. GitLens:
Another excellent and very useful VS code extension is GitLens. It helps in understanding code better and lets developers have a glimpse into when and why a code block or line was changed. This extension provides features like activity heatmaps, commit search, code authorship, GitLens Explorer, and history. GitLens works best for those who are working on any repository which has more than one contributor.
3. Quokka.js:
Quokka.js is an amazing tool used for testing, debugging, and prototyping. This VS code extension immediately runs the code as developers type and presents several execution results in the code editor. To operate the extension after its installation, just press Ctrl/Cmd(⌘) + Shift + P that will display the editor’s command palette and type Quokka to access the list of the available commands. After that, select and start the New JavaScript File command. Pressing (⌘ + K + J) can also open the file directly.
4. Prettier:
With almost 4 million downloads, Prettier is a VS code extension that helps developers with the formatting of JavaScript, CSS, and TypeScript code with the integration of ESLint. In order to enable ESLint integration, go to Preferences → Settings, and add this configuration object:
{
"prettier.eslintIntegration": true,
}
Prettier also colors keywords to make it easy to read the code.
5. Live Server:
The Live Server extension creates a development local server for static and dynamic pages with live reload feature. It comes with a go-live button on the toolbar that starts or stops the server by a single click.
6. REST Client:
REST Client, another powerful extension, allows sending HTTP requests and viewing the responses right away in VS Code without using a CURL program or a browser for REST API testing. All that is required to do is to create a new tab and paste in the raw HTTP request (keeping in mind that the tab’s Language Mode is set to either Plaintext or HTTP). A “Send Request” button will pop up above the HTTP request enabling to execute the request as it is. There are no other modifications required further to tell REST Client how to format or parse.
7. Snippets:
This impressive VS code extension boasts of having more than 2 million downloads. While using a JavaScript file or other files like TypeScript, React, HTML, etc., the extension provides JavaScript code snippets in ECMAScript 6 syntax.
The above mentioned VS code extensions are obviously not the only extensions that JavaScript developers seek. The list is quite long that offers developers numerous extensions to play with. We would like to know what your favorite extensions are and what other extensions you would recommend us to try!
Source: Hackernoon (Medium), Bit And Pieces (Medium), SitePoint, Full-Stack Engine
Rachit Agarwal
