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!

--

--

--

Fullstack JavaScript Developer | UI&UX Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Regular Expressions in JavaScript: The Basics

Angular: Dependency injection in depth

Make TypeScript/Webpack 4 Times Faster with 1 line of config

Must-Know ES6 Features for React

Understanding Nodejs Worker Thread

EasyBridge:A new design of JS-Brdige

How to Reverse a String

Intro to React Server Side Rendering

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
Adrian-Gabriel Manduc

Adrian-Gabriel Manduc

Fullstack JavaScript Developer | UI&UX Enthusiast

More from Medium

How I structure my react components

A Styling Approach for React Apps

10+ React VS Code Extensions for Increasing Productivity in 2022

React 18 Interesting Features to Utilize in Day-to-Day Coding

React is always a best choice to create SPA application. React recently launched v18 where it brought many important features which should be used in new React based project development.