現代ではESLintを使って、チーム内でのコーディングルールの定義や自動修正をするのは当たり前になってきています。

しかし、ESLintのルールにないチーム独自のコーディングルールの場合はどうしていますか？

人力でやっていると

などの問題が起きてきます。

そんな時にESLintのルールを自分達で作ることができると一気にこれらの問題を解決することができます。

そこで本記事ではESLintルールの作り方をハンズオン形式で紹介します。テンプレートも用意しているので、実際に手を動かしながら読んでみてください。

【実装編】の今回はルールの作成までを行います。次の【導入編】でパッケージ化し、プロジェクトに導入するところをやっていく予定です。

ではいってみましょう！

今回作成するルール

あなたは架空の会社キャットテクノロジー株式会社の開発チームのエンジニアです。キャットテクノロジーではみんな猫が好きなので、 🐈 変数の頭に必ずmyao のプレフィックスをつけなければいけない 🐈 という気の狂ったチーム独自のコーディングルールがあります。

今回はこのルール、var-prefix-myaoを作ります。

// var-prefix-myao
// Bad 😿
const user = new User()

// Good 😻
const myaoUser = new User()

プロジェクトの準備

ルールを作成するにはESLint Pluginとしてnpm パッケージにする必要があります。

Pluginの雛形を用意するのに、いくつかコマンドを実行したり、ファイルを編集したりする必要があり面倒なので、今回はTemplate Repositoryを用意しました。

テンプレートを自動で生成してくれるgenerator-eslint というパッケージがありますが、eslintのバージョンが古かったり、TypeScriptに対応していなかったので今回は利用せずに、マニュアルで準備しています。