既存のプロジェクトにSpell Checkerを入れる
【概要】
- すでに間違ったスペルがあるプロジェクトにスペルチェッカーを導入する
- CSpellを使用する
- 一括で辞書登録する方法
CSpellをインストール
- 通常通りnpm instlal
npm i -D cspell- cspellの設定ファイルを作成。git管理して共有したいので、vscodeのパネルからファイル作成
cmd + shit + pでパネルを開いてcspellと入力すると絞り込めるので、Create a CSpell Configration Fileを選択
- 好きなファイル形式を選ぶ。今回はjsonの外部ファイルを作成
cspell.jsonと雛形が作成される
スペルミス削減設定方針
- まずは新たにスペルミスのある単語が追加されないようにする
- 徐々に既存のスペルミスを減らしていく
一気にやろうとするとなかなかマージ出来ないと思うので、1をとにかく素早く開発ブランチにマージする。
1. 新たにスペルミスのある単語が追加されないようにする
- 既存のスペルミスを無視する設定を行う
- コミット時にスペルミスをチェックし、新たなコミットにスペルミスをした単語が混入しない状態にする
順番はどちらからでも良いと思う
既存のスペルミスを無視する設定を行う
ここで辞書登録するべき単語なのかどうか精査をしようとするとなかなか進まないので、とにかく全てのエラーを無視するようにする
ここでcspellの設定項目を大まかに書くと
- ignorePaths: スペルチェックで監視しないディレクトリ、ファイルのパスを指定
- language: イギリス英語とかアメリカ英語とかの設定が出来る様子
- words: 正しい単語を登録する項目
- flagWords: 常に間違い扱いする単語を登録する項目
- ignoreWords: 常に無視する単語を登録する項目。flagWordsよりこちらが優先される
- dictionaries: 辞書を追加できる。
aws, golangなどすでにパブリッシュされているものがある。
設定ファイルを作成する
まずは監視対象外にするディレクトリとファイルを決める。デフォルトの挙動が少し謎で、デフォルトでnode_modulesは除外されていないようで、package-lock.jsonは除外されているようだった。ドキュメントなどにデフォルト値の記載はなかった。
// cspell.json上記の2段階{
"ignorePaths": ["node_modules/**", "config/**", "*.log", "*.svg"]
}
こんな感じで追加する。
既存のスペルミスを洗い出す
次にcliからスペルチェックを実行する。必須ではないが最終的にcliから実行できる状態にすることが多いと思うが、監視対象にするファイル、ディレクトリ、拡張子や、結果の出力など試行錯誤すると思うのでまだnpm scriptは書かなくても良いと思う。
今回は実行されるコード以外のテストケースやドキュメントなどでのスペルチェックも行いたいので、cspell.jsonで監視対象外としたパス以外は全てに対して実行するようにする。
npx cspell lint '**'これで既存のスペルミスが出力されるので眺めてみる。
やっぱり監視対象にするべきでないファイルやディレクトリが見つかると思うので、ignorePathsやdictionaryの追加などの検討と調整する。ここが面倒な作業になりがちだと思う。
例えばビルドしたファイルや自動生成されるコードが監視対象になっていることに気がついたり
辞書を追加すれば良さそうな単語が見つかったりすると思う。(gcpやfirebaseはなさそうだったけど・・・)
除外対象をignorePathに指定するのではなく、cli実行時にディレクトリや拡張子を指定することも出来る。ただ文字列の監視になり、今回のようにドキュメントなど含めて幅広くスペルチェックの対象にしたい場合は、ignorePathを充実させた方がやりやすそう。
結果の出力方法を変える
CSpellのcliのオプションはいくつかある
スペルミスした単語を登録する際に、重複なくabc順になっていると助かるが、残念ながらそのオプションはなさそう。
出力結果が省略されないコマンドラインを用意
出力結果が少ない場合は特に対応不要だが、それなりの規模になると数1000件のスペルミスが出力されることもある。
まずは一発でコピペ出来るようなコマンドラインを用意する iterm2 の設定を変える。itermでなくてもログが省略されなければ何でも良いと思う。
brew install iterm2itermのpreferencesを開き
terminalのUnlimited scrollbackにチェックを入れる
これで数千行のスペルミスのログが出力されても一発でコピーできる
出力結果を扱いやすいようにする
出力結果がコピペしやすいように実行コマンドにオプションを付与する
--no-progress途中経過を表示しない。こういうやつ
—-words-onlyファイルの場所などが省略されスペルミスした単語のみが表示される。
これらを組み合わせて
npx cspell lint '**' --no-progress --words-onlyこれでスペルミスしている単語一覧のみが出力できた
スペルミスしている単語を整形する
出力された結果は重複されていて、大文字小文字などもソースコード上のままで、abc順になっていないので整形する。
- vscodeに新たなファイルを作りペーストする
2. まず全て小文字に変換する。スペルミスに関しては大文字小文字は区別する必要がないと思うので全て小文字にする。全て選択した状態でvscodeで cmd + shift + p でパレットを開いて、 lower と入力すると Transform to Lowercase とでてくるので選択すれば、全て小文字になる
3. 目視しやすいようにabc順にする。全部選択して cmd + p でパレットを開き、sortと入力すると選択肢が出てくるので、一番上にある Sort lines(ascending, case insensitive) (昇順で大文字小文字を気にしない）を選択
4. そして重複を削除する。こちらもvscodeで cmd + shift + p でパレットを開いて duplicate と入力すると Delete Duplicate Linesとでてくるので、選択すると重複した行が消せる
5. 最後にjsonの配列にペーストできるように、ダブルクオテーションとコンマを付与する。正規表現を使って修正する。 cmd + f で検索窓を開き、 .* で正規表現が使えるようにし、文頭と文末を選択し、
^(.*)$文頭と文末にダブルクオテーションを追加、文末にコンマを追加する
"$1",
後はこれを cspell.json にペーストできる状態になった。
IgnoreWordsにスペルミスを追加
先程も書いた通り先程整形した単語一覧を cspe.jsonのignoreWords に追加する。
これでひとまずエラーを潰した。根本的な解決は設定が終わってからじっくりやるつもりでここはとにかくエラーを消す。
npm scriptを作成
cliからスペルチェックを実行出来るようにnpm scriptに追記。cache出来るのでcacheを設定する。その他必要に応じてオプションを付与する。
// package.json"scripts": {
"spell-check": "cspell '**' --cache"
}
cacheファイルは共有しないほうがトラブルが減ると思うので.gitignoreに追加。
// .gitignore.cspellcache
pre-commitでスペルチェックを実行
pre-commitでチェックする。huskyとlint-stagedで行う。設定は割愛する。pre-pushやciで先程作成したscriptを実行すればより確実。
{
"*.{ts,tsx,md,yml,json}": ['cspell lint --cache']
}これで新たにスペルチェックに引っかかるコミットが発生しなくなる。
2. 徐々に既存のスペルミスを減らしていく
正しい単語、正しくない単語、disableコメント、精査前の単語に分類していく。今は全てが精査前の状態。
- 精査前→
IgnoreWordsに未精査のとりあえずスペルミスエラーが出ていた単語を詰め込んだ状態。これ以降ここには単語を追記しない - 正しい単語→英単語としては正しくないが、プロジェクトでは正しい単語を
wordsに追記していく。 - 正しくない単語→ソースコードのスペルミスを修正し、
IgnoreWordsから消す - disableコメント→英単語としてもプロジェクトの単語としても正しくないがエラーではないもの、（APIKeyなど）は、ソースコード側にコードコメントを付与して対応する。
wordsに追加するとたまたま同じ単語があった場合にスペルミスに気が付かない可能性が0ではないのと、設定ファイルを見たときに本当か？という気持ちになる
// *.ts// cspell:disable-next-line
const API_KEY = AJFOIDJ_DFJOSDJFO_DJFJOBO
これらが完了して IgnoreWords がなくなったとき、プロジェクトのスペルミスは0になる！新たに追加が必要になったら words に追加していくと良い。
【まとめ】
- 既存のプロジェクトの設定を固くするのはスペルチェックに限らず大変
- とにかく新たなスペルミスを追加しないようにまずは設定と新規で増やさない仕組みを作る。
- 設定が終わったら分業も可能なので徐々に、場合によっては一気に既存のスペルミスを修正していけば良い。