Turn Visual Studio Code Into A Top-Notch JavaScript IDE With These 25 Extensions
Tags: beginners, vscode, javascript, webdev
Published: 2022-01-09 22:59:05

**[Visual Studio Code](https://code.visualstudio.com/) is a great code editor** that comes with JavaScript and TypeScript features like basic refactoring out of the box. However, its true strength is an **outstanding [extension marketplace](https://marketplace.visualstudio.com/)**. There are extensions for almost anything you might want to do in an IDE (Integrated Development Environment), and they can make VS Code many times better.

Unfortunately, **it can be time-consuming to find the right extensions and configure VS Code**. Many developers prefer the out-of-the-box experience that IDEs such as [Webstorm](https://www.jetbrains.com/webstorm/) provide. This blog post shows how Visual Studio Code extensions can help you enhance the IDE experience for JavaScript. It covers:

* [Code Completion and Snippets](#code-completion-and-snippets)
* [Linting, Spell Checking, and Hints](#linting--spell-checking--and-hints)
* [Formatting, Code Actions, and Refactoring](#formatting--code-actions--and-refactoring)
* [Editor Support for Additional File Types](#editor-support-for-additional-file-types)
* [Organizing Comments, TODOs, and Bookmarks](#organizing-comments--todos--and-bookmarks)
* [Testing](#testing)
* [Debugging](#debugging)
* [Version Control](#version-control)
* [Database, REST API & Docker Clients](#database--rest-api---docker-clients)

You can conveniently install the **25 extensions that convert Visual Studio Code into a full-blown JavaScript IDE** with the **[JavaScript IDE Extension Pack](https://marketplace.visualstudio.com/items?itemName=p42ai.vscode-javascript-ide-extension-pack&ssr=false)**. [Icon or color themes](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs) and [keyboard shortcut maps](https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Installs) are not covered here, nor are they included in the extension pack because they depend much more on personal preferences than most extensions. 

Let's go into the different features and see what's possible in VS Code with just a few extensions:

## Code Completion and Snippets

Code completion (IntelliSense) features can make writing code faster and easier. Visual Studio Code provides [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) for JavaScript and TypeScript by default and contains powerful [Emmet support](https://code.visualstudio.com/docs/editor/emmet) for expanding snippets.

One of the latest trends in code completion is AI assistants.   However, my experience with AI code completion assistants such as [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) was mixed so far, and therefore I've not included them in the extension pack, but they might work great for you.

Here are a few snippet extensions that can boost your productivity:

### [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
![ES7 React/Redux/GraphQL/React-Native snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4dxk7digdserdxb2xqe.png)

The [ES7 snippets extension](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) provides many expandable everyday snippets. For example, defining imports and exports, creating methods and loops, and returning Promises. The extension also contains many snippets for [React](https://reactjs.org/) and [GraphQL](https://graphql.org/).

### [Emmet Live](https://marketplace.visualstudio.com/items?itemName=ysemeniuk.emmet-live)
![Emmet Live](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td61cpf60h2z339udxtk.png)

With the [Emmet Live extension](https://marketplace.visualstudio.com/items?itemName=ysemeniuk.emmet-live), you can preview your [Emmet](https://emmet.io/) output while crafting the Emmet abbreviation. You can start it with the `Emmet Live` command.

### [Vscode-Random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random)
![vscode-random](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc06tb8xe7aenehfpax0.png)

When writing tests or creating mockups, it often takes time to come up with good fake data. You can use the [vscode-random extension](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random) to generate many kinds of random data, such as numbers, locations, emails, IPs, names, and datetime values.

## Linting, Spell Checking, and Hints
The best time to get feedback on your code is while editing, i.e., when you can quickly change the code and learn as you go. By integrating linting, spell checking, and other suggestions into your editing process, you avoid some of the more extended pre-commit checks and pull request round trips.

### [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
![Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ag00plbgi58wj5o18sw.png)

It is easy for typo and small spelling errors to slip into variable and function names, strings, comments, etc. The [Code Spell Checker extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) highlights those mistakes and can often provide the correct spelling as a fix. 

### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
![ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/022bjf9l85lbsw274gze.png)

[ESLint](https://eslint.org/) is the most commonly used JavaScript linter. It helps you "find and fix problems in your JavaScript code." ESLint is very extensible and configurable, and many teams have their own custom rules for their projects. The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) shows errors and warnings directly in your editor and lets you quick-fix them easily. You can also configure it to auto-fix any problems on save.

### [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
![Error Lens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpgmvq3f8rs06c2kiu3o.png)

The [Error Lens extension](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) highlights and displays errors, warnings, and information messages directly in the editor. With it, you don't need to take the extra step of finding out what the squiggly underlines mean - it is right in front of you. If the information gets overwhelming, you can easily toggle it on and off for different message types with the `Error Lens: Toggle...` commands.

## Formatting, Code Actions, and Refactoring
Visual Studio Code comes with [basic refactorings and quick fixes](https://code.visualstudio.com/docs/editor/refactoring) such as `Rename`, `Extract Method` and `Extract Variable`. The editing experience can be further enhanced with extensions:

### [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
Formatting code manually is very time-consuming and error-prone. With [Prettier](https://prettier.io/), the de-facto standard code formatter of the JavaScript world, you can format your code automatically. You can even configure the [Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to format the source code when you save it.

### [Change Case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
![Change Case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2w4f425xtnpgmozgu5g.png)

The [Change Case extension](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) adds a wide range of commands to change the case of the selected text, e.g., into camel case, snake case, Pascal case, etc. The commands all have the `Change Case` prefix.

### [P42 JavaScript Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)
![P42 JavaScript Assistant Quick Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu27t9384wsu8vb722wr.png)

The [JavaScript Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) that I've developed adds [60+ refactorings, quick fixes, and code actions](https://p42.ai/blog/2021-12-21/level-up-your-javascript-with-these-60-quick-fixes-for-vs-code) to VS Code. It contains React refactorings, ECMAScript modernizations, syntax and language element conversions, actions for logical expressions and control flow, and code cleanups.

## Editor Support for Additional File Types
When you work with JavaScript and TypeScript, there are many other relevant file types. Visual Studio Code already has editing support for [JSON](https://code.visualstudio.com/docs/languages/json), [HTML](https://code.visualstudio.com/docs/languages/html), [CSS](https://code.visualstudio.com/docs/languages/css), and [Markdown](https://code.visualstudio.com/docs/languages/markdown). The following extensions add more enhanced editor support:

### [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)
![npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10xy8p0qde8j4boyfx3r.png)

The [npm extension](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) validates the installed Node.js modules defined in `package.json` files.

### [SVG Preview](https://marketplace.visualstudio.com/items?itemName=simonsiefke.svg-preview)
![SVG Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmksumtc1donm876nq0f.png)

The [SVG Preview extension](https://marketplace.visualstudio.com/items?itemName=simonsiefke.svg-preview) does exactly that: show a preview for `.svg` files. You can pan and zoom the image in the preview, and it updates automatically when you edit the SVG source.

### [Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml)
![Even Better TOML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6wrnjw0yrjisc5i76zh.png)

[TOML](https://github.com/toml-lang/toml) is a configuration file format that aims to be simple and easily readable. The [Even Better TOML extension](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) adds full editor support, including syntax highlighting, folding, navigation, and formatting.

## Organizing Comments, TODOs, and Bookmarks
In larger development projects that last many years and involve many developers, staying organized around comments and TODO items becomes increasingly essential. The following extensions can help with that:

### [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26p0evfs6wjbpb7k9ydv.png)

The [Better Comments extension](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) shows different kinds of comments in different colors. It supports prefixes like `!`, `?`, and `TODO`.

### [Todo Tree](https://marketplace.visualstudio.com/items?itemName=gruntfuggly.todo-tree)
![Todo Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6zhrgyavtjayvdtsyq0.png)

TODOs and FIXMEs easily get forgotten about and lost. 
The [Todo Tree extension](https://marketplace.visualstudio.com/items?itemName=gruntfuggly.todo-tree) scans the files in your workspace for TODO and FIXME annotations and organizes them in a sidebar view. You can easily browse them by folder and revisit essential items that come to your attention.

### [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.bookmarks)
![Bookmarks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw6ijlz9esxmbezjy9g3.png)

With the [Bookmarks extension](https://marketplace.visualstudio.com/items?itemName=alefragnani.bookmarks), you can save and label important source code locations and organize them in a sidebar panel. This can be helpful when you are exploring a complex codebase or when you have locations that you return to frequently.

## Testing
Writing and running tests is a crucial development activity. 
In particular, unit tests that run in the IDE are helpful to get immediate feedback. The following extensions add test runner support to VS Code:

### [Test Explorer](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer)
![Test Explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uvu6i0rwbne5ysugqgg.png)

The Test Explorer is a set of extensions that integrate testing seamlessly into VS Code. Its [Test Explorer UI extension](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer) adds a side panel for running the tests and seeing the results, and the [Test Explorer Status Bar](https://marketplace.visualstudio.com/items?itemName=connorshea.vscode-test-explorer-status-bar) adds the number of tests to the status bar.

The UI components show the information produced by test adapters. Which adapter you need for testing depends on your testing frameworks. For JavaScript, testing adapter extensions for the following test frameworks are available:

* [Mocha](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter) *(included in extension pack)*
* [Jest](https://marketplace.visualstudio.com/items?itemName=kavod-io.vscode-jest-test-adapter) *(included in extension pack)*
* [Jasmine](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-jasmine-test-adapter)
* [Angular/Karma](https://marketplace.visualstudio.com/items?itemName=raagh.angular-karma-test-explorer)
* [AVA](https://marketplace.visualstudio.com/items?itemName=gwenio.vscode-ava-test-adapter)
* [TestyTs](https://marketplace.visualstudio.com/items?itemName=Testy.vscode-testyts-test-adapter)
* [React-scripts](https://marketplace.visualstudio.com/items?itemName=smarschollek.vscode-react-scripts-test-adapter)

Visual Studio Code has added native testing capabilities in version 1.59. You can enable them in the Test Explorer by setting `testExplorer.useNativeTesting` to `true` in the [VS Code settings](https://code.visualstudio.com/docs/getstarted/settings).

## Debugging
Visual Studio Code comes with an excellent [JavaScript debugger](https://code.visualstudio.com/docs/editor/debugging) out of the box. It can connect to Node.js, [Edge, and Chrome](https://code.visualstudio.com/docs/editor/debugging#_trigger-debugging-via-edge-or-chrome), so in most cases, there is no need for extra extensions when it comes to JavaScript debugging.

## Version Control
[Git](https://git-scm.com/) is the most used version control system (VCS), and there are great extensions for VS Code. You can also find extensions for other VCS's such as [Subversion](https://marketplace.visualstudio.com/items?itemName=johnstoncode.svn-scm) on the VS Code marketplace.

### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
![GitLens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynnlkglpuzk3zwcfbdfa.png)

The [GitLens extension](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) adds several panels to the source control sidebar and enhances the editor with information overlays. The sidebar panels help you manage branches, stashes, commits, file history, remotes, and the editor extensions include a blame view, change indications, an authorship code lens, and more. GitLens is an essential extension that makes working with Git in VS Code much easier.

### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
![Git Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnr31608m2t3pugb6mi3.png)

The [Git Graph extension](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) shows the Git history visually in an editor panel. You can open it with the "View Git Graph" command. In the graph view, you can explore individual commits and perform many everyday Git operations. For example, you can check out branches and commits, create branches, cherry-pick commits, perform merges, etc.

## Database, REST API & Docker Clients
Developing full-stack JavaScript often means working with external systems such as databases, REST APIs and Docker. The following extensions add clients to VS Code:

### [Database Client](https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2)
![Database Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clqmio91awjknpyqu0zc.png)

The [Database Client extension](https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2) lets you connect to MySQL/MariaDB, PostgreSQL, SQLite, Redis, and ElasticSearch. You can explore databases in its sidebar panel, open database tables as editor panels, and run custom SQL queries. The database table content is editable. Any changes that you make are immediately stored in the database.

### [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
![Thunder Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptck5k8a3xhnt6p1ksh1.png)

The [Thunder Client extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) integrates a client for REST APIs into VS Code. It is a lightweight alternative to [Postman](https://www.postman.com/). You can send any kind of `http(s)` request, see the response data, and organize your requests in collections.

### [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
![Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iofp8aa0ix92245n2nqt.png)

Working with containers has become an essential part of day-to-day development for many software engineers. With the [Docker extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker), you can explore your running Docker containers, get editor support for Docker files, and more.

## Bonus
Here is a small bonus extension that I find very useful:

### [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)
![CodeSnap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxr94a3ccunb5pqbrhep.png)

You can take beautiful screenshots of your code in no time with the [CodeSnap extension](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap). Start with the `CodeSnap` command, select the code you want to screenshot, and click the lense button.

## Conclusion
I hope the post gave you a few ideas for extensions that can improve your VS Code experience. With the **[JavaScript IDE Extension Pack](https://marketplace.visualstudio.com/items?itemName=p42ai.vscode-javascript-ide-extension-pack&ssr=false)**, you can install them all and then disable or uninstall the ones that don't fit your needs.