\
Visual Studio Code is a Free. Built on open source. Runs everywhere IDE. Visit <https://code.visualstudio.com/> to download.

## Inline Parameters for VSCode

An extension for Visual Studio Code that adds inline parameter annotations when calling a function.

 ![](https://miro.medium.com/max/1400/1\*eWeNgAM7lvuSo7a5xO5_8Q.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=liamhammett.inline-parameters)

DotENV

VSCode .env syntax highlighting

 ![](https://miro.medium.com/max/1274/1\*gSew4gNNig0A4IZelRq1YQ.png)

[Install](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)

## Regex Previewer

Shows the current regular expression’s matches in a side-by-side document. This can be turned on/off with `Ctrl+Alt+M` (`⌥⌘M`).

Global and multiline options can be added for evaluation with a side-by-side document through a status bar entry. This can be useful when the side-by-side document has multiple examples to match.

 ![](https://miro.medium.com/max/1400/1\*_x8AvncWPU4ksUYhHGGCEg.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

## change-case

A wrapper around [node-change-case](https://github.com/blakeembrey/node-change-case) for Visual Studio Code. Quickly change the case of the current selection or current word.

If only one word is selected, the `extension.changeCase.commands` command gives you a preview of each option:

 ![](https://miro.medium.com/max/1400/1\*mlhkVnC37sL8XHytACkLEw.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

## **Markdownlint**

The [Markdown](https://en.wikipedia.org/wiki/Markdown) markup language is designed to be easy to read, write, and understand. It succeeds — and its flexibility is both a benefit and a drawback. Many styles are possible, so formatting can be inconsistent. Some constructs don’t work well in all parsers and should be avoided. For example, [here are some common/troublesome Markdown constructs](https://gist.github.com/DavidAnson/006a6c2a2d9d7b21b025).

[markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) is an extension for the [Visual Studio Code editor](https://code.visualstudio.com/) that includes a library of rules to encourage standards and consistency for Markdown files. It is powered by the [markdownlint library for Node.js](https://github.com/DavidAnson/markdownlint) (which was inspired by [markdownlint for Ruby](https://github.com/mivok/markdownlint)). Linting is performed by the `[markdownlint-cli2](https://github.com/DavidAnson/markdownlint-cli2)` [engine](https://github.com/DavidAnson/markdownlint-cli2), which can be used in conjunction with this extension to provide command-line support for scripts and continuous integration scenarios. The `[markdownlint-cli2-action](https://github.com/marketplace/actions/markdownlint-cli2-action)` [GitHub Action](https://github.com/marketplace/actions/markdownlint-cli2-action) uses the same engine and can be integrated with project workflows.

## Install


1. Open [Visual Studio Code](https://code.visualstudio.com/)
2. Press `Ctrl+P`/`⌘P` to open the Quick Open dialog
3. Type `ext install markdownlint` to find the extension
4. Click the `Install` button, then the `Enable` button

## Better Comments

\
The Better Comments extension will help you create more human-friendly comments in your code.With this extension, you will be able to categorise your annotations into:

* Alerts
* Queries
* TODOs
* Highlights
* Commented out code can also be styled to make it clear the code shouldn’t be there
* Any other comment styles you’d like can be specified in the settings

 ![](https://miro.medium.com/max/918/1\*dt0ryLQcGRBFXtYtNPnJeQ.png)

[Install](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

## Web Accessibility

So I heard you wanted to write more accessible code? Well, you came to the right Extension!

\
> *This extension is here to help you get feedback on what parts need some more attention for it to be accessible, this is just the basics and doesn’t cover all the rules but will help with making your project more accessible*

\
 ![](https://miro.medium.com/max/1400/1\*cgxfqKQIUAgfmLmbBJYZrQ.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility)

## npm Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements.

 ![](https://miro.medium.com/max/1400/1\*7P4jVq5Vxd51noleeYtLAQ.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

# Formatting Toggle

A VS Code extension that allows you to toggle your formatting settings ON and OFF with a simple click.

## Installation

In the command palette (`CMD + SHIFT + P`) select “Install Extension” and choose “Formatting Toggle”.

[Install](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle&WT.mc_id=marketplace-pack-sdras)

## i18n Ally

 ![](https://miro.medium.com/max/1400/1\*TPOqGKKcVvCj6sTlhZ6wQQ.png)

[Install](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)

## JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for [Vs Code](https://code.visualstudio.com/) editor (supports both JavaScript and TypeScript).

[Install](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

## jumpy

Jumpy provides fast cursor movement, inspired by Atom’s package of the same name.

 ![](https://miro.medium.com/max/1400/1\*8HqRimJhjUCQXCoSoVqBvw.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy)

## Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

 ![](https://miro.medium.com/max/1400/1\*cI6fHP4KkpkBnzCazgZuXw.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

## Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

[Install](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)

## Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

[Install](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

## Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

[Install](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

## ES7+ React/Redux/React-Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for [VS Code](https://code.visualstudio.com/)

\
## Visual Studio Marketplace

Launch *Quick Open*:

* *[Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)*: `Ctrl+P`
* *[macOS](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)*: `⌘P`
* *[Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)*: `Ctrl+P`

Paste the following command and press `Enter`:

ext install dsznajder.es7-react-js-snippets

[Install](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

## VSCode React Refactor

This simple extension provides JSX refactor code actions for React developers.

## Features

* Extract JSX code parts to a new class or functionnal component
* Supports TypeScript and TSX
* Works with classes, functions and arrow functions
* Handles key attribute and function bindings
* Compatible with React Hooks API

 ![](https://miro.medium.com/max/1400/1\*ab2vdnPL7rqQxdTzAKOosQ.gif)

[Install](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)

## Prettier — Code formatter

[Prettier](https://prettier.io/) is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

## Installation

Install through VS Code extensions. Search for `Prettier - Code formatter`

[Visual Studio Code Market Place: Prettier — Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

[Install](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## ESLint

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running `npm install eslint` in the workspace folder for a local install or `npm install -g eslint` for a global install.

[Install](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Stylelint

The official [Visual Studio Code](https://code.visualstudio.com/) extension for [Stylelint](https://stylelint.io/)

[Install](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

## GitLens — Git supercharged

GitLens **supercharges** Git inside VS Code and unlocks **untapped knowledge** within each repository. It helps you to **visualize code authorship** at a glance via Git blame annotations and CodeLens, **seamlessly navigate and explore** Git repositories, **gain valuable insights** via rich visualizations and powerful comparison commands, and so much more.

[install](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## Git History

* View and search git log along with the graph and details.
* View a previous copy of the file.
* View and search the history
* View the history of one or all branches (git log)
* View the history of a file
* View the history of a line in a file (Git Blame).
* View the history of an author
* Compare:
* Compare branches
* Compare commits
* Compare files across commits
* Miscellaneous features:
* Github avatars
* Cherry-picking commits
* Create Tag
* Create Branch
* Reset commit (soft and hard)
* Reverting commits
* Create branches from a commits
* View commit information in a treeview (snapshot of all changes)
* Merge and rebase

Open the file to view the history, and then Press F1 and select/type “Git: View History”, “Git: View File History” or “Git: View Line History”.

[Install](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

## Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

[Install](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

Have other awesome Vs Code extensions share them in the comment session.

\
*Also Published [here](https://medium.com/weekly-webtips/vs-code-extensions-for-javascript-developers-859504ef5592)*

\


The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

VS Code Extensions to Power Up Your JavaScript Development

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

@thepeterayeni

Credibility

RELATED STORIES