,

10 Best VS Code extensions for JavaScript

/

A vanilla code editor like Visual Studio Code (VS Code) gets you far in development. But if you want to write code faster and make fewer mistakes, then you need to make use of its vast library of extensions that are available in the marketplace.

There are thousands of different VS Code extensions available for your language of choice e.g. JavaScript, TypeScript, or Python. So it becomes really tough to find the right extension without trying them all.

I’ve tested more than hundreds of extensions for JavaScript for this blog post and curated my findings to a list that contains the 10 best VS Code extensions for JavaScript to save your time.

Here are the 10 best VS Code extensions for JavaScript:

What are the best VS Code extensions for JavaScript?

Here are my top picks for the best vs code extensions for JavaScript that you should try out in your code editor.

1. JavaScript (ES6) code snippets

This VS Code extension adds a whole bunch of JavaScript code snippets that are easily accessible using shortcuts.

JavaScript code snippets VS Code extension showing the creation of a new Promise

Often times you’ll find that you are re-using various code blocks in different JavaScript projects by copy-pasting it from project to project. This can be rather time-consuming, therefore this extension can improve your productivity by having a large list of various JavaScript code snippets available using simple keyboard shortcuts.

As an example, the table down below shows which JavaScript methods are available including the shortcut name in this extension.

ShortcutContent
fre→forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→for … of loop for(const item of object) {}
fin→for … in loop for(const item in object) {}
anfn→creates an anonymous function (params) => {}
nfn→creates a named function const add = (params) => {}
dob→destructing object syntax const {rename} = fs
dar→destructing array syntax const [first, second] = [1,2]
sti→set interval helper method setInterval(() => {});
sto→set timeout helper method setTimeout(() => {});
prom→creates a new Promise return new Promise((resolve, reject) => {});
thenc→adds then and catch declaration to a promise .then((res) => {}).catch((err) => {});
Various JavaScript methods that can be triggered using the shortcut + tab key

In total, you’ll find more than 44 code snippets that’ll improve your productivity in JavaScript.

2. ESLint

ESLint is a linter that statically analyzes your code to find problems based on a set of pre-configured rules. Normally you run ESLint through your terminal to check your code, but now you get immediate feedback by running ESLint as a VS Code extension.

VS Code ESLint extension showing a demo on an error message
VS Code ESLint extension showing a demo on an error message

You can configure the extension to automatically fix the issues when you hit save in the VS Code editor. Here are the settings that I’m using for this extension, so it will automatically fix the ESLint findings:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.run": "onSave",
  "eslint.validate": [
    "javascript"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],

3. DotEnv

The DotEnv VS Code extension adds syntax highlight to .env variables. In my projects, I make a lot of use of .env variables. So having syntax highlight on these files makes me less prone to mistakes and allows me to read the environment variables a lot quicker compared to a file with only grey text.

dotenv vscode extension showing syntax highlight on an .env.example file
dotenv vscode extension showing syntax highlight on an .env.example file

4. JavaScript Booster

Javascript booster is an extension that adds various quick fixes when you’re editing code in JavaScript. The default “quick fix” helper in VS Code isn’t really usefull and contains a limited set of fixes.

Enabling this extension adds 33 quick fixes for the most common issues like fixing declarations e.g. converting var/const to let or converting shorthand arrow functions to statements.

JavaScript Booster vscode extension showing a “quick fix” action to convert function

A quick fix can be triggered when hovering over the function and pressing:

CMD + . -> triger quick fix

5. Prettier

Prettier is a code formatter and enforces a consistent style that you’ve preconfigured in your project. Having a consistent style can greatly benefit team productivity since PRs can focus on the code itself instead of discussion surrounding the code style.

To use Prettier in order to format your code, you can run the following commands

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

You can also decide to use Prettier as the default formatter for a specific language. That means when you run the format command in VS Code, it will automatically use Prettier. To enable it, add the following to your VS Code settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

6. Tailwind CSS IntelliSense

Another great extension that adds auto-complete, but this time for Tailwind CSS. If you’re doing front-end development, there is a big chance you’re using CSS. Tailwind is a popular framework amongst CSS developers and having this extension enabled improves your experiences by adding great features such as autocomplete, syntax highlighting, and linting.

Example of the Tailwind CSS IntelliSense VS Code extension

As you can see in the demo, the extension will automatically try to autocomplete Tailwind utility classes for you.

7. Sort Lines

The VS Code extension: sort lines does what the name suggests which is sorting lines in your files. When creating lists in JavaScript for example it can be a real-time-saver if you can automatically sort items alphabetically for instance. You can sort your code in the following ways:

CommandSort lines functionality
sortLinesAscending, case-sensitive (default)
sortLinesCaseInsensitiveAscending, case-sensitive
sortLinesCaseInsensitiveUniqueUnique ascending, case-sensitive
sortLinesReverseDescending, case-sensitive
sortLinesLineLengthLine length ascending
sortLinesLineLengthReverseLine length descending
sortLinesVariableLengthVariable-length ascending
sortLinesVariableLengthReverseVariable-length descending
sortLinesNaturalSorts alphabetically except groups with multi-digit numbers
sortLinesUniqueRegular character code keeping only unique items
sortLinesShuffleShuffles output
removeDuplicateLinesRemoves duplicate lines
Table displaying all sort lines vs code extension functionalities

To invoke the Sort lines functionality type the following command

CMD + Shift + P -> Sort Lines

This will automatically list the options to sort your lines. My most used sort function when I code in JavaScript is Natural which Sorts alphabetically but groups multi-digit numbers.

8. GitLens

If you’re developing JavaScript projects, then there’s a big chance you’re using git. The extension: GitLens improves the git functionality in VS Code. A couple of notable features that are worth mentioning are:

  • git blame – shows who modified each line within a file
  • git changes – highlights any local (unpublished) changes or lines changed by the most recent commit
  • git revision navigation – shows the git history of a file and allows you to effortlessly navigate it
Gitlens VS Code extension example of git blame

9. Git Graph

The Git Graph VS Code extension is unmissable if you’re a heavy git user. The extension allows you to view your git commit history as a graph. You’ll get an instant overview of all previous commits, branches, tags, and users who committed the changes.

Git Graph VS Code extension example of the graph view

Additionally, it grants the user the ability to perform git actions such as commit, merge, revert, checkout, rebase, rename and reset branches. Having the ability to do this from a single overview within VS Code improves productivity tremendously and doesn’t get you out of your flow.

10. GitHub Copilot

The GitHub Copilot VS Code extension couldn’t be left out on this list. This is essentially an AI pair programmer that gives suggestions on what it thinks you’re going to write in your code. It can even write complete methods and classes for you.

But how is the AI able to do that? GitHub Copilot has been trained on billions of lines of public code on GitHub using Open AI (machine learning). So it has been trained to recognize patterns and with that knowledge, it’s able to determine what the developer is going to create in code.

In my experience, I notice that when the JavaScript projects grow bigger over time, the better GitHub copilot becomes in predicting what kind of code I want to write. See the following example to get an understanding of how powerful AI pair programming can be.

GitHub Copilot VS Code extension example of predicting a function

Conclusion

To summarize, as a JavaScript developer it can be a daunting task to find the right VS Code extensions to improve your workflow and productivity.

Therefore I created this list containing the 10 best VS Code extensions for JavaScript including JavaScript (ES6) code snippets, EsLint, DotEnv, JavaScript booster, Prettier, Tailwind CSS IntelliSense, Sort lines, Git Lens, Git Graph, and GitHub Copilot.

You’re daily productivity and focus will improve and next to that your code is less prone to bugs because of the guardrails and highlights that are present in these VS Code extensions.

Danny Steenman

Is a Principal Cloud Consultant with a background in DevOps Engineering and thorough hands-on experience in architecting and building highly scalable distributed systems on AWS Cloud using Infrastructure as Code.

A prominent leader who is passionate about sharing AWS technical expertise by writing technical articles.