@typescript-eslintを使ってTypeScriptでもESLintする@2019

メモ 知見

3行

  • MSのTSチームがESLintを推進させ始めた
  • まだ完璧ではないがだいぶ安定してきてそろそろTSでも現実的にESLintできるようになってきた気がする
  • やってみましょう

手っ取り早く動かす設定だけみたい人は

💁🏻‍♀️ My airbnb based ESLint config for "typescript-eslint" with React & prettier · GitHub

なぜTSでESLint?

Q. TSLintあるんだしTSLintじゃダメなの？

A1. ESLintにある便利なルールがTSLintにない(あるいは実現できない)ことがある

例えばReactのルールをやってるeslint-plugin-reactには(react/no-array-index-key)というルールがあって、配列のindex値をコンポーネントのkeypropsに使うと怒ってくれるものがある。

TSLintにはこれはいまのところない…。(Issueは立っているが無反応っぽい: https://github.com/palantir/tslint-react/issues/184)

A2. ESLintとTSLintに互換性がない

そもそも互換性がないから２つのlintツールに別け隔てがあって上記の例みたいにあっちにはあるやつがこっちにはない状態になっている。

あとルール名の互換性もないのがあって両者でルール名が違ったりしているものもある。

A3. TSLintは後回しになりがち

ここ最近だとReactのHooksが出て記法ルールがいくつかあるからということでオフィシャルチームがeslint-plugin-react-hooksというものを提供している。

ただこれはESLintなのでTSで使いたい場合有志がTS版を作るしかなくて、どうやってもTSは後手後手になってしまう。

ユーザー的にもコミュニティ的にもしんどい！

背景

認識間違ってなかったら大筋はこんな感じ(なはず)。

ESLintでTSをLintする

本題。

プロジェクト単位でESLintでTypeScriptの面倒をみる方法を書く。

CAVEAT

あらかじめ予防線を張っておくけれどtypescript-eslintがv1-stableとはいえ各ライブラリはTS対応に際して頑張っている様子なので今後もすぐ変動がありそう。なのでここに書いてある物事が非推奨になったり、設定が変わったりいらなくなったりすると思う。あくまで参考にする感じで見てもらったほうがいいと思う……。

あとなんか間違ってるかも知れないので間違ってたら教えて下さい！

あとyarn使う前提で書いています。

要件と流れ

tech-1natsu.hatenablog.com

↑以前書いた記事

基本的に以前書いたこれと一緒。

  • TSファイルを
    • ESLintする
    • Prettierもする

TSだからといってJSをESLintする方法と流れはなんら変わらない。

変わるのはTS用のプラグインを入れまくってそれに伴う設定を.eslintrcにいろいろ書くという点。

登場人物(ライブラリ)

typescript-eslint(爆誕したモノレポ)

これのおかげでTSでもESLintできるように。

スコープ名は@typescript-eslint。

モノレポはhttps://github.com/typescript-eslint/typescript-eslint。

あと@typescript-eslint/eslint-plugin-tslintというのもあって、これは既存TSLintをESLint内で処理するやつみたい(?)今回は使わない。

モノレポ内には@typescript-eslint/typescript-estreeというものあってこれはAST変換くん。@typescript-eslint/parserが中で使っている。ユーザーはASTをなんちゃらしない限り直接触ることはない気がする。

ESLint

Prettier

  • prettier
    • https://prettier.io
      • JSコードフォーマッタ
      • 本体
    • eslint-config-prettier
      • PrettierとESLintで競合するルールを無効化するくん
    • eslint-plugin-prettier
      • ESLintルールとしてPrettierを実行するくん

インストールしてeslintrcを書く

上記の登場人物たちをインストール。

yarn add -D eslint prettier @typescript-eslint/{eslint-plugin,parser} eslint-config-prettier eslint-plugin-prettier

したら.eslintrcをプロジェクトルートに設置

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    /**
     * @description rules of eslint-plugin-prettier
     */
    "prettier/prettier": "error"
  }
}

余談ではあるがVSCodeで.eslintrcのコメント箇所が怒られるときはファイルの言語設定を『jsonc』にすると怒られなくなる。

npm-scriptsのlintコマンドを書く

package.jsonに

"scripts": {
  "lint": "eslint src/** --ext .ts,.tsx",
  "lint:fix": "yarn lint --fix"
}

みたいな感じでやると………

動いた！

f:id:hitonatsu:20190210201216p:plain
動いたはいいが怒られまくっている😇

この後はあとは怒られた箇所をチマチマ直したりする作業という流れになるかと思う。

VSCodeユーザーのエクステンション設定

TSだけどLintingはESLintなのでESLintプラグインで担う必要がある。

marketplace.visualstudio.com

これを入れて、

お手元のVSCodeのsettings.jsonに以下を足す。

 "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],

これでonSave時にautoFixしてくれるようになってこれまで同様にLint体験できてハッピ〜。

FAQ

React使うんですがどうすればいいですか

airbnbベースのオレオレルールでHooksのルールも加えたexampleは以下です

TSLintオワコンなんですか

まだわかりません(僕はよく知りません)

個人的な感想としては最近MSチームがVSCodeのTSLintエクステンションを作り直しているので、オワコンではなさそうという雰囲気も感じます。

github.com

VSCodeにTSLintとESLintの拡張機能両方入れてるんですが……

僕も悩んでいて困っています。どっちもTSLintのプロジェクトもあるのでTSLintのエクステンション捨てられないし、上述の作り直されているTSLintのプラグインの件もあるのでどうすればいいのか……。

ESLintのエクステンションの説明書きのコマンド一覧にに

・Disable ESLint for this Workspace: disables ESLint extension for this workspace. ・Enable ESLint for this Workspace: enable ESLint extension for this workspace.

と書かれているのを発見して『ワークスペースごとに設定すればよさそう！』と思ってコマンドパレット見たところ

このコマンドたちはなぜか僕の手元にはいなくて破滅しました。

オレたちのESLint with TSはまだこれからだ！という感じなのでぼちぼちやっていきましょう。