スペルミスを防げるCSpell(スペルチェッカー)の使い方

CSpellとは
CSpellの使い方
設定ファイル cspell.jsonを用意する
flagWordsの設定で禁止ワードを追加する
suggestWordsで予測される単語を追加する
正規表現で特定のワードを無視する
VS CodeのCode Spell Checkerをインストール
CSpellはすべてのスペルミスを検知しない

CSpellとは

CSpellはソースコードなどのスペルミスを検出するためのスペルチェッカーです。

英単語のスペルが正しいかどうかを目視で確認するのは英語力がないと難しいですが、CSpellを使用すればスペルミスが発生している単語を検出できるため、英語が苦手な方でも簡単にスペルミスを確認できます。

CSpellの使い方

まず、CSpellの使い方を知っていただくために、以下のコマンドでフォルダとテキストファイルを作成して、npm init -y でNode.jsプロジェクトの初期化を行います。

mkdir my-cspell; cd my-cspell; touch sample.txt; npm init -y; npm i -D cspell;

次にsample.txtを開いて、以下のテキストを貼り付けて保存してください。

staart
hoge
midddle
fuga
end
fainal

テキストを保存したら、ターミナルで「cspell **/*.txt]を実行するとCSpellのスペルチェックが実行されて、スペルミスが検知されます。

cspell **/*.txt

設定ファイル cspell.jsonを用意する

前述のCSpellのインストールだけだと、特定のファイルや単語を無視することができないので、cspell.jsonという設定ファイルと無視する単語一覧を記載するignore.txtを用意します。

touch cspell.json ignore.txt

cspell.jsonは以下の内容を記載して、ignore.txtを読み込めるようにします。

languageに「en (英語)」を設定しているのをよく見かけますが、「en-US (アメリカ英語)」を設定することをオススメします。

spell.json

{
  "version": "0.2",
  "language": "en-US",
  "useGitignore": true,
  "ignorePaths": [
    "cspell.json",
    ".vscode"
  ],
  "dictionaries": ["ignore"],
  "dictionaryDefinitions": [
    {
      "name": "ignore",
      "path": "./ignore.txt"
    }
  ]
}

ignorePathsにpackage-lock.jsonやnode_modulesを指定している方がよくいますが、「"useGitignore": true」を設定していれば、.gitignoreに記載されているファイルやディレクトリを無視できます。

次にignore.txtにhogeとfugaを記載して、もう一度cspellコマンドを実行してみてください。

ignore.txtに記載したhogeとfugaがスペルミスとして検出されなくなります。

ignore.txt

hoge
fuga

flagWordsの設定で禁止ワードを追加する

CSpellではスペルミスではないが、禁止ワードとして特定の単語を登録することもできます。

やり方はcspell.jsonに以下のようにflagWordsを追加するだけです。

spell.json

{
  "version": "0.2",
  "language": "en-US",
  "useGitignore": true,
  "ignorePaths": [
    "cspell.json",
    ".vscode"
  ],
  "flagWords": [
    "blacklist->blocklist",
    "whitelist->allowlist"
  ],
  "dictionaries": ["ignore"],
  "dictionaryDefinitions": [
    {
      "name": "ignore",
      "path": "./ignore.txt"
    }
  ]
}

suggestWordsで予測される単語を追加する

CSpellではスペルミスを検出しますが、正しいスペルの表示は一部の単語以外では表示されません。

cspell.jsonでsuggestWordsを設定すると、予測される単語を追加できます。

spell.json

{
  "version": "0.2",
  "language": "en-US",
  "useGitignore": true,
  "ignorePaths": [
    "cspell.json",
    ".vscode"
  ],
  "flagWords": [
    "blacklist->blocklist",
    "whitelist->allowlist"
  ],
  "suggestWords": [
    "indipendence->independence"
  ],
  "dictionaries": ["ignore"],
  "dictionaryDefinitions": [
    {
      "name": "ignore",
      "path": "./ignore.txt"
    }
  ]
}

正規表現で特定のワードを無視する

例えば以下のようなvalueにランダムの英数字が入っているコードがあったとします。

[
  {
    id: 1,
    value: "zyxwv"
  },
  {
    id: 2,
    value: "qwert"
  }
]

「zyxwv」と「qwert」はCSpellにスペルミスと判定されるので、ignore.txtに追記すれば無視できます。

しかし、これが「id: 1000」まであった場合は、すべてをignore.txtに追記するのは大変です。

そんなときはcspell.jsonでignoreRegExpListを追加すれば、正規表現に一致する文字列を無視できます。

spell.json

{
  "version": "0.2",
  "language": "en-US",
  "useGitignore": true,
  "ignorePaths": [
    "cspell.json",
    ".vscode"
  ],
  "flagWords": [
    "blacklist->blocklist",
    "whitelist->allowlist"
  ],
  "suggestWords": [
    "indipendence->independence"
  ],
  "ignoreRegExpList": ["value: \"[^\"]+\""],
  "dictionaries": ["ignore"],
  "dictionaryDefinitions": [
    {
      "name": "ignore",
      "path": "./ignore.txt"
    }
  ]
}