cspellでコード中の英単語スペルミスをコミット前に自動チェックする

はじめに

コードレビューで「recieve じゃなくて receive では？」と指摘された経験はないでしょうか。変数名や関数名のスペルミスは動作には影響しませんが、可読性を下げ、検索でも引っかからなくなります。

cspell はソースコード向けのスペルチェッカーです。コメント・文字列・変数名・関数名まで幅広くチェックしてくれます。この記事ではcspellの導入方法と、Huskyを使ったコミット前の自動チェック設定を解説します。

前提条件

Node.js 18以上
Huskyとlint-stagedがセットアップ済みであること

Huskyのセットアップがまだの場合は「HuskyとBiomeでコミット前に自動lintを実行する設定方法」を参照してください。

cspellをインストールする

npm install --save-dev cspell

動作確認

インストールできたらまず手動で動かしてみます。

npx cspell "src/**/*.{ts,tsx,js,jsx}"

スペルミスが見つかると以下のように表示されます。

src/utils/helper.ts:5:10 - Unknown word (recieve)
src/components/Button.tsx:12:5 - Unknown word (hnadler)

問題がなければ何も表示されません。

設定ファイルを作成する

プロジェクトルートに cspell.json を作成します。

{
  "version": "0.2",
  "language": "en",
  "words": [],
  "ignorePaths": [
    "node_modules/**",
    ".git/**",
    "dist/**",
    "*.lock",
    "*.json"
  ]
}

プロジェクト固有の単語を登録する

プロジェクト名や独自の略語など、辞書にない単語は words に追加します。

{
  "version": "0.2",
  "language": "en",
  "words": [
    "hatenablog",
    "hatena",
    "biome",
    "pnpm"
  ],
  "ignorePaths": [
    "node_modules/**",
    "dist/**",
    "*.lock"
  ]
}

words に登録した単語はエラーとして扱われなくなります。

特定の行を無視する

どうしても辞書に登録したくない場合は、インラインコメントで無視できます。

// cspell:disable-next-line
const unusualVarName = "something";

const value = "tekitounaword"; // cspell:disable-line

ファイル全体を無視する場合はファイルの先頭に追加します。

// cspell:disable

Huskyのpre-commitフックに追加する

既存の .husky/pre-commit にcspellを追加します。

npx lint-staged
npx cspell --no-progress "**/*.{ts,tsx,js,jsx,md}"

lint-stagedと違い、cspellはステージングされたファイルだけでなく全ファイルを対象にしています。変更ファイルだけに絞りたい場合は lint-staged の設定に追加する方法もあります。

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "biome check --write",
      "cspell --no-progress"
    ],
    "*.md": [
      "cspell --no-progress"
    ]
  }
}

スペルミスが多すぎて困る場合

既存プロジェクトに導入すると大量のエラーが出ることがあります。その場合は一時的に --no-exit-code オプションで警告のみにして、段階的に修正していくのがおすすめです。

npx cspell --no-progress --no-exit-code "src/**/*.{ts,tsx}"

まとめ

cspell でコード中の英単語スペルミスを自動検出できる
cspell.json でプロジェクト固有の単語を登録して誤検知を減らせる
Huskyのpre-commitフックに組み込むことでコミット前に自動チェックできる
既存プロジェクトへの導入は --no-exit-code で段階的に進めるのがおすすめ