【VSCode】Code Spell Checkerでスペルミスを防ぐ

このページでは、VSCode（Visual Studio Code）の拡張機能「Code Spell Checker」を紹介していきます。

早速ですが、下の図では、月曜日 〜 日曜日を英語に訳した文字列の配列の作成を行なっています。ただし、文字列の中にスペルミスがあります。どの文字列にスペルミスがあるか分かるでしょうか？

このスペルミスは、VSCode の拡張機能 Code Spell Checker を利用すれば一瞬で見つけることが出来ます。Code Spell Checker を有効化した状態で先程のソースコードを表示すると下の図のようになります。

青い波線が表示されていることが分かるでしょうか？このように、スペルミスがある場合、Code Spell Checker はスペルミスがある文字列を青い波線で示してくれます（波線の色は環境や設定等によって異なる可能性があります）。

インテリセンス機能でもコードの補完機能などがあってスペルミスを防ぐことが出来ますが、あれは言語やライブラリ等で用意されている関数名等を正しく入力するための機能であり、一般的な用語に対してスペルミスが発生しているかどうかまでは判断してくれません。

Code Spell Checker は、上記の曜日の例のように、ソースコード上の文字列や変数・関数名等に対して、一般的な用語としてスペルミスが発生していないかどうかを見つけてくれる拡張機能になります。

Code Spell Checker のインストール

Code Spell Checker は拡張機能の１つであり、インストールするだけで使用することができ、インストールするだけでスペルチェックが機能するようになります。

インストールも簡単で、拡張機能を “code spell checker” で検索すれば簡単に見つけることが出来ます。

“code spell checker” で検索すると、Russian - Code Spell Checker のように 言語名 - Code Spell Checker という名前の拡張機能がたくさん見つかると思いますが、言語名のついていない無印の Code Spell Checker を使うので良いと思います（おそらく “code spell checker” で検索すると、検索結果の一番上に表示されると思います）。

あとは、インストールボタンをクリックすれば、Code Spell Checker がインストールされて有効化されます。

その後、ソースコードを表示すれば、スペルミスがある文字列や変数名、関数名の部分に青色の波線が表示されるようになっているはずです（もしスペルミスがあるのに波線が表示されない場合は VSCode の再起動をしてみてください）。

Code Spell Checker の使い方

ここでは基本的な Code Spell Checker の使い方について紹介していきます。

スポンサーリンク

スペルミスを見つける

まず、Code Spell Checker はインストールして有効化するだけで、スペルミスがある単語を波線で示してくれるようになります。

ですので、ソースコードを記述していて波線が表示された際に、その波線が付いた単語のスペルを修正する、というのが、基本的な使い方になります。

スペルミスを修正する

もちろん自身の手でスペルを修正することもできますが、「クイックフィックス機能」を利用することで、スペルの修正候補の一覧を表示し、その中から修正したいスペルのものを選択することで、簡単にスペルを修正することもできます。

クイックフィックス機能を利用するためには、まず波線が表示された単語の位置にマウスカーソルを合わせます。そうすると、下の図のように、波線が表示されている原因を示すメッセージが表示されます。

このメッセージの下側にある クイックフィックス... と記述された部分をクリックすることで、クイックフィックス機能が起動します。

クイックフィックス機能が起動すると、下の図のように修正後のスペルの候補がいくつか表示されます。

ここで、自身が望む候補をクリックすれば、自動的にスペルミスのあった単語のスペルがクリックした候補のものに修正されます。

こんな感じで、スペルミスのある単語を手動 or クイックフィックスで修正していくのが、Code Spell Checker の基本的な使い方になります。

単語登録を行なってスペルミスと判断されないようにする

ただ、例えば固有名詞など、中にはスペルミスと判断されたくない単語などもあると思います。

そういった単語に関しては、Code Spell Checker に単語登録することで、以降はその単語をスペルミスと判断されることを防ぐことができるようになります。

これも先程紹介したクイックフィックスで簡単に登録可能です。

先程同様に、今度はスペルミスと判断されたくない波線が引かれた単語にマウスカーソルを合わせ、クイックフィックス機能を起動させます。

単語を登録するためには、add "登録したい単語" to workspace settings もしくは add "登録したい単語" to user settings を選択します（前者はワークスペース内でのみ単語登録を行う、後者はワークスペースを跨ってユーザー単位で単語登録を行う）。

そうすると、先程表示されていた波線が消え、以降は単語登録した単語を記述しても波線が表示されなくなります。

登録された単語は settings.json にて管理されています。例えば、単語登録する際に add "登録したい単語" to workspace settings を選択した場合、ワークスペース直下の .vscode フォルダの下の settings.json で登録された単語が管理されています。

例えば、Tueseday という単語を登録した場合、settings.json に下記のように単語登録の設定情報が追記されることになります。

    "cSpell.words": [
        "Tueseday"
    ],

ですので、登録した単語を削除したくなったような場合は、削除したい単語を上記の settings.json から削除してやれば、またスペルミスのチェック機能が働くようになります。

    "cSpell.words": [
    ],

また、add "登録したい単語" to user settings により単語登録を行なった場合は、ユーザーの settings.json に下記のような設定が追記されることになります（Tueseday という単語を登録）。

    "cSpell.userWords": [
        "Tueseday"
    ],

このユーザーの settings.json の存在する位置は OS 等によって異なりますが、コマンドパレットから OS 非依存に開くことも可能です。この方法は下記ページで解説していますので、詳しく知りたい方やユーザーの setting.json を変更したいという方は下記ページを参考にしていただければと思います。

【VSCode】settings.json の開き方

スポンサーリンク

まとめ

このページでは、VSCode の拡張機能である Code Spell Checker の紹介を行いました！

スペルミスがある場所を教えてくれるので、スペルミスを防ぎ、さらにそれにより読みやすいソースコードにすることが出来ます。

完全にスペルミスを全て検出できるわけではないですが（スペルミスした結果が他の単語になっている等）、それでもスペルミスに気づきやすくなることは間違い無いと思います。

今回紹介した Code Spell Checker のように、VSCode には便利な拡張機能がたくさんあり、それらを有効に利用することでプログラミングの効率を向上させることが出来ます。

また便利な拡張機能を見つけたら紹介したいと思います！