VS Code Extensions That Will Make You Code Faster.
Tags: vscode, extensions, frontend, microsoft
Published: 2021-05-01 20:13:22

# 1. [Bracket Pair Colorizer 2 ](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
This extension makes the opening and closing parentheses, brackets, and curly brackets the same color.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4o2zlg6g6bsliwi0x50.png)

# 2. [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e72ye1ie66cjf7p7zggf.gif)

# 3. [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)
Automatically finds, parses, and provides code actions and code completion for all available imports.

# 4. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cziguarc9azrd5sptlpr.gif)

# 5. [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

This extension contains code snippets for JavaScript in ES6 syntax.

# 6. [Git Extension Pack](https://marketplace.visualstudio.com/items?itemName=donjayamanne.git-extension-pack)

This extension pack packages some of the most popular Git extensions that let you work with git easily inside VS Code.

# 7. [JSON Sorter](https://marketplace.visualstudio.com/items?itemName=chen86860.json-sorter)

A tool that helps you sort JSON files quickly.

# 8. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Launch a local development server with live reload feature for static & dynamic pages.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xwkiavgpbilqgqi9rau.gif)

# 9. [Search node_modules](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules)

A simple plugin for VS Code that allows you to quickly navigate the file inside your project's node_modules directory.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1oqx9jzyk4zplgxxwtbo.gif)

# 10. [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leal0je0wt3u0ceqr7g1.gif)

# 11. [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)

This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knr45qpzquwajwhk0vmh.png)


# 12. [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
Visual Studio Code plugin that autocompletes npm modules in import statements.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyf1p8v20db0l4f9zigu.gif)

# 13. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Visual Studio Code plugin that autocompletes filenames.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3et7gqfochyghb8br100.gif)

# 14. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Thunder Client is a GUI-based Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with a simple and clean design.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnlsd7jobtn95h4atmmx.gif)

# 15. [GitHub Pull Requests and Issues](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.

# 16. [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wa43hl4pdo3frs92t3o.gif)

# 17. [HTML to CSS autocompletion](https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion)

Intellisense suggestions/completions for classes and ids from markup documents to CSS, SCSS, Less, Sass, Stylus stylesheets

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ns86ri6esltl7cf1s5f.gif)

<a href="https://www.linkedin.com/in/youssefzidan/" target="_blank">
    <img src="https://img.shields.io/badge/LinkedIn-%230077B5.svg?&style=flat-square&logo=linkedin&logoColor=white" alt="LinkedIn">