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 must-have VS Code extensions for web development to save your time.
Here are the 10 best VS Code extensions for JavaScript:
Table of Contents
What are the best VS Code extensions for JavaScript?
Here are my top picks for the best vs code extensions for web developers that use JavaScript which you should try out in your vscode editor.
1. JavaScript (ES6) code snippets
This VS Code extension adds a whole bunch of JavaScript code snippets that are easily accessible using shortcuts.
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.
| Shortcut | Content |
|---|---|
| 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) => {}); |
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.
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.
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.
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.
A quick fix can be triggered when hovering over the function and pressing:
CMD + . -> triger quick fix5. Prettier
Prettier is simply the best code formatter for vscode that is currently available and that is not a surprise as it has over 36 million installs!
This code formatter 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 SelectionYou 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.
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:
| Command | Sort lines functionality |
|---|---|
| sortLines | Ascending, case-sensitive (default) |
| sortLinesCaseInsensitive | Ascending, case-sensitive |
| sortLinesCaseInsensitiveUnique | Unique ascending, case-sensitive |
| sortLinesReverse | Descending, case-sensitive |
| sortLinesLineLength | Line length ascending |
| sortLinesLineLengthReverse | Line length descending |
| sortLinesVariableLength | Variable-length ascending |
| sortLinesVariableLengthReverse | Variable-length descending |
| sortLinesNatural | Sorts alphabetically except groups with multi-digit numbers |
| sortLinesUnique | Regular character code keeping only unique items |
| sortLinesShuffle | Shuffles output |
| removeDuplicateLines | Removes duplicate lines |
To invoke the Sort lines functionality type the following command
CMD + Shift + P -> Sort LinesThis 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
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.
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). 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.
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.
