Writing Custom ESLint Plugins
Submitted by Ankur Sethi (@s3thi) on Thursday, 14 June 2018
Technical level: Advanced
ESLint is great for ensuring that all contributions to your codebase follow a uniform style. With a few lines of configuration, it lets you scan your code for style violations such as missing semicolons, unused variables, and inconsistent brace styles.
However, ESLint can go beyond these simple style checks. Its powerful plugin API lets you write custom linting rules tailor-made for your project or organization.
In this hands-on talk, I will walk you through writing a custom plugin for ESLint. In the process, we will discover Abstract Syntax Trees (ASTs), what they’re good for, and how to use them to build your own developer tooling.
In this talk, I will walk you through building a custom plugin for ESLint.
Our plugin will enforce a consistent ordering on React lifecycle methods across our codebase. It will scan all our class-based React components, collect all the lifecycle methods that appear inside them, figure out if they appear in a pre-defined order, and throw an error if they don’t.
The goal of our plugin is to ensure that, for example,
componentDidMount always appears before
render across all React components.
Here’s a quick outline of what I’ll cover in this talk:
- Why build custom developer tooling?
- ESLint for the unfamiliar
- What are Abstract Syntax Trees (ASTs)?
- How do you build ASTs? What are they used for? How do you work with them?
- The ESLint plugin API
- Writing an ESLint plugin to ensure consistent ordering of React lifecycle methods across a codebase (hands-on)