This video is available to students only

Using ESLint

Use ESLint to create the same linting rule for the code with less boilerplate

ESLint has many of the same benefits for linting that jscodeshift brought to transforms in terms of reduced setup and configuration. A standard solution also means that more generic ESLint rules can be shared across many codebases, which reduces the need for custom linting rules in the first place.

ESLint includes a large set of rules by default. It also makes it easy to include rules for different use cases. For example, the eslint-plugin-react package includes a large set of rules for a codebase using React. There are many plugins like this for all sorts of libraries, as well as encouraging good practices for things like accessibility.

The rules included with ESLint, in combination with many of the rules provided by plugins, can cover many of the common needs in a codebase. However, a large codebase is constantly evolving, which usually means specific patterns become outdated or deprecated. This is one area custom linting rules are useful.

Getting started#

The Flash app was built using Create React App. It takes care of much of the standard boilerplate and configurations for a project, including ESLint.

The default Create React App ESLint configuration can be updated using the standard ESLint configuration options by updating the eslintConfig property in the package.json file.

When working on a project that doesn't have ESLint set up and configured, the official documentation for getting started can be followed.

The simplest approach for creating custom rules with ESLint is to use "runtime rules". To get started, create a new eslint-rules directory within the project for custom rules.

Then, create a new file named no-button-element.js in this eslint-rules directory. ESLint allows passing the --rulesdir option to specify where the custom rules are defined.


This page is a preview of Practical Abstract Syntax Trees

Start a new discussion. All notification go to the author.