Add ESLint Rules to a `react-blessed` Application

The above video is hosted on egghead.io .

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 . We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will shift focus to create widgets to display developer content such as an interactive time log, a pomodoro timer, displaying recent commits, showing currently running docker containers, and more. Once you know the basics you can create a widget of your own to add to the dashboard.

1. Bootstrap a react-blessed Terminal Application
2. Add ESLint rules to a react-blessed app (this post)

... ~20 more lessons to come ...

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.