Eslint - .eslintrc の書き方が分からない ( rules とプラグイン単位の設定 )

EslintプラグインのREADMEを見る

例えばプラグインのRulesの説明にこんな風に書かれている (一部省略)

https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md

...
"tailwindcss/no-custom-classname": [<enabled>, {
  "config": <string>|<object>,
  "whitelist": Array<string>,
}]
...

でなにをどこに書けば良いのか？と。

この場合、

• 配列の1個目 -> 文字列で enabled -> off warn error のどれかを指定する
• 配列の2個目 -> オブジェクトで他のプロパティを指定する。たとえば whitelist であれば文字列の配列を指定する。

ということのようだ。
rulesの構造はプラグインによって割と自由っぽい。

具体例

これを設定に適用すると以下の通り
( rules 以外のプロパティはここでは省略 )

module.exports = {
  rules: {
    "tailwindcss/no-custom-classname": [
      "error",
      {
        config: 'tailwind.config.js',
        whitelist: ["xxx", "yyy"],
      },
    ],
  },
};

プラグインの全体設定

かと思えばルール単位ではなくプラグイン全体の設定が用意されていることもあるようだ。
突然として現れた settings tailwindcss という階層。

eslint-plugin-tailwindcss の例:

{
  settings: {
    tailwindcss: {
      config: "tailwind.config.js",
      whitelist: [],
    },
  },
}

https://github.com/francoismassart/eslint-plugin-tailwindcss

具体例

この場合の適用例は以下の通り
( settings 以外のプロパティはここでは省略 )

module.exports = {
  settings: {
    tailwindcss: {
      config: "tailwind.config.js",
      whitelist: ['xxx', 'yyy'],
    },
  },
}

Note

• まだまだドキュメントから具体的な書き方を読み取ることが難しい。抽象ではなくお願いなので何か1個でも具体例を書いてくれないだろうか。

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-10-07