はじめに

タイポはソースコードやドキュメント上の様々な場所に紛れ込みます。実行時のエラーだけでなく、可読性や保守性を下げることになります。

本記事では VSCodeにCode Spell Checker／Error Lens を導入することにより、タイポの低減と早期発見を促進する環境を整えます。

タイポで起こる問題

• タイポや一般的に使用されない略語により、可読性が低下
• タイポによる検索漏れが発生
• 表に出てしまう情報にタイポの混入により、信頼性が低下

タイポを減らすために

以下の事柄を実行し、タイポの低減を狙います。

• Code Spell Checkerにより、スペルチェックを行う
• タイポの即時フィードバックを得る
• プロジェクトの辞書を運用する

Code Spell Checker

まずは拡張機能のインストールを行います。Code Spell Checkerの拡張機能をインストールします。

Error Lens

次にError Lensの拡張機能をインストールします。Error LensはVSCode上にメッセージをインラインテキストとして表示を行う拡張機能です。メッセージは表示タイプを選択でき、デフォルトではerror・warning・infoの3種類のメッセージが表示されます。

Error Lens自体は特に設定は必要なく、インストールするだけで問題ありません。もし、VSCodeの使用テーマによって色が見にくい場合があれば、調整をしてみましょう。

Code Spell Checkerの設定

プロジェクト毎にCode Spell Checkerの設定を行う場合は、.vscode/settings.json、またはcSpell.jsonに記載を行います。

HTML関連の語句を辞書に追加したい場合

// .vscode/settings.json
{
  "cSpell.dictionaries": ["html"]
}

// .vscode/settings.json
{
  "cSpell.dictionaries": ["html"]
}

のように記述します。
元々Code Spell Checkerに組み込まれている辞書はGitHubから確認することができます。様々な言語が組み込まれているので、使用する言語によって設定を変更します。
例えば、WordPressのテーマ開発を行いたい場合、

// .vscode/settings.json
{
  "cSpell.dictionaries": [
    "html",
    "css",
    "php",
    "typescript",
    "sql"
  ]
}

// .vscode/settings.json
{
  "cSpell.dictionaries": [
    "html",
    "css",
    "php",
    "typescript",
    "sql"
  ]
}

あたりを設定しておくと良いです。

辞書の使用

外部から辞書をインポートすることも可能で、多くの場合はnpmからインストールすることになります。試しにpokemon辞書を使用してみましょう。

辞書を使用しなかった場合、pikachuの語句がタイポとして認識され、メッセージが表示されています。npm経由で辞書をインストールしてpokemon辞書を有効化してみましょう。

npm install --save-dev @cspell/dict-pokemon

npm install --save-dev @cspell/dict-pokemon

// .vscode/settings.json
{
  "cSpell.import": ["@cspell/dict-pokemon/cspell-ext.json"],
  "cSpell.dictionaries": ["pokemon"]
}

// .vscode/settings.json
{
  "cSpell.import": ["@cspell/dict-pokemon/cspell-ext.json"],
  "cSpell.dictionaries": ["pokemon"]
}

すると、タイポによるメッセージが表示されなくなりました。

このように外部から辞書を使うことも可能なため、プロジェクトやサービスがマルチレポの場合でも辞書ファイルをパッケージ化することで、共通の辞書として利用することができます。

また、特定の単語のみ語句登録を行いたい場合

{
  "cSpell.words": ["satoshi"]
}

{
  "cSpell.words": ["satoshi"]
}

設定ファイルに、wordsを追加することで、有効語句として認識することができます。

最後に

当社はこのような環境作りを通じて、より高品質なWebサイトの提供を目指しています。
詳細につきましてはお気軽にお問い合わせください。