🖥

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

2024/01/02に公開

JavaScript

ESLint

tech

EslintプラグインのREADMEを見る

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

...
"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: [],
    },
  },
}

具体例

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

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

Note

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

チャットメンバー募集

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

Twitter

https://twitter.com/YumaInaura

公開日時

2023-10-07