Great VSCode extensions for JS Developers
Tags: vscode, javascript
Published: 2021-09-21 06:27:36

### Hey everyone, welcome to my first post here on DEV Community!


In this post I will be talking about some great VSCode extensions for JavaScript Developers. 

**NOTE:** This list does not include extensions meant only for a single framework/library.

So let's get started!!!

### Snippet extensions

These extensions provide code snippets.

#### 1. JavaScript (ES6) code snippets

This extension provides code snippets for the following languages:

- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
- HTML (.html)
- Vue (.vue)

**Note:** The snippets provided by this extensions contain semicolons (`;`).

<a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" target="_blank">Extensions on VSCode Marketplace</a>

#### 2. JavaScript (ES6) code snippets in StandardJS style

This extension provides the exact same snippets for the same languages as the extension mentioned above, the only difference being that the snippets do not contain semicolons (`;`).

<a href="https://marketplace.visualstudio.com/items?itemName=jmsv.JavaScriptSnippetsStandard" target="_blank">Extension on VSCode Marketplace</a>

### Syntax Highlighting Extensions

These extensions highlight the code according to their syntax (does that make sense ^^').

#### 1. Bracket Pair Colorizer 2

This extension highlights matching brackets with different colors, helping you identify which bracket belongs to which block.

<a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" target="_blank">Extension on VSCode Marketplace</a>

#### 2. DotENV 

This extension provides syntax highlighting for `.env` files.

<a href="https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv" target="_blank">Extension on VSCode Marketplace</a>

### Linter Extensions

These extensions lint your code.

#### 1. ESLint

This extension use the [ESLint](https://eslint.org/) library to lint your code. It's also the most used linter.

<a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank">Extension on VSCode Marketplace</a>

#### 2. JSHint

This linter uses the [JSHint](https://jshint.com/install/) library to lint your code. 

<a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint" target="_blank">Extension on VSCode Marketplace</a>

### NPM Extensions

These extensions help with NPM (Node Package Manager).

#### 1. npm 

This extension uses `package.json` to validate installed packages. If anything is missing or versions are mismatched, the extension will provide you with clickable options to fix the issue.

<a href="https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script" target="_blank">Extension on VSCode Marketplace</a>

#### 2. npm IntelliSense

This extension provides auto-completing npm modules in import (`var`, `let`, `const` and `import`) statements.

<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense" target="_blank">Extension on VSCode Marketplace</a>

### Other Useful Extensions

These extensions don't fit under any heading in this list but they are quite useful.

#### 1. Prettier

This extension is an opinionated code formatter which formats JS, TS, and CSS code. 

<a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank">Extension on VSCode Marketplace</a>

#### 2. Path IntelliSense

This extension provides path completion for importing files. Works in HTML and CSS files as well.

<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank">Extension on VSCode Marketplace</a>

#### 3. Live Server

This extension launches a local development server with live reloading for static as well as dynamic pages.

<a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank">Extension on VSCode Marketplace</a>

#### 4. Thunder Client

This extension is basically a Postman built into VSCode via an extension.

<a href="https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client" target="_blank">Extension on VSCode Marketplace</a>

##### Alright, that ends the list. 

Thanks for sparing time to read this whole post. Appreciated.

#### Socials

[Discord](https://discord.com/users/853865815080960011)
[GitHub](https://github.com/nightmxrethedev)
[Instagram](https://instagram.com/insidiousthedev)

Thanks!!!