Enhance Your React Developer Experience with Visual Studio Code

Enjoy better linting, testing, and debugging

David Kramer
Level Up Coding
Published in
6 min readApr 14, 2020

--

Photo by Noah Silliman on Unsplash

Introduction

I’m here to show you how to trick out Visual Studio Code and take your React developer experience all the way to maximum awesome.

Spoiler alert! You can see the changes made in this tutorial by reviewing this commit.

Visual Studio Code

I love the Visual Studio Code editor. It has great support for JavaScript and TypeScript. On the surface it may look like a simple text editor, but with the right extensions and configuration its features can rival those of professional IDEs: intelligent code completion, continuous linting, continuous styling, continuous testing, and interactive debugging.

React

The React library is a popular and fun way to build front-end web applications. The Create React App project is an amazing way to get started with React quickly. Projects generated by Create React App include modern linting, compiling, bundling, and testing, all configured and ready to go, but with a command-line-centric developer experience. I’m going to show you how to unlock your project’s potential in Visual Studio Code.

Getting started

You can apply the following techniques to an existing project generated by Create React App but if you want an easy way to follow along while reading you can generate a new one.

Create a new project with a randomly-generated name and enter the project directory:

PROJECT=$(npx project-name-generator -o dashed)
npx create-react-app $PROJECT
cd $PROJECT

Pro tip! Many of these techniques may be applicable to React projects not generated by Create React App, too.

Intelligent Code Completion

Visual Studio Code includes an intelligent code completion feature called IntelliSense. If you are using TypeScript in your project then you are already at maximum awesome. Congratulations! If you are using JavaScript in your project then you can still get to the next level by enabling TypeScript checks in all of your JavaScript files, as…

--

--