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


Dashで「Secure Input is Enabled」と表示される場合の対処法
WebPに対応して画像サイズを最適化する方法
Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」
gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法
Vue CLIのtitleタグやmetaタグの設定方法
Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する
js-cookieでウェブサイトのダークモード表示設定をユーザーごとに保存しておく方法
iTerm2を使いこなすために覚えておきたいショートカット集
Macで.pemを使ってAmazon EC2インスタンスへSSH接続する方法
WordPressでコンタクトフォームを設置したいならこれ!!Contact Form 7のインストール方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Alfredの1Password連携で、登録しているウェブサイトではなくアプリでログイン情報を開く方法
Visual Studio CodeのEmmetのlang属性をjaに変更する方法
ATOKの辞書をmacOS標準の日本語入力のユーザ辞書にインポートする方法
Google Drive内のドキュメントを検索して開けるAlfredのWorkflow「Google Drive Workflow for Alfred」
iPadの定番手書きノートアプリ「GoodNotes 5」の基本的な使い方とオススメの設定
Marpで既存Markdownファイルを使ったスライド作成時に、見出しごとにスライドを分割する方法
WordPressでショートコードを作成する方法
Googleカレンダーに月末の繰り返しイベントを追加する方法
MacのGoogle Chromeで選択した文章を読み上げてもらう方法
AlfredでFigmaのチーム・プロジェクト・ファイルを素早くの検索ができる「Alfred Figma Workflow」