25 VS Code extensions for (React ) frontend developers

Photo by Mohammad Rahmani on Unsplash

In the recent years, Visual Studio Code has gained a lot of popularity, making it one of the top code editor choices for frontend (and not only) developers.

As a developer, I’ve always been intrigued by cutting edge tools & technologies and ways to increase my productivity. One of the amazing things about VS Code is that is was built with extensibility in mind — almost every part of it can be customized or enhanced by using an extension. With the IDE’s raising popularity, the extensions ecosystem became very large with thousands of them being available on the marketplace.

In this article you can find a list of extensions that I use to significantly increase my productivity when writing code.

Even if I am mostly working with JavaScript and Typescript (React ecosystem) most of the extensions are not limited to these technologies and can be useful for a large variety of projects.

Some of the extensions might have shared functionality or part of the functionality provided by the extension has become built in the standard VS Code. Be sure to check them out, see what they can do, and use them based on your specific needs.

Linting & Formatting

ESLint

Integrates ESLint into VS Code to enforce rules and statically analyze your code to quickly find problems.

Stylelint

Integrates Stylelint into VS code to help you avoid errors and enforce conventions in your styles.

Prettier

It enforces a consistent style by parsing your code and re-printing it with its own rules.

Beautify

Beautify JavaScript, JSON, CSS, SASS, and HTML in Visual Studio Code.

Git

GitLens

Supercharges the Git capabilities built into VS Code.

Git Graph

View a Git Graph of your repository, and easily perform Git actions from the graph.

Git History

Git History for VS Code.

HTML (JSX) & Styling

Auto Close Tag

Automatically add the HTML/XML closing tag.

Auto Rename Tag

Automatically rename the paired HTML/XML tag.

htmltagwrap

Wraps your selection inside any HTML tag.

Tailwind CSS IntelliSense

Intelligent Tailwind CSS tooling and autocompletion.

SCSS IntelliSense

Advanced autocompletion and refactoring support for SCSS.

vscode-styled-components

Syntax highlighting and autocompletion for styled-components

React

ES7 React/Redux/GraphQL/React-Native snippets

Code snippets for React, Redux and GraphQL with ES7 syntax.

React Hooks Snippets

Code snippets for React Hooks.

General purpose

Auto Barrel

Provides commands to create or update a TypeScript or JavaScript barrel file.

Bracket Pair Colorizer

Allows matching brackets to be identified with colors.

This extension has become unmaintained, however it still works pretty well

change-case

Quickly change the case of the current selection or current word.

Code Spell Checker

A basic spell checker that works well with camelCase code.

Import Cost

Display import/require package size in the editor.

Path Intellisense

Autocompletes file names in import statements.

npm Intellisense

Autocompletes npm modules in import statements.

Live Share

Real-time collaborative development from the comfort of your favorite tools.

vscode-icons

Brings icons to your VS Code

TODO Highlight

Highlight TODO, FIXME and other annotations within your code.

Bonus

Settings Sync

Synchronize VS Code settings and extensions across multiple devices

Dracula Official

My favorite VS Code theme.

Hopefully, you will find some of these extensions useful.

Happy coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store