Add ESLint Rules to a `react-blessed` Application

This is the 2nd post in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib. For more information about the series and to take a sneak peak at what we're building, go to the 1st post in the series for more context.

1. Bootstrap react-blessed Application
2. Add ESLint Rules to react-blessed App
3. Change text font with figlet
4. Extract Component and Add useInterval hook
5. Fetch and display current weather with weather-js
6. Extract custom hook to simplify data fetching
7. Change text color with chalk and gradient-string
8. Position and Align Text inside a <box> Element
9. Make a Percentage Based Layout
10. Layout Dashboard with react-blessed-contrib Grid

NOTE: You can find the code for this project in GitHub and you watch the whole Build a Terminal Dashboard with React video series on egghead.io.

Why ESLint?

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.

This code at this point in the React Terminal Dashboard series is minimal, but as code starts to accumulate it'll be helpful to statically analyze the validity of our code going forward with ESLint.

Installing the Dependencies

First we'll install eslint (for basic JavaScript litning), eslint-plugin-react (for rules specific to React components), and eslint-plugin-react-hooks (for rules regarding the use of React hooks).

npm install eslint{,-config-react-app,-plugin-react,-plugin-react-hooks}

NOTE: I'm using Bash Brace Expansion, which expands out to npm install eslint eslint-config-react-app eslint-plugin-react eslint-plugin-react-hooks

ESLint Initialization

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.

npx eslint --init

You'll be asked a whole list of questions, but once the prompts are completed, you'll have a new .eslintrc.js file in the root of your app folder.

ESLint Config Modifications

Since we want to add some specific rules for React Hooks (eslint-plugin-react-hooks), we'll manually tweak the .eslintrc.js file.

To do that, we'll add react-hooks to our plugins array and we'll add two new rules, react-hooks/rules-of-hooks which we'll mark as an "error" if they are found, and react-hooks/exhaustive-deps which we'll mark as a "warning" if a violation is found.

module.exports = {
  env: {
    node: true,
    es2020: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
};

NOTE: Instead of extending the recommended rules for ESLint and eslint-plugin-react, you maybe want to tweak which rules you and your team prefer.

Create a Lint NPM Script

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.

{
  "name": "egghead-playlist-react-blessed",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "lint": "eslint ."
  }
}

Once the npm script is defined you can execute the script by running npm run lint from the terminal.

ESLint VS Code Extension

Seeing linting output in the terminal is great, but it's also handy to be able to see warnings and errors directly in your IDE. Most popular code editors have an ESLint extension available to install that will detect an ESLint configuration file and visually indicate violations within the editor. I have the ESLint Extension installed in VS Code.

Conclusion

As your application grows it's can be helpful to add ESLint to statically analyize your codebase for common error and recommendations. Using the eslint init tool is a helpful way to get started.