VS Codeで誤字脱字チェック完全ガイド｜英語・日本語スペルチェック拡張機能の使い方

プログラミング・IT

「コードの変数名をtypoしてしまった…」
「日本語の文章に誤字や表現の問題がないかチェックしたい…」

プログラミングや文章作成をしていると、スペルミスや誤字脱字が気になりますよね。

この記事では、VS Codeで使える誤字脱字チェック機能について、英語のスペルチェックから日本語の校正まで、分かりやすく解説していきます。

スポンサーリンク
  1. VS Codeの誤字脱字チェックの種類
    1. 主な拡張機能
  2. Code Spell Checker（英語スペルチェック）
    1. Code Spell Checkerの特徴
  3. Code Spell Checkerのインストール
    1. インストール手順
  4. Code Spell Checkerの基本的な使い方
    1. スペルミスの検出
    2. 修正候補の表示
    3. 表示される選択肢
  5. ユーザー辞書への追加
    1. 辞書追加の使い分け
    2. 登録方法
    3. 辞書の確認・削除
  6. Code Spell Checkerの設定
    1. 基本設定
    2. よく使う設定
    3. ワークスペース設定
  7. 言語別辞書の追加
    1. 利用可能な言語パック
    2. インストール方法
    3. 言語パックの有効化
  8. テキスト校正くん（日本語校正チェック）
    1. テキスト校正くんの特徴
  9. テキスト校正くんのインストール
    1. インストール手順
  10. テキスト校正くんの使い方
    1. 自動校正
    2. 校正ルールの設定
    3. よく使う設定例
  11. Code Spell Checkerとテキスト校正くんの併用
    1. 併用のメリット
    2. 設定の注意点
  12. その他のスペルチェッカー拡張機能
    1. Spell Right
    2. SpellChecker
    3. vscode-textlint
  13. 実用的な活用例
    1. 活用例1: コードレビューの効率化
    2. 活用例2: ドキュメント作成の品質向上
    3. 活用例3: 変数名のtypo防止
    4. 活用例4: 技術ブログ記事の執筆
    5. 活用例5: チームでのルール統一
  14. よくある質問
    1. Q1: スペルチェックが動作しない
    2. Q2: 波線が多すぎて邪魔
    3. Q3: プロジェクト固有の用語が警告される
    4. Q4: 英語の方言を変更したい
    5. Q5: 日本語のチェックが厳しすぎる
    6. Q6: コメントだけチェックしたい
    7. Q7: チーム全体で設定を共有したい
    8. Q8: ショートカットキーを変更したい
  15. トラブルシューティング
    1. 問題1: 拡張機能が重くてVS Codeが遅い
    2. 問題2: 正しい単語なのに警告される
    3. 問題3: 日本語のチェックが効かない
    4. 問題4: 設定が反映されない
  16. まとめ

VS Codeの誤字脱字チェックの種類

VS Code自体には標準でスペルチェック機能が搭載されていません。

しかし、拡張機能を使えば強力な誤字脱字チェックが可能になります。

主な拡張機能

英語のスペルチェック：

  • Code Spell Checker（最も人気）
  • Spell Right
  • SpellChecker

日本語の校正チェック：

  • テキスト校正くん（最も人気）
  • vscode-textlint

目的別の使い分け：

  • プログラミング中心 → Code Spell Checker
  • 日本語の文章作成 → テキスト校正くん
  • 両方使いたい → 併用可能

Code Spell Checker（英語スペルチェック）

最も人気のある英語スペルチェック拡張機能です。

Code Spell Checkerの特徴

主な機能：

  • リアルタイムでスペルミスを検出
  • 修正候補の提案
  • キャメルケース、スネークケース対応
  • ユーザー辞書の追加
  • 複数言語対応（言語パック追加）
  • ワークスペース・ユーザー単位での設定

対応ファイル：

  • プログラミング言語のコード
  • Markdownファイル
  • テキストファイル
  • コメントや文字列

Code Spell Checkerのインストール

拡張機能のインストールは簡単です。

インストール手順

方法1: 拡張機能ビューから

  1. Ctrl + Shift + X（Mac: Cmd + Shift + X）で拡張機能ビューを開く
  2. 検索ボックスに「Code Spell Checker」と入力
  3. 検索結果から「Code Spell Checker」（by Street Side Software）を選択
  4. 「インストール」ボタンをクリック
  5. インストール完了後、VS Codeの再起動は不要

方法2: マーケットプレイスから

  1. Code Spell Checker – Visual Studio Marketplaceにアクセス
  2. 「Install」ボタンをクリック
  3. ブラウザの確認ダイアログで「Visual Studio Codeを開く」を選択
  4. VS Codeで「インストール」をクリック

Code Spell Checkerの基本的な使い方

インストールすれば、すぐに使い始められます。

スペルミスの検出

自動検出：

  • ファイルを開くと、自動的にスペルチェックが実行される
  • スペルミスは青い波線で表示される

問題パネルでの確認：

  • 画面下部の「問題」パネルに一覧表示
  • ステータスバーの警告アイコンをクリックしても表示できる

修正候補の表示

方法1: クイックフィックスから

  1. スペルミスの箇所にカーソルを置く
  2. 電球アイコン（💡）をクリック、またはCtrl + .（Mac: Cmd + .）を押す
  3. 修正候補が表示される
  4. 正しいスペルを選択

方法2: カーソルホバーから

  1. スペルミスの箇所にマウスカーソルを合わせる
  2. ポップアップが表示される
  3. 「クイック フィックス…」をクリック
  4. 修正候補から選択

表示される選択肢

クイックフィックスを開くと、以下のような選択肢が表示されます。

修正候補：

  • 正しいスペルの候補（複数表示される場合がある）

辞書への追加：

  • Add: “単語” to user dictionary
  • ユーザー辞書に追加（すべてのプロジェクトで有効）
  • Add: “単語” to workspace dictionary
  • ワークスペース辞書に追加（現在のプロジェクトのみ）
  • Add: “単語” to folder dictionary
  • フォルダー辞書に追加（現在のフォルダーのみ）

無視設定：

  • 単語を無視リストに追加

ユーザー辞書への追加

独自の単語や技術用語を登録できます。

辞書追加の使い分け

ユーザー辞書：

  • すべてのプロジェクトで使う単語
  • 例：会社名、サービス名、よく使う技術用語

ワークスペース辞書：

  • 特定のプロジェクトでのみ使う単語
  • 例：プロジェクト固有の用語、クライアント名

フォルダー辞書：

  • 特定のフォルダー内でのみ使う単語

登録方法

方法1: クイックフィックスから

  1. 登録したい単語の上でクイックフィックスを開く
  2. 「Add: “単語” to user dictionary」などを選択
  3. 自動的に辞書に追加される

方法2: 設定ファイルから直接追加

settings.jsonを開いて追加：

{
  "cSpell.userWords": [
    "myapp",
    "customfunction",
    "apikey"
  ]
}

辞書の確認・削除

確認方法：

  1. Ctrl + ,（Mac: Cmd + ,）で設定を開く
  2. 検索ボックスに「cspell」と入力
  3. 「C Spell: User Words」を探す
  4. 登録されている単語の一覧が表示される

削除方法：

  • 各単語の右側にある「×」ボタンをクリック

Code Spell Checkerの設定

細かくカスタマイズできます。

基本設定

settings.jsonに追加する設定例：

{
  // ユーザー辞書
  "cSpell.userWords": [
    "vscode",
    "javascript",
    "typescript"
  ],

  // 無視する単語
  "cSpell.ignoreWords": [
    "tempword"
  ],

  // 最小単語長（この長さ以下はチェックしない）
  "cSpell.minWordLength": 4,

  // 表示する問題の最大数
  "cSpell.maxNumberOfProblems": 100,

  // 複合語を許可
  "cSpell.allowCompoundWords": true,

  // チェックを有効にする言語
  "cSpell.enabledLanguageIds": [
    "markdown",
    "plaintext",
    "javascript",
    "typescript",
    "python"
  ]
}

よく使う設定

英語方言の選択：

デフォルトはアメリカ英語ですが、変更できます。

{
  "cSpell.language": "en-GB"
}

指定したフォルダを除外：

{
  "cSpell.ignorePaths": [
    "node_modules",
    "dist",
    "build",
    "*.min.js"
  ]
}

特定のファイルタイプを除外：

{
  "cSpell.enableFiletypes": [
    "!json",
    "!jsonc"
  ]
}

ワークスペース設定

プロジェクト固有の設定は、.vscode/settings.jsonに保存されます。

例：

{
  "cSpell.words": [
    "projectname",
    "clientname",
    "customapi"
  ],
  "cSpell.ignorePaths": [
    "test/**",
    "docs/archive/**"
  ]
}

言語別辞書の追加

Code Spell Checkerは、追加の言語辞書をインストールできます。

利用可能な言語パック

主な言語パック：

  • Spanish
  • French
  • German
  • Russian
  • Portuguese
  • Dutch
  • Swedish
  • Medical Terms（医療用語）
  • Scientific Terms（科学用語）

インストール方法

  1. 拡張機能ビューを開く（Ctrl + Shift + X）
  2. 「code spell checker」と検索
  3. 「〇〇 – Code Spell Checker」という名前の言語パックを探す
  • 例：「Spanish – Code Spell Checker」
  1. インストールをクリック

または：

検索ボックスに言語名を入れて検索：

  • 例：「spanish spell」と検索

言語パックの有効化

インストール後、settings.jsonで有効化：

{
  "cSpell.language": "en,es"
}

複数言語を同時にチェック：

{
  "cSpell.language": "en,es,fr,de"
}

テキスト校正くん（日本語校正チェック）

日本語の文章校正に特化した拡張機能です。

テキスト校正くんの特徴

主な機能：

  • 日本語の誤字脱字チェック
  • 表現の統一チェック
  • ら抜き言葉の検出
  • 助詞の重複チェック
  • 技術用語のチェック
  • カタカナ表記の統一

対応ファイル：

  • Markdownファイル（.md）
  • テキストファイル（.txt）

チェック項目：

  • 漢字の誤用
  • ひらがな・カタカナの誤用
  • ら抜き言葉
  • 二重否定
  • 助詞の連続
  • 同じ接続詞の連続使用
  • 冗長な表現
  • 技術用語のスペルミス

テキスト校正くんのインストール

インストール手順

方法1: 拡張機能ビューから

  1. Ctrl + Shift + X（Mac: Cmd + Shift + X）で拡張機能ビューを開く
  2. 検索ボックスに「テキスト校正くん」と入力
  3. 「テキスト校正くん」（by ICS）を選択
  4. 「インストール」ボタンをクリック

方法2: マーケットプレイスから

  1. テキスト校正くん – Visual Studio Marketplaceにアクセス
  2. 「Install」をクリック
  3. VS Codeを開いてインストールを完了

テキスト校正くんの使い方

使い方はとてもシンプルです。

自動校正

基本動作：

  1. .mdまたは.txtファイルを開く
  2. 自動的に校正が実行される
  3. 問題箇所が赤い波線で表示される

問題の確認：

  • 画面下部の「問題」パネルに一覧表示
  • 波線の上にマウスを置くと、問題内容と理由が表示される

校正ルールの設定

設定画面を開く：

  1. Ctrl + ,（Mac: Cmd + ,）で設定を開く
  2. 検索ボックスに「テキスト校正くん」と入力
  3. 校正ルールの一覧が表示される

設定できる項目：

  • ら抜き言葉
  • 二重否定
  • 助詞の連続
  • 同じ助詞の連続
  • 冗長な表現
  • 技術用語のスペルミス
  • カタカナ語の表記統一
  • 漢字の開き方

有効・無効の切り替え：

  • チェックボックスで簡単に切り替え可能

よく使う設定例

settings.jsonでの設定：

{
  // ら抜き言葉をチェック
  "textlint.rule.ja-no-abusage": true,

  // 助詞の連続をチェック
  "textlint.rule.ja-no-successive-word": true,

  // 技術用語のスペルをチェック
  "textlint.rule.prh-rules": true,

  // カタカナ語の表記統一
  "textlint.rule.ja-no-orthographic-error": true
}

Code Spell Checkerとテキスト校正くんの併用

両方の拡張機能を同時に使用できます。

併用のメリット

英語と日本語の両方をカバー：

  • Code Spell Checker → 英語の変数名、コメント、技術用語
  • テキスト校正くん → 日本語のドキュメント、README

使い分けの例：

  • プログラミング → Code Spell Checker
  • 日本語ドキュメント → 両方
  • 英語ドキュメント → Code Spell Checker

設定の注意点

競合を避ける：

両方の拡張機能を有効にしても、基本的に競合しません。

ただし、問題パネルに両方の警告が表示されるため、多くなる可能性があります。

ファイルタイプで使い分け：

{
  // Code Spell Checkerを特定のファイルタイプのみで有効化
  "cSpell.enableFiletypes": [
    "markdown",
    "javascript",
    "typescript",
    "python"
  ]
}

その他のスペルチェッカー拡張機能

Code Spell Checker以外の選択肢もあります。

Spell Right

特徴：

  • オフラインで動作
  • 軽量
  • 複数言語対応
  • システムの辞書を使用

適している用途：

  • オフライン環境での作業
  • 多言語ドキュメント

インストール：

  • 拡張機能ビューで「Spell Right」と検索

SpellChecker

特徴：

  • オフライン動作
  • シンプルな設定

適している用途：

  • 基本的なスペルチェックのみ必要な場合

vscode-textlint

特徴：

  • textlintを直接使用
  • 高度なカスタマイズが可能
  • 独自のルールセットを作成できる

適している用途：

  • textlintの知識がある
  • 独自の校正ルールを作りたい

注意点：

  • 設定が複雑
  • 初心者には「テキスト校正くん」がおすすめ

実用的な活用例

スペルチェック機能の便利な使い方をご紹介します。

活用例1: コードレビューの効率化

シナリオ：

  • プルリクエストを出す前にtypoチェック

方法：

  1. Code Spell Checkerをインストール
  2. コードを書く
  3. 問題パネルでスペルミスを確認
  4. 修正してからコミット

効果：

  • レビュアーの負担軽減
  • typoによる不具合を防止

活用例2: ドキュメント作成の品質向上

シナリオ：

  • READMEやドキュメントを日本語で書く

方法：

  1. テキスト校正くんをインストール
  2. Markdownファイルで文章を書く
  3. 赤い波線をチェック
  4. 指摘を確認して修正

効果：

  • 誤字脱字が減る
  • 文章の品質が向上
  • 読みやすいドキュメントになる

活用例3: 変数名のtypo防止

シナリオ：

  • 変数名やメソッド名のスペルミスを防ぎたい

方法：

  1. Code Spell Checkerをインストール
  2. コードを書く
  3. キャメルケース、スネークケースでも自動検出
  4. 間違いがあれば波線で通知

効果：

  • recieve（間違い）をreceive（正しい）に気づける
  • 実行時エラーを防止

活用例4: 技術ブログ記事の執筆

シナリオ：

  • VS Codeで技術ブログの記事を書く

方法：

  1. テキスト校正くんとCode Spell Checkerを両方インストール
  2. Markdownファイルで執筆
  3. 日本語の誤字と英語の技術用語をチェック

効果：

  • 日本語の文章が洗練される
  • 技術用語のスペルミスがなくなる

活用例5: チームでのルール統一

シナリオ：

  • チーム全体で同じスペルチェック設定を使いたい

方法：

  1. プロジェクトに.vscode/settings.jsonを作成
  2. カスタム辞書を設定
  3. Gitにコミット
  4. チームメンバーが共有

設定例：

{
  "cSpell.words": [
    "projectname",
    "apiendpoint",
    "customfunction"
  ],
  "cSpell.ignorePaths": [
    "node_modules/**",
    "dist/**"
  ]
}

効果：

  • 表記ゆれがなくなる
  • チーム全体で統一された品質

よくある質問

Q1: スペルチェックが動作しない

A: 以下を確認してください。

  1. 拡張機能がインストールされているか
  • 拡張機能ビューで確認
  1. 拡張機能が有効になっているか
  • 無効になっている場合は「有効にする」をクリック
  1. 対応ファイルタイプか
  • Code Spell Checker: ほぼすべてのファイル
  • テキスト校正くん: .mdと.txtのみ
  1. VS Codeを再起動
  • インストール後は再起動が必要な場合がある

Q2: 波線が多すぎて邪魔

A: 以下の方法で調整できます。

除外設定を追加：

{
  "cSpell.ignorePaths": [
    "node_modules/**",
    "*.min.js"
  ]
}

最小単語長を設定：

{
  "cSpell.minWordLength": 4
}

特定の単語を無視：

{
  "cSpell.ignoreWords": [
    "btn",
    "img",
    "div"
  ]
}

Q3: プロジェクト固有の用語が警告される

A: ワークスペース辞書に追加しましょう。

  1. 警告されている単語でクイックフィックスを開く
  2. 「Add to workspace dictionary」を選択
  3. .vscode/settings.jsonに自動追加される

Q4: 英語の方言を変更したい

A: 設定で変更できます。

アメリカ英語（デフォルト）：

{
  "cSpell.language": "en"
}

イギリス英語：

{
  "cSpell.language": "en-GB"
}

言語パックが必要な場合もあります。

Q5: 日本語のチェックが厳しすぎる

A: テキスト校正くんの設定で調整できます。

  1. 設定画面を開く（Ctrl + ,）
  2. 「テキスト校正くん」と検索
  3. 不要なルールのチェックを外す

Q6: コメントだけチェックしたい

A: Code Spell Checkerでは、現時点で完全なサポートはありません。

代替案：

  • Spell Rightを使用（構文を指定できる）
  • 手動で問題パネルをフィルタリング

Q7: チーム全体で設定を共有したい

A: .vscode/settings.jsonをGitにコミットしましょう。

手順：

  1. プロジェクトルートに.vscodeフォルダを作成
  2. settings.jsonを作成
  3. スペルチェック設定を記述
  4. Gitにコミット

例：

{
  "cSpell.words": [
    "myproject",
    "customapi"
  ],
  "cSpell.ignorePaths": [
    "dist/**",
    "build/**"
  ]
}

Q8: ショートカットキーを変更したい

A: キーボードショートカット設定で変更できます。

  1. Ctrl + K → Ctrl + S でショートカット設定を開く
  2. 「spell」で検索
  3. 変更したいコマンドを見つける
  4. クリックして新しいキーバインドを設定

トラブルシューティング

よくある問題と解決方法です。

問題1: 拡張機能が重くてVS Codeが遅い

原因：

  • 大量のファイルをチェックしている
  • 除外設定が不十分

対処法：

  1. 除外パスを追加
{
  "cSpell.ignorePaths": [
    "node_modules/**",
    "dist/**",
    "build/**",
    ".git/**",
    "*.min.js",
    "package-lock.json"
  ]
}
  1. 最大問題数を制限
{
  "cSpell.maxNumberOfProblems": 50
}

問題2: 正しい単語なのに警告される

原因：

  • 辞書に登録されていない
  • 技術用語や固有名詞

対処法：

  • ユーザー辞書またはワークスペース辞書に追加
  • クイックフィックスから簡単に追加可能

問題3: 日本語のチェックが効かない

原因：

  • ファイルの拡張子が対応していない
  • テキスト校正くんは.mdと.txtのみ対応

対処法：

  • ファイルを.mdまたは.txtで保存
  • または、vscode-textlintを使用（設定が複雑）

問題4: 設定が反映されない

原因：

  • settings.jsonの構文エラー
  • ワークスペース設定とユーザー設定の競合

対処法：

  1. settings.jsonにエラーがないか確認
  2. JSONの構文が正しいか確認（カンマ、カッコなど）
  3. VS Codeを再起動

まとめ

VS Codeの誤字脱字チェック機能についてご紹介しました。

英語スペルチェック（Code Spell Checker）：

  • 拡張機能ビューで「Code Spell Checker」を検索
  • インストールするだけで自動動作
  • 青い波線でスペルミスを通知
  • Ctrl + . で修正候補を表示
  • ユーザー辞書・ワークスペース辞書に追加可能

日本語校正チェック（テキスト校正くん）：

  • 拡張機能ビューで「テキスト校正くん」を検索
  • .mdと.txtファイルで自動動作
  • 赤い波線で問題箇所を通知
  • ら抜き言葉、助詞の重複などをチェック
  • 設定画面で校正ルールを調整

基本設定例：

{
  // Code Spell Checker
  "cSpell.userWords": [
    "vscode",
    "javascript"
  ],
  "cSpell.ignorePaths": [
    "node_modules/**",
    "dist/**"
  ],
  "cSpell.minWordLength": 4,

  // テキスト校正くん
  "textlint.rule.ja-no-abusage": true,
  "textlint.rule.ja-no-successive-word": true
}

併用のメリット：

  • 英語と日本語の両方をカバー
  • コードとドキュメントの品質向上
  • typoによる不具合を防止

活用シーン：

  • コードレビュー前のチェック
  • ドキュメント作成
  • 技術ブログ執筆
  • 変数名・メソッド名の確認
  • チームでの表記統一

誤字脱字チェック機能を活用すれば、コードとドキュメントの品質が大幅に向上します。

特にCode Spell Checkerとテキスト校正くんは、インストールするだけですぐに使えるので、ぜひ試してみてください！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました