Table of Contents
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:
- Ability to autocomplete code with Intellisense
- Ability to catch errors and speed up development
- Built-in git
- Built-in terminal
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
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.
- 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:
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.
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.
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 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 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.
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.
Like this article? Follow @chrisoncode on Twitter