Visual Studio Codeで英単語のスペルチェックをしてくれる拡張機能「Code Spell Checker」

コーディングをしているとき、たまに英単語のスペルミスをしていて、その影響で反映されていないことがあります。

実際に昔経験したことですが、「class」を「clsas」と打ち間違えていて、全然スタイルが反映されずにCSSファイルの読み込みやキャッシュなどいろいろ探って、結局スペルミスだった……なんてことがありました。

こうしたムダな時間を過ごさないためにも、英単語のスペルミスがないかチェックしてくれていると助かります。
今回はVisual Studio Code上で英単語のスペルチェックをしてくれる拡張機能の「Code Spell Checker」についてまとめておきます。

Code Spell Checker

marketplace.visualstudio.com

Code Spell Checker - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Extension for Visual Studio Code - Spelling checker for source code

Code Spell Checkerをインストールすると、コード内でタイプミスをしている場所に波線が引かれます。

文字が目立つようになるので、スペルミスに気づきやすくなります。

基本的な使い方

インストール後は、自動でスペルミス時に波線が引かれます。

設定の変更

ホワイトリストの追加

デフォルトのままだと、ローマ字を使っていたり、製品・サービス名などが造語の場合にも波線が引かれてしまいます。

波線が引かれてあるとややこしいので、そのような場合はホワイトリストに単語を登録することで無視できます。

settings.jsonで設定する場合は「”cSpell.userWords”」に配列を追加し、その中にホワイトリストに登録したい単語を記載します。

もしくは、Visual Studio Codeメニューバーの［Code］→［基本設定］→［設定（command + ,）］を選択して設定画面を開いたあと、「C Spell: User Words」の「項目の追加」をクリックします。

入力欄が表示されるので、ここで追加したい単語を入力して「OK」をクリックしてもsettings.jsonに追加されます。

他にも、ファイル内でテキストを選択し、右クリックメニューから「Add Words to User Settings」でもsettings.jsonに追加されます。

ワークスペース内でのホワイトリストの追加

ファイル内でテキストを選択し、右クリックメニューから「Add Words to Workspace Settings」を選択すると、ワークスペース内のsettings.jsonに追加されます。

これでプロジェクト固有の単語をホワイトリストに追加できますし、このsettings.jsonを共有してメンバーがCode Spell Checkerを使っていれば、全員プロジェクト固有の単語は無視されるようになります。