Elijah Manor: 0:00 This code is the beginning of a Terminal React App using blessed-react. If we come to the terminal and run npm start, you'll see the app kick up and display the current date, time, and a counter.
0:15 Even for a tiny bit of functionality, the amount of code is already starting to accumulate. To help statically analyze the validity of our code going forward, let's add ESLint to the project and build system.
0:46 Once installed, we'll use npx to execute the locally installed version of ESLint and pass the --init flag, to start a series of prompts to help initialize our ESLint configuration.
0:58 First, we'll focus on having ESLint check our syntax and code problems. For most of our app, we'll be using import and export, except in our main index.js file, where we kick off Babel register. Since this project uses react-blessed, we'll pick React as our framework of choice.
1:36 At this point, the program determines that we need the ESLint plug in React dependency, but we already installed that before this step, so we can skip it. Now, we have a new eslintrc JS file in the root of our app folder. Let's open up the file and make a few tweaks.
1:54 I want to note that the ESLint plugin React dependency that we installed and was recommended is a third party module that has lots of rules for React components. You may want to turn on additional rules or turn off others that may not fit your needs.
2:10 OK. Let's configure the ESLint plugin react-hooks dependency. First, we'll add it to our plugins array, and then we'll add two new rules, react-hooks, rules of hooks, which will mark as an error if they're found and react-hooks, exhaustive-deps, which will mark as a warning if a violation is found.
2:31 Now, let's switch to our package JSON file, where we'll create a new NPM script called lint, that will kick up the locally installed ESLint module and run the linter against the code in the current directory.
2:44 Now, if we come back into our terminal and run npm run lint, ESLint will run against our whole application, and it looks like it did find the problem. Apparently, in our dashboard.js file, we created a component variable, but never used its value anywhere. In that case, we can navigate to that file, find the violation, and remove the variable since it's not needed.
3:33 Now, let's briefly check out the ESLint react-hook exhaustive-depths rule. If I go to our react.useEffect and remove the count item from the dependency array, ESLint will let me know there's a warning.
3:47 If I hover over the warning, it'll show more information. In this case, it's telling me that I'm missing count as a dependency and giving some helpful information, so let's put that back as I had before.
3:59 Now, let's exercise the ESLint react-hook rules of hooks rule. For this one, we'll wrap our React.useEffect inside an if-statement. If I hover over the error, first, I'll see some docs for useEffect, but if I scroll down a bit further, I'll see the actual problem.
4:17 React-hooks must be called in the exact same order in every component render. Since I have the hook in a conditional, it may or may not be included in every render. Again, let's put back our code the way it was before. There are also other rules of react-hooks, but this is just one of them. It's a good idea to go and get familiar with the other rules as well.
4:40 As your application grows, it could be helpful to add ESLint to statically analyze your codebase for common errors and recommendations. Using the ESLint init tool is a helpful way to get started.