🐱

【導入編】手を動かしながら学ぶESLintルールの作り方

2022/06/26に公開

JavaScript

前回の【実装編】では、ルールを作成するところまでできました！

【導入編】の今回は作成したルールをプロジェクトに導入して利用できるようにします！

作成したルールをパッケージにする

作成したルールをプロジェクトで利用できるようにするためにESLintプラグインとして、npmパッケージにする必要があります。

index.tsを作成
以下の内容でindex.ts を作成します。
rulesに{ ルール名: ルールの実体 } のオブジェクトをexportしています。

index.ts

import varPrefixMyao from "./rules/var-prefix-myao"

export = {
  rules: {
    "var-prefix-myao": varPrefixMyao,
  },
}

後でリリースするときに重複を避けるために、パッケージ名を@{あなたの名前}/eslint-plugin-myao に変更します。

"name": "@kazuwombat/eslint-plugin-myao",

ビルドしておきます

yarn run tsc

以上でパッケージにする準備が完了しました🙆

yarn linkで動作を確認する

実際にnpm publishする前にyarn linkを使ってルールが動作するか確認しておきましょう。

【📦 パッケージ側】作成したeslint-plugin-myaoのルートディレクトリで、yarn linkを実行します。

これでパッケージが別のプロジェクトから利用できるようになりました。

$ yarn link
yarn link v1.22.17
success Registered "@kazuwombat/eslint-plugin-myao".
info You can now run `yarn link "@kazuwombat/eslint-plugin-myao"` in the    projects where you want to use this package and it will be used instead.
✨  Done in 0.04s.

【🚀 プロジェクト側】導入用にサンプルのプロジェクトを作成します。

// プロジェクトを作成
$ mkdir sample-pj && cd ./sample-pj && yarn init -y && yarn add -D eslint

【🚀 プロジェクト側】 yarn linkコマンドを実行して、パッケージを利用できるようにします。

~/sample-pj yarn link @kazuwombat/eslint-plugin-myao
yarn link v1.22.17
success Using linked package for "@kazuwombat/eslint-plugin-myao".
✨  Done in 0.02s.

【🚀 プロジェクト側】 .esintrcを準備します。⚠️pluginsの箇所は元のパッケージ名からeslint-plugin-のプレフィックスを除いたものになることに注意⚠️しましょう。

{
  "plugins": [
    // @kazuwombat/eslint-plugin-myao → @kazuwombat/myao
    "@kazuwombat/myao"
  ],
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    // var-prefix-myaoルールをエラーに指定
    "@kazuwombat/myao/var-prefix-myao": "error"
  }
}

【🚀 プロジェクト側】ルールに違反するjsファイルを用意します。
```
echo "const user = 1" >> index.js
```

【🚀 プロジェクト側】 eslintコマンドを使って、動作を確認してみましょう。見事に動きましたね🐈

$ yarn run eslint index.js
yarn run v1.22.17
$ /Users/matsumoto.kazuya/sample-pj/node_modules/.bin/eslint index.js

/Users/matsumoto.kazuya/sample-pj/index.js
  1:7  error  変数の頭には必ずmyaoをつけてね🐈  @kazuwombat/myao/var-prefix-myao

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

自動修正もいい感じに動いていますね〜🤖

パッケージを公開する

動作の確認ができたので、パッケージを公開します。
パッケージ側のルートディレクトリで以下のコマンドを実行してください。

npm publish --access public
npm notice 
npm notice 📦  @kazuwombat/eslint-plugin-myao@1.0.0
...(中略)                                  
npm notice 
npm notice Publishing to https://registry.npmjs.org/
+ @kazuwombat/eslint-plugin-myao@1.0.0

最後にyarn linkを公開したパッケージに差し替えて、同様の動作がするか確認すれば、全て完了です🥰

# linkを解除
$ yarn unlink @kazuwombat/eslint-plugin-myao
yarn unlink v1.22.17
success Removed linked package "@kazuwombat/eslint-plugin-myao".
info You will need to run `yarn install --force` to re-install the package that was linked.
✨  Done in 0.02s.

# 公開したパッケージを追加
$ yarn add -D @kazuwombat/eslint-plugin-myao

# 動作の確認
$ yarn run eslint index.js
yarn run v1.22.17
$ /Users/matsumoto.kazuya/sample-pj/node_modules/.bin/eslint index.js

/Users/matsumoto.kazuya/sample-pj/index.js
  1:7  error  変数の頭には必ずmyaoをつけてね🐈  @kazuwombat/myao/var-prefix-myao

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

以上です！

基本的なESLintルールの作り方が理解できたのではないでしょうか？
次はあなたオリジナルのESLintルールの作成にチャレンジしてみてください🐈

前回の実装編はこちら

参考にさせていただいた記事、本🙏
eslint-plugin-tutorial
Babel Plugin を作りながら AST と Babel を学ぶ
 簡単JavaScript AST入門

作成したルールをパッケージにする

yarn linkで動作を確認する

パッケージを公開する

Discussion