【eslint】 JavaScript (*.js) と TypeScript (*.ts) が混同しているプロジェクトに typescript-eslint を導入した際のメモ

最近、実践TypeScriptという本を読み切りました。 （全てものにできたかというと...orz また何かを作りながら読み返す必要がありそう...）

勉強しながら検証コードを書いていたところで、typescript-eslintというeslint系のライブラリの存在を知りました。

• GitHub - typescript-eslint/typescript-eslint: Monorepo for all the tooling which enables ESLint to support TypeScript

typescript-eslintを jsファイル（JavaScript） / tsファイル（TypeScript）が混同したリポジトリに導入しようとした際、typescript-eslintがjsファイルにも適用、大量のエラー / 警告が発生してしまいました。

この記事では、上記の現象を解決した際のメモを書き留めておきたいと思います。

typescript-eslintとtslintについて

typescript-eslintは、eslintのTypeScript版のプラグインです。

同じようなLintツールとして、tslintというものも存在します。

• GitHub - palantir/tslint: An extensible linter for the TypeScript language

tslintとtypescript-eslintの違いはなんだろう...？と思っていたところ、
typescript-eslintのREADME.mdにtslint→typescript-eslintに移行する旨が記載されていました。

以下の記事にて、移行する経緯の要約・解説がされています。もし、経緯が気になる方は以下の記事を参照してみてください。

qiita.com

tslintの設定を使い続けたいという方（2019/09頃時点）

typescript-eslintのREADME.mdにて、eslint-plugin-tslintというプラグインが紹介されています。

• typescript-eslint/packages/eslint-plugin-tslint at master · typescript-eslint/typescript-eslint · GitHub

{
  "plugins": [
    "@typescript-eslint/tslint"
  ],
  "parserOptions": {
      "project": "tsconfig.json",
  },
  "rules": {
    "@typescript-eslint/tslint/config": ["warn", {
      "lintFile": "", // path to tslint.json of your project
      "rules": {
        // tslint rules (will be used if `lintFile` is not specified)
      },
      "rulesDirectory": [
        // array of paths to directories with rules, e.g. 'node_modules/tslint/lib/rules' (will be used if `lintFile` is not specified)
      ]
    }],
  }
}

lintFileにtslint.jsonのパスを指定してあげれば、eslintにtslintの設定を引き当てることができそうです。

自分自身も試していなく、申し訳ないのですが、もしtslintの設定を使い続けたい方は、eslint-plugin-tslintの導入を検討してみるのも良いかもしれません。

本編

では、

typescript-eslintを jsファイル（JavaScript） / tsファイル（TypeScript）が混同したリポジトリに導入しようとした際、typescript-eslintがjsファイルにも適用、大量のエラー / 警告が発生してしまいました。

の解決手順を書いていきます。

解決手順

eslintでは、ファイルごとに設定を変更できるGlobという仕組みがあります。

• Glob based configuration · Issue #3611 · eslint/eslint · GitHub

それをoverridesと併用し、

module.exports = {
  // 共通の設定
  env: {
    es6: true,
    node: true
  },
  extends: ['eslint:recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    // 共通のルールを設定
    semi: ['error', 'never'],
    quotes: ['error', 'single'],
    indent: ['error', 2]
  },
  overrides: [
    // TypeScript系ファイルへのルールを設定
    {
      files: ['**/*.ts'],
      extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended'
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        sourceType: 'module',
        project: './tsconfig.json'
      },
      plugins: ['@typescript-eslint'],
      rules: {
        // TypeScript系のファイルに対しての設定を行う
      }
    }
  ]
}

のような形で書きます。

すると、typescript-eslintの設定がTypeScript (.ts)のみに反映され、JavaScript(.js)に対してはtypescript-eslintの設定が行われない状態となります。

おわり

一読ありがとうございました。 🙇‍♂️

間違いや気づき点等ありましたら、フィードバックいただけると助かります！ 🙏

参考文献

以下、お世話になった記事となります。

• ESLint v4.1.0 - Qiita
• @typescript-eslint ことはじめ - teppeis blog