✂️

不要なexportや依存関係を削除できるKnipの使い方

2023/09/21に公開

はじめに

JavaScriptやTypeScriptでコードを書いているとき、こんな経験はありませんか?

  • exportしているのに、他のどこからもimportされていないクラスや関数があった
  • 以前は使っていたが、今は使っていない依存関係がpackage.jsonに残っていた

ファイル内でどこからも参照されていないクラスや関数は、ESLintで検出できます。しかし、exportされている場合、どこからもimportされていなかったとしてもESLintでは検出できません。

このような問題を解決できるのが「Knip」です。

Knipとは

Knipを使うと、未使用のファイル、依存関係、exportを検出できます。

JavaScriptとTypeScriptの両方に対応しており、webpackやESLint、JSDocなども考慮しながら動作します。

https://github.com/webpro/knip

Knipの使い方

まずは、Knipをインストールします。

npm install -D knip

KnipにはwebpackやESLint、JSDocなどを考慮するさまざまなプラグインがあります。必要なプラグインが自動で有効化されるので、基本的に設定は不要です。

次のコマンドを実行すると、不要なファイルや依存関係、exportなどを検出できます。

npx knip

また、設定はknip.jsonで変更できます。ここでは、よく使う設定を紹介します。すべての設定は公式ドキュメントで確認できます。

knip.json
{
  "entry": ["src/index.ts"],
  "project": ["src/**/*.ts"],
  "ignore": ["**/*.d.ts", "**/fixtures"],
  "ignoreDependencies": ["hidden-package"]
}

entryではエントリーファイルを指定し、projectでは検査対象となるファイルを指定できます。

「Knipでは不要なファイルや依存関係だと表示されるが、実際にはどこかで利用している」といった場合は、ignoreignoreDependenciesを使います。ignoreで指定されたファイルと、ignoreDependenciesで指定された依存関係は除外されます。

まとめ

不要なexportを検出できるツールを探していたときに見つけたKnipを紹介しました。実際に使ってみていますが、依存関係やファイルの消し忘れも防げるので便利です。ぜひ使ってみてください!

Discussion