Module 3 Introduction
Introduction to module 3: Code formatting setup
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Modernizing an Enterprise React App course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Modernizing an Enterprise React App, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:20] Now that our app has been upgraded to the latest version of React, and we've dialed in our project tooling so that any developer joining the team would have to actively work to use a version of Node or Yarn different from everyone else 's, you might think you're ready to start developing. But I'd argue that there are two more things that we need to do before we start upgrading the app.
[00:21 - 00:36] We need to set up both our prettier and our ES-Lint project-wide configurations . Almost the first thing I do after starting a new project is add these two files because they make my development experience so much more pleasant, and they help me to write better code.
[00:37 - 01:03] So in this module, we'll learn about why code formatting can dramatically improve project, how prettier's opinionated take is the right choice to make, and configure it in our application so that it reformats our code automatically . We'll also discuss the reasoning behind ES-Lint. We'll look into the most popular ES-Lint setup for React, and we'll add that to our project too so that we can improve our code's quality as we develop.
[01:04 - 01:23] Now for this module, I highly recommend that you use the VS Code IDE for development. While you can still take advantage of both prettier and ES-Lint without it, some of the configurations that I'll do involve plugins from the VS Code extension marketplace that really enhance the development experience with both.