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