FC2 ブログ

ぎじゅつのメモ

参照していないimportをESLintでfixする

TypeScript

あらすじ

fokaccha.hateblo.jp

前回OpenAPI Generatorで生成したTypeScript向けAPIクライアント(typescript-fetch)がちょくちょく未使用なモノをimportしており、
その生成したクライアントをtsconfigの noUnusedLocals: true でカッチリと未使用変数を禁じて頑張ってるプロジェクトで外部パッケージとして取り込むとimportした瞬間死んでしまう。
そこで、eslint --fixを用いて未使用inportをふるい落す。

ホントはコード自動生成する際になんとか削ぎ落としておいて欲しいけど、難しいよね！
OpenAPI Generatorの中の人がんばって！

※追記: Compiler Options · TypeScript skipLibCheckをtrueにすれば良い気がする

ESLint?

ESLintはJavaScript のための静的検証ツール。
eslintコマンドには警告を自動修正してくれる--fixオプションがある。
※TypeScriptにはTSLintが存在していたが、最近非推奨になりESLintのTypeScriptプラグインでTypeScript向けの機能を提供していくらしい。
詳しいことはいろんな記事があるので参照するといいと思います。

どうするか

OpenAPI Generatorで生成したコードのリポジトリでeslintと@typescript-eslint/eslint-pluginをインストールしておく。
リポジトリ直下に .eslintrc.json というファイルを置いて、ここに検証するルールを記述していく。

未使用のimportをいい感じに削ってほしいわけなのだが
ESLintとTypeScriptプラグインのルールではダメで、例えば @typescript-eslint/no-unused-vars は警告までしか提供しておらず、残念ながらfixを提供していない。

何か良いものは無いかと探したら大体そういうものはあるので↓を利用する。
www.npmjs.com

インストールして.eslintrc.json は以下のような感じにする。

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "known-imports"
  ],
  "rules": {
    "no-unused-vars": "off", // デフォルトのruleはoffにしてプラグインの設定で上書きする
    "known-imports/no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error" 
  }
}

んで、 npx eslint --fix './*/.ts とコマンドを打てば未使用のimportをごっそり削ぎ落としてくれた！
上記コマンドはnpm scriptsのbuildスクリプトとかに組み込んじゃって自動生成コードを組み立てるときに常用するのが良さそう

おわり

結果importするだけで死ぬようなクライアントコードを脱却することができた。
OpenAPI GeneratorのTypeScriptクライアントコード、まだ人類に早い気がするが、実際お手々でAPIクライアントコードを書くより楽だし、超便利なので自動生成はいいぞ。