ESLint の no-multi-spaces で TypeScript のType 宣言の空白を許容させる

こんにちは。 @ishiyu です。

ESLint の no-multi-spaces ルールはすごく便利ですよね。

Function の定義で

function   (   aaaa ) {
  return   'test';
}

みたいな不要な空白だらけのコードでエラーを出してくれます。

また、--fix オプションを使えば自動でキレイに取り除いてくれます。

function (aaaa) {
  return 'test';
}

しかし、デフォルトの設定では視認性を上げるために空白を入れた配列もエラーになります。

const mens = [
  ["山田", "y.png",      25],
  ["佐藤", "sato.png",   19],
  ["鈴木", "suzuki.png", 22],
];
// => ESLint: Multiple spaces found before '25'.(no-multi-spaces)

こちらについては、以下のように eslintrc.json に定義しておけば、空白を許容し取り除かれなくなります。

"no-multi-spaces": {
  [
    "error", {
      exceptions: {
        "ArrayExpression": true
      }
    }
  ]
}

その他にも Object や変数宣言など JavaScript に関連する空白の許容は可能になっています。 （詳しくはドキュメントに載ってます）

しかし、TypeScript 特有の Type 宣言や Interface 宣言についてはドキュメントに記載がないため、空白を許容する設定ができず、このように書くしかありません。

type TestType = {
  name: string;
  genderCode: number;
  email: string;
}

ということで、 no-multi-spaces で TypeScript のType 宣言の空白を許容させる方法を調べてみました。

TypeScript のType 宣言の空白を許容させる

で、本題です。

試した環境

ちょっと古いけど。。。

typescript: 4.2.3
eslint: 7.23.0
typescript-eslint/perser: 4.20.0

設定するルール

exceptions に "TSTypeAnnotation": true を追加すれば良いです。

これだけで、 Type 宣言時の空白チェックを無視するようになります。

"no-multi-spaces": {
  [
    "error", {
      exceptions: {
        "TSTypeAnnotation": true
      }
    }
  ]
}

なぜこれで空白が許容されるようになるのか

ESLint はコードをパースして AST (Abstract Syntax Tree (抽象構文木)) の集合に変換し、チェックを行なっています。

これは TypeScript でも同様です。 ただし ESLint も TypeScript も変換される AST の Type(NodeType) の種類がそれぞれ定義されており、微妙に異なっています。

その差異を吸収するのが typescript-eslint/perser です。

そのため、TypeScript+ESLint の構成の場合、typescript-eslint/perser のみ意識すれば良いことになります。

ちなみに、AST についてはこちらが分かりやすかったです。

no-multi-spaces の exceptions のキーは、この AST の Type 名になっています。

配列の空白を無視するために設定した ArrayExpression や今回紹介した TSTypeAnnotation も AST の Type の名前です。ですので、ESLint のドキュメントに記載がない設定も空白を許可させることが可能になっています。

この AST については AST Explorer で、確認ができます。

今回紹介したno-multi-spaces ルールに無視する AST Type を確認する場合には、以下のように設定し、typescript-eslint/perser でパースする必要があるので注意してください。

AST Explorer

おわりに

インゲージでは TypeScript を語りたいフロントエンジニアを絶賛募集中です。

ご応募お待ちしてます。

↓↓↓↓↓↓↓↓↓↓↓↓↓

ingage.co.jp