Visual Studio Code is a Free. Built on open source. Runs everywhere IDE. Visit to download. https://code.visualstudio.com/ 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 for Visual Studio Code. Quickly change the case of the current selection or current word. node-change-case If only one word is selected, the command gives you a preview of each option: extension.changeCase.commands Install Markdownlint The 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, . Markdown here are some common/troublesome Markdown constructs is an extension for the that includes a library of rules to encourage standards and consistency for Markdown files. It is powered by the (which was inspired by ). Linting is performed by the , which can be used in conjunction with this extension to provide command-line support for scripts and continuous integration scenarios. The uses the same engine and can be integrated with project workflows. markdownlint Visual Studio Code editor markdownlint library for Node.js markdownlint for Ruby [markdownlint-cli2](https://github.com/DavidAnson/markdownlint-cli2) engine [markdownlint-cli2-action](https://github.com/marketplace/actions/markdownlint-cli2-action) GitHub Action Install Open Visual Studio Code Press / to open the Quick Open dialog Ctrl+P ⌘P Type to find the extension ext install markdownlint Click the button, then the button Install Enable 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 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 ( ) select “Install Extension” and choose “Formatting Toggle”. CMD + SHIFT + P Install i18n Ally Install JavaScript (ES6) code snippets This extension contains code snippets for JavaScript in ES6 syntax for editor (supports both JavaScript and TypeScript). Vs Code 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 : Linux Ctrl+P : macOS ⌘P : Windows Ctrl+P 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 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. Prettier 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 in the workspace folder for a local install or for a global install. npm install eslint npm install -g eslint Install Stylelint The official extension for Visual Studio Code Stylelint Install GitLens — Git supercharged GitLens Git inside VS Code and unlocks within each repository. It helps you to at a glance via Git blame annotations and CodeLens, Git repositories, via rich visualizations and powerful comparison commands, and so much more. supercharges untapped knowledge visualize code authorship seamlessly navigate and explore gain valuable insights 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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Efficiently Manage JavaScript Monorepos With Lerna

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

How to Efficiently Manage JavaScript Monorepos With Lerna

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps