DEV Community

Subhash Mahimaluri
Subhash Mahimaluri

Posted on

5 VSCode extensions for React developers in 2020

I've recently been installing my programmes on the Mac after he returned from repair and while installing the VSCode extensions, and someone's still curious what extensions I'm using, and today I decided to make a post to let you know the ones I 'm actually using.

1.ESLint

Dirk Baeumer's ESLint is an extension that will check if your code is written according to the rules of your .eslintrc file.
With this plugin you will be “reminded” to write code following the standards defined by you or your team. A good code style to follow in JavaScript projects is the AirBnB coding style .
Remembering that you need to have the eslint library in your project or globally on your machine

2.Prettier - Code formatter

Prettier from Esben Petersen as the name says is an extension that formats your code. Very similar to ESLint it also defines how your code will be formatted and also formats the code for you (when Format on Save is enabled). For that you need to configure .prettierrc and have a prettier library installed.

3.GitLens

Eric Amodio's GitLens is another library that I think is essential when working as a team, as it shows which commit each line has been changed in. It is a kind of gitblame available in your code in real time.

4.Import Cost

Import Cost of Wix is ​​another one that I find very interesting, because when you import or require it it shows you the size of the library you are importing and if it is very large it will appear in red, reminding you that it is a library that you can weigh your bundle.

5.Live Server

Ritwick Dey's Live Server is a hand on the wheel. Suppose you are testing something quickly in static html / css / js and do not want to create a server to see the project running, LiveServer creates a server for you and brings a bonus “live reload” that reloads the page automatically when you change / save the file.

Bonus VSCode extensions

I would also like to talk about some other extensions that I use.

6.Filesize

Filesize shows the current file size

7.styled-components

styled-components makes the syntax of styled components more readable.

8.vscode-icons

vscode-icons places icons in files according to their types, making them easier to view.

9.JavaScript (ES6) code snippets

JavaScript (ES6) code snippets, by Charalampos Karypidis. This is most popular JavaScript extension with more than 3 + million instals to date. This extension provides ES6 syntax for JavaScript , TypeScript, HTML, ReactJs and Vie. The final semicolon is included in all excerpts.

Top comments (0)