VS Code Extensions to Power Up Your JavaScript Development

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.

Install

DotENV

VSCode .env syntax highlighting

Install

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.

Install

change-case

A wrapper around 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:

Install

Markdownlint

The 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, .

markdownlint is an extension for the Visual Studio Code editor that includes a library of rules to encourage standards and consistency for Markdown files. It is powered by the markdownlint library for Node.js (which was inspired by markdownlint for Ruby). Linting is performed by the [markdownlint-cli2](https://github.com/DavidAnson/markdownlint-cli2) engine, 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 uses the same engine and can be integrated with project workflows.

Install

1. Open Visual Studio Code
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

Install

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

Install

npm Intellisense

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

Install

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

i18n Ally

Install

JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Install

jumpy

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

Install

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.

Install

Auto Import

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

Install

Auto Rename Tag

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

Install

Auto Close Tag

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

Install

ES7+ React/Redux/React-Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code

Visual Studio Marketplace

Launch Quick Open:

Paste the following command and press Enter:

ext install dsznajder.es7-react-js-snippets

Install

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

Install

Prettier — Code formatter

Prettier 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

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

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

Stylelint

The official Visual Studio Code extension for Stylelint

Install

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

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

Settings Sync

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

Install

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

Also Published here

L O A D I N G
. . . comments & more!

VS Code Extensions to Power Up Your JavaScript Development
Source: Trends Pinoy