React Starter: Editor Tools

Celý článek

Before we move into more coding with React, let's talk about the tools that can help us streamline our React development. We want to go into our React development as well equipped as possible!

Visual Studio Code is my current (and many developers') current favorite editor. It's a favorite for many reasons:

• Speed
• Ability to autocomplete code with Intellisense
• Ability to catch errors and speed up development
• Built-in git
• Built-in terminal
• Extensibility

VS Code has many great extensions that we can leverage for React and JavaScript development. For this article, we'll focus on the important extensions to have for React development.

If you aren't using VS Code, then you can skip this post as I'm not familiar with the plugins needed for other editors.

Related Course: Make VS Code Your Editor

JavaScript Extensions

These are the extensions that should be installed for JavaScript work in general. These extensions will help out with vanilla JS work, React work, Vue and Angular.

I'll list out some of my most recommended extensions here and also leave a link to a full article we've got on the topic.

Articles

11 Awesome JavaScript Extensions for Visual Studio Code

Best React Extension for VS Code

Extensions

• JavaScript (ES6 Code Snippets): Useful JS snippets to speed up writing
• Import Cost: See how big your JS file will be based on what you use
• Prettier: Automatic code formatter
• Path Intellisense: Get hints at what is in your files

Simple React Snippets is one of my favorites. My main usage is the easier import line snippet.

Debugger for Chrome

The Debugger extension allows us to find bugs in our code quickly. While this tool won't be entirely useful just yet since we haven't gotten to the Create React App tool, we can make a note of it and come back in the future. We've got a full writeup on how to use it here:

Debugging Create React App Applications in Visual Studio Code

Color Schemes (Themes)

We've got a great articles on VS Code themes so I won't dive too deep into them here. What I currently use is Monokai Pro.

• 6 Hottest VS Code Themes To Use in 2019
• Best VS Code Themes of 2017

Fonts

There are only a few fonts that I personally use. Two are paid and the other two are free. It's all up to preference. We've got an article on the best coding fonts here.

Operator Mono

This is the expensive font on this list coming in at $400. For staring at a font for hours upon hours, I don't mind the payment for such a quality font. I appreciate the cursives and the way the characters aren't as tall as the other fonts on this list.

While it doesn't come with ligatures (the ability to combine two characters to look like a single character. ie → or ===) out of the box, you can add them with this GitHub project.

Dank Mono

Dank Mono is one of the newer fonts to hit the scene but it's learned much from the fonts that came before it. Made by Phil Pluckthun, a heavy user of React, this font also comes with a hint of cursive fonts and ligatures built in. At $40, it's a great font to give a try.

Fira Code

Fira Code is one of the free fonts on this list. Versatile with ligatures and cursives out of the box. Fira Code is a little tall for my taste but it could be right up your alley.

Conclusion

This just scratches the surface of all the great things that VS Code can do for you as a developer. It is a good start to install these things so that we're running a VS Code that is more geared towards our type of development.