【JavaScript】ESLintの設定を読み解く① #ESLint

目的

ESLintの設定をカスタマイズして利用する方法を調べる。

背景

TypeScriptのプロジェクトをVSCodeで編集している。
コーディングルール統一のために"Lint"というものが入っているらしいが、
今のままでは全面エラーで真っ赤になるため、諸々設定の変更が必要とのこと。
ライブラリの導入までは先行メンバが実施してくれているので、今回はカスタマイズ方法がわかればよい。

Lint(ESLint)とは何か

lintとは、コンピュータプログラムなどのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。
https://e-words.jp/w/lint.html

ふーん。lintにも種類があるようだが、今導入されているのはESLintというツールで、
.eslintrc.jsの記述をいじればコードチェックルールをカスタマイズできる模様。

現状分析

リポジトリにあった.eslint.jsはこうだ。

.eslint.js

module.exports = {
  root: true,
  env: {
    'googleappsscript/googleappsscript': true,
  },
  globals: {  // ここに定義したものはグローバル変数なのでチェックしなくていい(orその逆)
    Underscore: true,
    Moment: true
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
  },
  plugins: [
    'googleappsscript',
    '@typescript-eslint',
    'prettier',
  ],
  extends: [  // ここに定義した外部の設定を流用する
    'standard',
    'prettier',            // prettierの設定を使う（★１）
    'eslint:recommended',  // eslintのおススメ設定を使う（★２）
  ],
  rules: {
    'prettier/prettier':   // prettierのデフォルトルールを上書き（★３）
    ['error', {            // 以下のルールに反する場合エラー
      useTabs: false,      // タブは使わないこと
    }],
    'no-var': 'error',     // 変数宣言時varを使わず、const/letを使うこと
    "@typescript-eslint/naming-convention": // 命名規則の設定（★４）
    ["error",                               // 以下に反する場合エラー
       {                                    // ルール①
        "selector": "class",                // チェック対象：class
        "format": ["PascalCase"],           // フォーマット：頭大文字、アンスコなし
        "custom": {                         // 細かい設定：
          "regex": "send|start|find",       //   正規表現
          "match": false                    //   ↑に該当してはいけない
        }
      }
    ]
  }
}

prettierの設定を使う（★１）
prettierはソースのフォーマッタ。ソースの見た目の部分をきれいにしてくれる機能を持っている。
見た目の部分のルール作りはprettierの設定に従う、ということ。
eslintのおススメ設定を使う（★２）
ここではeslintにはおすすめのルール設定があり、それが適用されているようだ。
rulesのところに逐一どのルールを適用する/しないを定義してもいいが、大変らしい。
なお、extendsに定義されたルール同士が競合する場合、後に書いたものが優先される。
prettierのデフォルトルールを上書き（★３）
prettierのルールが適用されるが、ここでprettierのルールのカスタマイズができる。
別途.prettierrc.jsというファイルを用意してそこに書くことも可能。
命名規則の設定（★４）
変数はこう、関数はこう、クラスはこう、みたいに対象ごとに命名規則を定義できる。
ただし、これはエラー、これは警告、という風な定義の仕方はできない模様。
(https://stackoverflow.com/questions/62903691/typescript-eslint-naming-convention-how-to-mix-error-and-warn-rules)

チェックしてみる

コマンドによるチェック

コマンド

npx eslint [--fix] [対象ソース]

ターミナルで上のコマンドを実行すると、エラーの場所と内容がずらずら出力される。
--fixがあると、自動修正できるものは自動で修正される。

エディタに赤線で表示させる

プラグインが必要。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
↑をVSCodeに適用すると、ルール違反の部分はエディタ上赤線がでるようになった！

結果

ルールの方はタブ幅2スペースを期待していたり、
改行コードにLFを期待していたりで全面的に真っ赤になってしまった！
ここから不必要なルールの無効化・調整を行っていく。

対応中の課題

prettierが変な改行を入れてくる…
他ファイルに定義されているクラスが軒並みno-undef…全部globalに書くしかない？
特定のルールだけfixさせたいが「error Parsing error: The keyword 'class' is reserved」に阻まれる