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


WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
Visual Studio CodeでMovable TypeのMTMLファイルを開く拡張機能「Movable Type Markup Language Syntax」
CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法
Gitで最初に設定しておくユーザー名とメールアドレスのグローバル設定
Visual Studio Codeでできる最低限のGit操作方法
ターミナルでGitを使う時に最低限覚えておきたいコマンド
Vue CLIでの画像パスの指定方法・配置場所まとめ
GUIコンパイラのPreprosを使ってSassのコンパイルを行う
Local by Flywheelのページ遷移を軽くする設定
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Finder上のGoogle Driveパスが「/Volumes/GoogleDrive-10951…」のように数字の羅列が追加されておかしくなった場合の対処法
Gmailでとりあえず最初にしておくと便利な設定
Backlogフリープランでプライベートの課題管理を行う方法
日々の制作をラクにするTips #1日1Tips – 2019年10月
BetterTouchToolの設定ファイルをエクスポート・インポートする方法
Ulyssesで原稿を修正前の状態に戻せるバージョン管理機能やバックアップ機能
Google Maps APIをローカル開発環境で使用するときの制限設定方法
Visual Studio CodeでIllustratorのスクリプトを書く時に便利な拡張機能「ExtendScript Debugger」
Figmaでデザインを作成するときの基本的な操作方法
npm install時に「cb() never called!」とエラーが表示されたときの解決法