There must be more and more rules added to your team’s style guide as the team grows up. And that’s a good thing actually. But it’s still hard to make everyone follow the style guide especially for those who just joined the team. As a frontend engineer, ESLint is just what we need.
Create an ESLint Plugin
The easiest way to start creating a plugin is to use the Yeoman generator. The generator will guide you through setting up the skeleton of a plugin.
You can add your first rule with yo eslint:rule after creating a plugin. A rule includes three parts: source file, test file and documentation.
Rule — Source File
AST(Abstract Syntax Tree) and the visitor pattern is essential when developing ESLint plugin (Babel and Codemods plugins also use the same tool).
Take the limit-continuous-import-declarations rule as example:
Besides, make the rule more complete by providing a meta object containing type, docs, fixable, schema, …etc.
Note: Program:exit is helpful when the rule needs to wait until the whole file is parsed.
Rule — Test File
Remember to configure the correct parser for your ruleTester. For example, set the parser to @babel/eslint-parser if you want to use ES6+ features.
Here is part of the unit tests in the limit-continuous-import-declarations rule:
Use the ESLint Plugin
Use the plugin by configuring the ESLint configuration file like this:
Or if the plugin provides some configs like recommended. Then the plugin can be used like this:
Complete Example
The complete source code is in this GitHub repository: https://github.com/wtlin1228/eslint-plugin-wtlin.
