Writing Custom ESLint Plugins

Submitted Jun 14, 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.

Outline

If you’ve worked with a large JavaScript codebase, chances are you’ve relied on ESLint to check your code for style violations and common code smells. It’s a valuable tool in any developer’s arsenal, one that helps large teams work on a single codebase without ending up with a mishmash of conflicting styles and patterns.

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)

Speaker bio

Ankur Sethi leads the Web Engineering team at Uncommon in Bangalore. He builds applications with JavaScript, TypeScript, and (sometimes) Rust. He has terrible taste in music, which he inflicts on unsuspecting strangers if handed the AUX cord at parties.

JSFoo: round the year submissions