Add ESLint Rules to a `react-blessed` Application

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:29] Come back to the terminal and npm install ESLint, for basic JavaScript linting. Then, we'll use Bash Brace expansion to install eslint-plugin-react, for rules specific to react components and eslint-plugin-react-hooks, for rules regarding the use of React hooks.

[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:17] We aren't leveraging TypeScript in this particular app, so we'll keep "No" selected here. Our project does not run in the browser, only in Node, so we'll flip these options, and I prefer to have config files in JavaScript or YAML, so I could easily add comments, so we'll go with JavaScript in this case.

[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:09] This is one of the many JavaScript rules that come baked in the ESLint. Now, the reason I could see the error in my IDE is that I have the ESLint extension installed in VS Code. Most Popular code editors have an ESLint extension available to install that will detect ESLint configuration file and visually indicate violations within the editor.

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