プログラミングをする上で関数や変数の命名って難しいですよね。
命名規則に則って命名するにしても、いかに処理や格納されたものが伝わりやすい名前にするか悩みやすいポイントですが、最低限タイポはなくしたいところです。
タイポやスペルミスは、呼び出しの際に名前が違っていてnot foundエラーで呼び出せなかったり、そもそもの関数定義で名前から何を処理するのか判断しにくくなる可能性がありますし、何より恥ずかしい…。
そこで便利なのが、「Code Spell Checker」です。
Code Spell Checkerとは？
その名の通りコードを監視してスペルミスがあればエラーで教えてくれるVScodeの拡張機能です。
コードでスペルミスがあれば対象の文字に波線で教えてくれます。
ちなみに上の画像でエラー箇所の右側に表示されているエラーメッセージは「Error Lens」という拡張機能による表示です。
通常では画面下のパネルに表示されて列・行はどこでどんなエラーなのか照らし合わせが面倒ですが、この拡張機能を使えばどこでエラーが起きているのかが分かりやすく、「Code Spell Checker」と一緒に使うとさらに便利です。
スペルミスじゃないのにエラー扱いされてしまうケースも
「Code Spell Checker」はインストールするだけでもコード内のスペルミスをチェックしてくれる便利な拡張機能ですが、スペルミスじゃないのにエラー扱いされてしまうこともあります。
よくあるのが、QiitaやTailwind CSSといった固有名詞がエラーとして引っかかってしまうケースや二つ以上の単語をキャメルケースで繋げなかったケース（「Tailwind CSS」だったら「tailwindcss」）です。
キャメルケースは自身で関数や変数の名前を設定する場合には書き換えればいいだけなのですが、インストールしたパッケージなど変更ができない場合があります。
エラー扱いさせないために特定ワードを除外登録
処理させる上では無視しても大丈夫なのですが、いつまでもエラー判定されるのも気持ち悪いですよね。
今からご紹介するエラー判定を回避するための設定はとても簡単です。
まずエラーのあるワードにマウスホバーします。表示されたウインドウから「Quick Fix（クイックフィックス）」を選択します。（「Ctrl+,」でも表示できます）
修正候補が表示されるので、「Add～」から始まる項目を選択します。
たったこれだけです！とても簡単ですね。
登録したワードの解除方法
間違えて登録した、一度は除外登録したけどまたエラーで返してほしいといった登録した除外ワードを解除したい場面もあると思います。
登録ワードの解除には、ユーザー単位で登録したかワークスペース単位で登録したかで設定記載場所が変わります。
ユーザー設定の場合
ユーザー設定で登録した場合は、設定画面（Ctrl+,）のsetting.jsonから登録を解除していきます。
setting.jsonを開いたら「cSpell.userWords」から登録解除したいワードを削除します。
ワークスペース設定の場合
ワークスペース設定の場合は、ユーザー設定と同様に設定画面からも設定できますが、エクスプローラーツリーからでも参照することができます。
除外ワードの登録でワークスペースを選択した場合はエクスプローラーツリーの「.vscode」フォルダ直下に「setting.json」が作られています。
ファイルを開いて「cSpell.userWords」から登録解除したいワードを削除するだけでOKです。
最後に
いかがでしたか？「Code Spell Checker」はプログラミングだけでなくドキュメント作成時にも使えて、導入も登録・解除も簡単なので、これからVScodeを始める方もすでにバリバリVScode使ってたけど入れてなかった！という方にはぜひ一緒に入れてほしい拡張機能です。
VScodeをこれから使ってみる、という方はオススメの設定や拡張機能をこちらの記事で紹介しているので参考にしてみてください。
それでは「Code Spell Checker」で快適なプログラミング生活をお過ごしください！
