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.
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 80+ \newline books, guides and courses with the \newline Pro subscription.
[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?