✂️

既存のプロジェクトにしれっとKnipを導入して不要なファイルが増えないようにする

2024/11/11に公開

はじめに

チームで開発していると、たまにどこからも使われてない謎のファイルが残っちゃうことありますよね。
変更だと差分が出てくれるのでレビューしやすいのですが、「使われなくなった」を発見するのは結構難しい…
そんな悩みを Knip が解決してくれそうだったので、既存のプロジェクトにしれっと入れてみました。

Knipとは

https://knip.dev/
不要なファイルや不要な export を検知してくれるやつ。

しれっと入れる

基本公式サイトの指示どおりにやるだけです。

yarn create @knip/config

これでインストールされます。

yarn knip

これで実行。
不要と判定されたファイル、export、パッケージなんかがドカンとでてきます。

ここで

yarn knip --fix

と実行すると自動で修正までしてくれますが、今回はあくまで「しれっと」入れたいので既存の実装は触らずおくことにします。

プロジェクトルートに knip.config.ts を作成。

import { type KnipConfig } from 'knip';

const config: KnipConfig = {
  // エントリーポイント
  entry: [],
  // 対象とするファイルのパターン
  project: ['**/*.ts'],
  // 無視するファイルのパス
  ignore: [],
  // 無視するパッケージ
  ignoreDependencies: [],
  // 無視する package.json のscripts
  ignoreBinaries: [],
}

export default config;

まずエントリーポイントに探索の始点となるファイルを指定します。

使用しているフレームワークによっては特に指定なしでも動くっぽいですが、今回のプロジェクトの場合いくつか手動で追加しないとダメでした。

次に yarn knip を実行しつつ、

  • Unused filesになったファイルは ignore に入れる
  • Unused dependencies になったパッケージは ignoreDependencies に入れる
  • Unlisted binaries になった scripts は ignoreBinaries に入れる

といったことをちまちまとやります。

ファイル単位での ignore が終わったら、次は行単位での ignore です。

やり方は

/** @knipignore */
export const hoge = 'hoge';

こんな感じでJSDoc風味のタグをつけて

yarn knip --tags=-knipignore

こんな感じで実行すると無視してくれます。

Unused exportsUnused exported types あたりをちまちまちまと ignore します。

すべて対応すると、

Excellent, Knip found no issues.

とお褒めの言葉をいただけます。

しれっと CI 化する

今後不要なファイルや export などが増えないように、GitHub Actions を入れてPRごとにチェックするようにしておきました。

やり方は↓に書いてあることそのままなので割愛します。

https://knip.dev/guides/using-knip-in-ci

気になったこと

@knipignore が不要になると Knip 実行時 Tag issues として検出してくれるのですが、これはエラー扱いではなく CI も通ります。

不要になった@knipignoreがいつまでも残ってしまうので、これエラーにするオプションも欲しいなー

まとめ

Knip をしれっと導入できました。

派手さはありませんが、不要ファイルや謎 export といったものはどんなプロジェクトでもいつの間にか増殖しているもので、邪魔だなと思ったときには経緯がよくわからなくて消しにくい...となりがちなので、それらを早期発見して減らせるのは可読性やメンテナンス性の面で後々効いてきそうです。

Discussion