Module 3 Summary

This lesson is a summary of the automated code formatting and linting we set up with the help Prettier and ESLint in Module 3.0.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To 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.

Table of Contents

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.

This video is available to students only
Unlock This Course

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.

Thumbnail for the \newline course The newline Guide to Modernizing an Enterprise React App

  • [00:00 - 00:10] This lesson is a summary of what we've covered in Module 3. In this module, we learned how to add prettier to automatically format a project's code.

    [00:11 - 00:32] Even though code formatting isn't something that affects the end user's experience with an app, it dramatically improves the day-to-day developer experience. Critier is an opinionated code formatter with just a handful of options that can be adjusted, and then it takes care of the rest. Just install one new NPM package, add a single config file, and you're ready to roll.

    [00:33 - 00:50] Not only does it save devs from having to think about styling code to be readable and consistent, but it also saves teammates having to call it out in PRs, because nobody wants to be that person on the team. With the advent of VS code and the prettier extension, code formatting gets even easier.

    [00:51 - 01:02] So easy, in fact, it can be set up to format the file being worked on automatically. This will definitely save devs some time and effort that they can put towards more important code issues.

    [01:03 - 01:19] We also learned how to add and configure ES lint to improve our project's code. Code linting has existed for years, especially in more strongly typed language with compilers, but it hasn't been until more recently that linting has become popular in the JavaScript language.

    [01:20 - 01:39] ES lint, the most popular linter today, starts off very bare bones and expects a dev team to decide for themselves what rules and standards to follow and enforce. But Airbnb has taken the time and effort to make their very thorough, react- focused, ES lint configuration public and extendable.

    [01:40 - 02:01] So any dev team can incorporate it into their project and have a great starting point for linting in line with React best practices. The setup of ES lint in our project is a little more involved than configuring prettier, but it's well worth the extra effort, especially when you can run one command to see linting issues and another to fix some of them automatically.

    [02:02 - 02:12] That's pretty sweet. And once more, there is a lovely VS code extension that will automatically lint files identifying issues as the developer adds to them too.

    [02:13 - 02:19] So in our next module, it's finally time to start changing the code in our app. I know you're thrilled.

    [02:20 - 02:36] It's time to take those class-based components and convert them to functional components that take advantage of hooks. So in the next module, each lesson will build up our confidence of how to employ hooks to take the place of classes while ensuring that app functionality remains the same.

    [02:37 - 02:46] We'll go file by file in each lesson, working our way up from the simplest files to convert to hooks to the more complex ones by the end. Ready?