🧑‍🔧

eslintで現在適応されているルールを一覧表示する

2021/03/03に公開

ESLint

tech

はじめに

eslintで現在適応されているルール一覧を確認したいことがありました。

例えば、下記のような設定になっている時、どのruleが適応されているかを確認したいです。

.eslintrc.js

extends: [
  'airbnb-base',
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:prettier/recommended',
  'prettier'
],
rules: {
  'no-unused-vars': 'off',
  '@typescript-eslint/no-unused-vars': ['error'],
  'no-inner-declarations': 'off',
},

個別のベージで確認する方法(airbnb-baseだとここをみる)もありそうですが結構大変です。
今回、現在適応されているruleを一覧表示するスクリプトを作成したので、備忘録として残しておきます。

方法

手順としては下記です。

ESlinsの設定ファイルを出力
スクリプトで整形してリスト化

ESlinsの設定ファイルを出力

eslintでは --print-config オプションがあり、これを付けて実行すると設定した構成を出力できます。

yarn eslint --print-config src/index.ts > eslint-setting.json を実行すると下記のように出力されます。

rulesに設定された内容が一覧で出ているのでこちらから確認することも可能です。

(余計な箇所は手動で削除してjsonの形式にします。)

eslint-setting.json

yarn run v1.19.1
$ /Users/private_project/temp-work/lint/node_modules/.bin/eslint --print-config index.ts
{
  "rules": {
    "no-unused-vars": [
      "off",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": true
      }
    ],
    "@typescript-eslint/no-unused-vars": [
      "error"
    ],
    "no-inner-declarations": [
      "off"
    ],
   },
  "settings": {
    "import/ignore": [
      "node_modules",
      "\\.(coffee|scss|css|less|hbs|svg|json)$"
    ]
  },
  "ignorePatterns": []
}
Done in 1.51s.

スクリプトで整形してリスト化

先程出力したファイルを読み込んで、リスト化します。
ruleから内容が記載されたページに飛びたいので、リンクも付けてます。
(動けばいいで作っているのでコードはめちゃ雑です...)

index.ts

import * as fs from 'fs';

const level = (level: number | string): number => {
  if (typeof level === 'number') {
    return level;
  }

  switch (level) {
    case 'off':
      return 0;
    case 'warn':
      return 1;
    case 'error':
      return 2;
    default:
      throw new Error('想定外の値');
  }
};

(async () => {
  const jsonObject: Record<string, any> = JSON.parse(fs.readFileSync(`${__dirname}/eslint-setting.json`, 'utf8'));
  const eslintUrl = 'https://eslint.org/docs/rules/';
  const typescriptEslintUrl = 'https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules/';
  const importUrl = 'https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules/';

  const rules: { url: string; level: number }[] = [];
  for (const [key, value] of Object.entries(jsonObject.rules)) {
    let url = `${eslintUrl}${key}`;
    if (key.startsWith('@typescript-eslint')) {
      url = `${typescriptEslintUrl}${key.replace('@typescript-eslint/', '')}.md`;
    }
    if (key.startsWith('import/')) {
      url = `${importUrl}${key.replace('import/', '')}.md`;
    }

    rules.push({
      url: `[${key}](${url})`,
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      level: level(value[0]),
    });
  }
  rules.sort((a, b) => a.level - b.level);
  const lines = rules.map((rule) => {
    return `${rule.url}: ${rule.level}`;
  });
  fs.writeFileSync(`${__dirname}/output.md`, lines.join('\n'), 'utf8');
})().catch(async () => {});

実行すると下記のようなファイルが出力されます。

output.md

[no-unused-vars](https://eslint.org/docs/rules/no-unused-vars): 0
[no-inner-declarations](https://eslint.org/docs/rules/no-inner-declarations): 0
[curly](https://eslint.org/docs/rules/curly): 0
[func-names](https://eslint.org/docs/rules/func-names): 1
[no-console](https://eslint.org/docs/rules/no-console): 1
[no-alert](https://eslint.org/docs/rules/no-alert): 1
[no-useless-return](https://eslint.org/docs/rules/no-useless-return): 2
[no-void](https://eslint.org/docs/rules/no-void): 2
[prefer-promise-reject-errors](https://eslint.org/docs/rules/prefer-promise-reject-errors): 2
[radix](https://eslint.org/docs/rules/radix): 2
[vars-on-top](https://eslint.org/docs/rules/vars-on-top): 2
[yoda](https://eslint.org/docs/rules/yoda): 2

おわりに

とりあえず一覧出力することができました。
そしてairbnb-baseのルールセットは厳しめだと分かりました。