🐱

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

2022/06/26に公開

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

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

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

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

  1. index.tsを作成
    以下の内容でindex.ts を作成します。
    rules{ ルール名: ルールの実体 } のオブジェクトをexportしています。
index.ts
import varPrefixMyao from "./rules/var-prefix-myao"

export = {
  rules: {
    "var-prefix-myao": varPrefixMyao,
  },
}
  1. 後でリリースするときに重複を避けるために、パッケージ名を@{あなたの名前}/eslint-plugin-myao に変更します。
"name": "@kazuwombat/eslint-plugin-myao",
  1. ビルドしておきます
yarn run tsc

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


yarn linkで動作を確認する

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

  1. 【📦 パッケージ側】 作成した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.
    
  2. 【🚀 プロジェクト側】 導入用にサンプルのプロジェクトを作成します。

    // プロジェクトを作成
    $ mkdir sample-pj && cd ./sample-pj && yarn init -y && yarn add -D eslint
    
  3. 【🚀 プロジェクト側】 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.
    
  4. 【🚀 プロジェクト側】 .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"
      }
    }
    
  5. 【🚀 プロジェクト側】 ルールに違反するjsファイルを用意します。

    echo "const user = 1" >> index.js
    
  6. 【🚀 プロジェクト側】 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ルールの作成にチャレンジしてみてください🐈

前回の実装編はこちら
https://zenn.dev/kazuwombat/articles/2a870356528783

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

Discussion

ログインするとコメントできます