
最近、実践TypeScriptという本を読み切りました。 (全てものにできたかというと...orz また何かを作りながら読み返す必要がありそう...)
勉強しながら検証コードを書いていたところで、typescript-eslintというeslint系のライブラリの存在を知りました。
typescript-eslintを jsファイル(JavaScript) / tsファイル(TypeScript)が混同したリポジトリに導入しようとした際、typescript-eslintがjsファイルにも適用、大量のエラー / 警告が発生してしまいました。
この記事では、上記の現象を解決した際のメモを書き留めておきたいと思います。
typescript-eslintとtslintについて
typescript-eslintは、eslintのTypeScript版のプラグインです。
同じようなLintツールとして、tslintというものも存在します。
tslintとtypescript-eslintの違いはなんだろう...?と思っていたところ、
typescript-eslintのREADME.mdにtslint→typescript-eslintに移行する旨が記載されていました。
以下の記事にて、移行する経緯の要約・解説がされています。もし、経緯が気になる方は以下の記事を参照してみてください。
tslintの設定を使い続けたいという方(2019/09頃時点)
typescript-eslintのREADME.mdにて、eslint-plugin-tslintというプラグインが紹介されています。
{ "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という仕組みがあります。
それを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の設定が行われない状態となります。
おわり
一読ありがとうございました。 🙇♂️
間違いや気づき点等ありましたら、フィードバックいただけると助かります! 🙏
参考文献
以下、お世話になった記事となります。