typescript-eslint-parserの導入でハマった話

typescript-eslint-parser を入れようとしてちょいちょいハマった
やんごとなき事情でJavaScriptとTypeScriptが混ざっている場合前提なので、TypeScriptオンリーであればここまで困らないと考えられる

TL;DR

• jsとtsが混在している場合、に--ext .js .tsみたいにjsファイルも一緒に食わせると色々コケて上手く使えない
  • typescript用のコマンドにして、configを別途渡そう
• 一部のルールは上手く動かない
  • 仕方ないけどdisableしよう
• // eslint-disable-lineとか// eslint-disable-next-line行単位の無効化が上手く動いてない
  • ファイル先頭での指定に切り替えていこう

詳細

Typescript用に別途設定ファイルを用意する

だいたいこんな感じで.eslintrc.jsがあると思う。これをTypescriptオンリーなプロジェクトならこれをtypescript-eslint-parserにしちゃうで良いが、混在のピロジェクトだとjsファイルをtypescript-eslint-parserが上手くパースできず色々なルールでコケる（コケないルールもある）

// .eslintrc.js 
module.exports = {
  :
  "parser": "babel-eslint",
  :
}

そのため、.eslintrcをextendしたconfigを別途作ると良い（typescriptとルール共有しなくていいなら別に化粧とかさせなくてもいだろう）

// .eslintrc.typescript.js
const baseConfig = require("./.eslintrc.js")

const overrideConfig = {
  parser: "typescript-eslint-parser"
}

module.exports = Object.assign({}, baseConfig, overrideConfig)

当然package.jsonでの起動も別途設定になる。-cオプションでconfigを渡し直す

// package.json
{
    "lint": "eslint javascripts/ --ext .js --fix",
    "lint:ts": "eslint javascripts/ -c .eslintrc.typescript.js --ext .ts --fix",
}

https://github.com/eslint/eslint/issues/3611
こちらの機能が実装されれば分割しなくてよくなりそうとのこと（ @mysticatea さんに教えていただきました！情報ありがとうございます！）

一部のルールは上手く動かないので除外する必要がある

ESLintのルールは当然Typescriptを考慮したものでないので、幾つか不都合のあるルールが存在するとのこと

このへんは惜しいが必要に応じてdisableにしていくしかない。自分の場合はno-unused-vars, no-undefをdisableする必要があった（インターフェース周りでどうしてもうまくいかない）
先ほどのeslintrc上書きを使って、ruleを打ち消してもいいかもしれない

// .eslintrc.typescript.js
const baseConfig = require("./.eslintrc.js")

const overrideConfig = {
  parser: "typescript-eslint-parser"
  rules: {
   "no-unused-var": 0
  }
}

module.exports = Object.assign({}, baseConfig, overrideConfig)

ちなみに、typescript-eslint-parserのreadmeにはESLintのルールのバグはこっちには報告しないでねとあるのでバグ報告する場合は注意

eslint-disable-lineとかが動いてない

バグな模様

こういうのが動かない。

console.warn(message) // eslint-disable-line

ファイル先頭に書く場合は動くので、そっちで代用

/* eslint-disable no-console */
 :
 :
console.warn(message)

ちょっと不便だが致し方なし