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

コーディングをしているとき、たまに英単語のスペルミスをしていて、その影響で反映されていないことがあります。
実際に昔経験したことですが、「class」を「clsas」と打ち間違えていて、全然スタイルが反映されずにCSSファイルの読み込みやキャッシュなどいろいろ探って、結局スペルミスだった……なんてことがありました。
こうしたムダな時間を過ごさないためにも、英単語のスペルミスがないかチェックしてくれていると助かります。
今回はVisual Studio Code上で英単語のスペルチェックをしてくれる拡張機能の「Code Spell Checker」についてまとめておきます。
Code Spell Checker

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を使っていれば、全員プロジェクト固有の単語は無視されるようになります。


JavaScriptのテンプレートリテラル内で条件分岐を行う方法
gulp-plumberとgulp-notifyでgulpエラー時にデスクトップで通知がくるようにする
Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方|Dart Sass入門
Google Maps APIでピンのアクティブ時にピン画像を変える方法
Local by FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がる
HTML・CSSでWebサイト制作を行う際に必要なツール
Visual Studio CodeからFTPソフトのTransmitを使用する拡張機能「Transmit」
pointer-eventsプロパティでクリックイベントを無効化にする|気になるCSSプロパティ
Vue Routerでページ遷移後にトーストを表示させる方法
Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOS Mojaveに移行したタイミングでPathFinder8にバージョンアップしました
1PasswordのChrome拡張機能 (パソコンのアプリが必要)のインストール場所が分かりにくい
Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
Path Finder 8で使えるツールバーの項目一覧
Hazelで「ゴミ箱」の中身を空にする作業を自動化してしまう
ATOKで言葉の意味を確かめる「電子辞典検索」タブの設定項目
Macの基本操作をラクにするために使っているユーティリティアプリ
Google Chromeのタブを1つにまとめる拡張機能「OneTab」
テーブルタグ一式をすばやく・ラクに入力するためのスニペットサンプル