DEV Community

Cover image for 10+ Must-have VSCode Extensions for React Developers
Elijah Trillionz
Elijah Trillionz

Posted on

10+ Must-have VSCode Extensions for React Developers

Extensions in VSCode are one of the things that makes VSCode so special. So let's see some of these extensions that will be of help to you as you work with ReactJS.

1. ES7 React/Redux/GraphQL/React-Native snippets

A simple extension for React and redux snippets.

Installs: 3.7 million+.
Install here

2. Prettier

Prettier formats your code. 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 has support for JavaScript, TypeScript, JSX.

Installs: 15.9 million+

Install here

3. Auto Rename Tag

Because you will always work with tags in React, one must-have extension is auto rename tag.

It automatically renames paired HTML/XML tags, with support for JSX

Installs: 6.8 million+

Install here

4. ESlint

Eslint analyses your code to find problems and provide an automatic fix (most cases).

Installs: 16.8 million+

Install here

5. GitLens

GitLens supercharges the Git capabilities built into VSCode.

Quickly glimpse into whom, why, and when a line or code block was changed.

Installs: 11.2 million+

Install here

6. Vscode-styled-components

Vscode styled-components is a must-have extension for working with styled-components in react.

It provides CSS syntax highlighting and IntelliSense in styled-components.

Installs: 950k+

Install here

7. Typescript React code snippets

Typescript React code snippets provide a good number of snippets for working with typescript and react. Supports for only TSX or ts.

Installs: 176k+

Install here

8. Better comments

Better comments is a customixable extension that makes your comments human-friendly by categorizing annotations into alerts, todos, information, and so much more.

Installs: 2.2 million+

Install here

9. Git History

Git History helps you easily view git log, file history, compare branches or commits.

Installs: 4.7 million+

Install here

10. Import const

It will display inline in the editor the size of the imported package.

Installs: 1.3 million+

Install here

11. Vscode React refactor

Vscode React refactor recomposes your JSX, TSX. Works with arrow functions.

Installs: 59k+

Install here

12. Turbo console log

It simply automates the process of writing meaningful log messages.

Installs: 325k+

Install here

13. Material icons

It styles your file and folder icons. It is customizable.

Installs: 9.5 million+

Install here

14. Code spell checker

This extension is a basic spell checker that works well with camelCase.

Installs: 3.3 million+

Install here

15. WakaTime

WakaTime is an open-source extension for metrics, insights, and time tracking automatically generated from your programming activity.

Installs: 519k+

Install here

Alright, that's the end of the list. I believe each one of these extensions can be of great help to you. So enjoy.
Thanks for reading. Leave a comment for me to let me know what you think or if I miss an extension.

Also, follow me on Twitter @elijahtrillionz for daily tweets on web development resources and tips.

Discussion (1)

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

"Must-have ... for React Developers" but then...

  • Vscode-styled-components: Only if you work with styled-components.
  • Typescript React code snippets: Only if you work with TS.
  • Better comments: TODO Highlight is a better alternative, actually.
  • Material icons: Is a theme for VSCode icons, not even related to React.
  • WakaTime: Again, not even related to React.

I'm gathering you just created a post with the extensions you have installed, and because you work with React+TS+styled-components you just put that list here, but my recommendation would be to make a curated version of this list and filter out stuff that is not relevant to the title, or you could also just update the title to "My VSCode extensions" and remove the #react tag, and change it with maybe #vscode.

Cheers!