VSCode で和文を編集するときのオススメ設定

VSCode

Last updated at 2024-02-27Posted at 2022-12-21

VSCode ではプログラミングコードを編集するエディタである一方で、Markdown や LaTeX など和文を編集するエディタとしても多く利用されています。

しかし、VSCode では和文を編集するように設計されていないため、デフォルトのままでは少し編集しづらい点がいくつかあります。これを出来る限り編集しやすいように設定を構成します。

VSCode version: November 2022 (version 1.74)

本記事では、Markdown や LaTeX などの特定の言語に関する設定やサジェストについて考慮しません。和文を編集する上で必要になる設定のみを考えます。

和文を編集するための設定のため、他の言語に対しては影響させたくありません。そのため、本記事で示す内容は "[langID]": {...} 内で構成すると良いでしょう。

和文を編集する際のオススメ構成まとめ（折りたたみ）

langID には markdown や latex のような言語名を入れてください。

{
  "[langID]": {
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 80,
    "editor.rulers": [40, 80, 120, 160, 200],
    "editor.wrappingStrategy": "simple",
    "editor.wordBreak": "normal",
    "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?゠・，、；：！？．。‘’“”（）｟｠［］〚〛〔〕｛｝〈〉《》「」『』【】〖〗〝〟がてでとにのはへもやを",
    "editor.unicodeHighlight.invisibleCharacters": true,
    "editor.unicodeHighlight.ambiguousCharacters": true,
    "editor.unicodeHighlight.allowedCharacters": {
      "゠": true,
      "，": true,
      "；": true,
      "：": true,
      "！": true,
      "？": true,
      "．": true,
      "‘": true,
      "’": true,
      "（": true,
      "）": true,
      "［": true,
      "］": true,
      "｛": true,
      "｝": true,
      "〔": true,
      "〕": true,
      "＜": true,
      "＞": true,
      "ノ": true,
    },
    "editor.bracketPairColorization.enabled": true,
    "editor.language.colorizedBracketPairs": [
      ["‘", "’"],
      ["“", "”"],
      ["(", ")"],
      ["（", "）"],
      ["｟", "｠"],
      ["[", "]"],
      ["［", "］"],
      ["〚", "〛"],
      ["〔", "〕"],
      ["{", "}"],
      ["｛", "｝"],
      ["〈", "〉"],
      ["《", "》"],
      ["「", "」"],
      ["『", "』"],
      ["【", "】"],
      ["〖", "〗"],
      ["〝", "〟"],
    ],
  }
}

■ 行の折り返し

デフォルトでは行が折り返されず、長い文章を 1 行に書くと右側にどんどん文章が続くことになります。これを避けるには editor.wordWrap を構成します。また、折り返し位置を editor.wordWrapColumn で構成することが出来ます。

設定	値	説明
`editor.wordWrap`	`"off"`, `"on"`, `"wordWrapColumn"`, `"bounded"`	行を折り返さない (`"off"`) 行を折り返す（`"on"`、`"wordWrapColumn"`、`"bounded"`）
`editor.wordWrapColumn`	数値	行の折り返す文字数を指定（半角幅）

editor.wordWrap で利用できる値は以下の 4 つがあります。

構成	説明
`"off"`	折り返さない
`"on"`	画面最右端で折り返す
`"wordWrapColumn"`	`editor.wordWrapColumn` 幅で折り返す
`"bounded"`	“画面最右端” または “`editor.wordWrapColumn` 幅” のいずれか小さい方で折り返す

個人的には、文章を作成するときには "bounded" がオススメです。また、折り返し位置は 80（半角 80 字）くらいが読みやすいでしょう。

  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,

この行の折り返しは Alt+Z で切り替えることが出来ます。
（off ⇆ on・wordWrapColumn・bounded）

これに合わせて、editor.rulers によってエディタ全体に縦線を引くことも出来ます。以下の例では半角幅 40 字ずつ 200 字まで引くようにしています。

  "editor.rulers": [40, 80, 120, 160, 200],

また、この縦線の色を変更するには editorRuler.foreground を変更します。

  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#757575"
  },

デフォルトのフォントは半角幅と全角幅の比が 2:3 等となっており、1:2 となっていません。これでは折り返し位置の文字数が直感的ではない可能性があります。日本語に対応したプログラミングフォントを導入すると、半角幅と全角幅の比が 1:2 となります。

▽ 折り返し位置計算アルゴリズム

折り返し位置を計算するアルゴリズムは 2 通りが提供されており、これを選択することが出来ます。(editor.wrappingStrategy)

構成	説明
`"simple"` (default)	すべての文字が同じ幅であると仮定して計算する高速で動作する
`"advanced"`	折り返し位置の計算をブラウザに委譲する大きなファイルの場合、低速でフリーズする可能性がある

個人的な観測によると、"advanced" では、折り返し位置での中黒 (・) や三点リーダー (…) が追い出し組みされます。（句読点などは "simple" でも追い出し組みされている）

▽ CJK 専用の折り返し

VSCode 1.74 以降では、中国語・日本語・韓国語 (CJK) に対して行の折り返し制御に関する特別な設定があります。(editor.wordBreak)

以下の 2 つの構成から選ぶことが出来ます。

構成	説明
`"normal"` (default)	折り返しのところまで来たら、CJK 文字・非 CJK 文字ともにその時点で折り返す
`"keepAll"`	CJK の文字内・後では改行しない

和文メインで keepAll を利用する場合、CJK の文字列で折り返されないため、和文中での折り返しは約物のみで折り返されるようになります。

keepAll は欧文メインの和文に関して優位に動作するようです。そのため、和文メインのファイルであれば、normal で十分でしょう。

Feature Request: Add a wordBreak editorOption to render CJK text without line-break when set wordWrap 'on' · Issue #154263 · microsoft/vscode

折り返しに関する詳細は、MDN の word-break を参照してください。

■ 区切り文字

VSCode では、editor.wordSeparators によって区切り文字を指定することで、次のようなキーボードショートカットの挙動を制御することが出来ます。

カーソルのある位置から区切り文字までカーソルの移動
- Ctrl+Left
- Ctrl+Right
カーソルのある位置から次の区切り文字まで選択
- Ctrl+Shift+Left
- Ctrl+Shift+Right
カーソルのある位置から次の区切り文字まで削除
- Ctrl+Backspace
- Ctrl+Delete
単語の選択
- Ctrl+D
- ダブルクリック

和文における区切り文字は 、 などさまざまあります。以下のようなものを追加しておきたい。

゠・，、；：！？．。‘’“”（）｟｠［］〚〛〔〕｛｝〈〉《》「」『』【】〖〗〝〟

また、助詞を含めておくと少しだけ気持ちの良い挙動になります。

がてでとにのはへもやを

したがって、デフォルトに加えて次のように構成しておくと良いでしょう。

  "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?゠・，、；：！？．。‘’“”（）｟｠［］〚〛〔〕｛｝〈〉《》「」『』【】〖〗〝〟がてでとにのはへもやを",
  //                                                          ↑ “?” までがデフォルトの構成

この他、必要であればギュメ («») なども追加すると良いでしょう。

この設定に関して少し調べてみると、もっと過激に構成している人を見つけることも出来ました。この記事では 7810 字を editor.wordSeparators に追加しているようです。

Occurrences highlighting について（折りたたみ）

カーソルを置いた時のハイライト (Occurrences highlighting) は language-configuration.json の wordPattern で定義されています。そのため、ユーザー側ではこれを制御することは出来ません。wordPattern はハイライトの他にサジェストの区切り文字にも利用されています。

例えば、VSCode 内の Markdown では次のように定義されています。

vscode/extensions/markdown-basics/language-configuration.json #L55 at main · microsoft/vscode

  "wordPattern": { "pattern": "(\\p{Alphabetic}|\\p{Number}|\\p{Nonspacing_Mark})(((\\p{Alphabetic}|\\p{Number}|\\p{Nonspacing_Mark})|[_])?(\\p{Alphabetic}|\\p{Number}|\\p{Nonspacing_Mark}))*", "flags": "ug" },

より興味があれば、以下の公式 API リファレンスを参照してほしい。

Word Pattern - Language Configuration Guide | Visual Studio Code Extension API

■ Unicode 文字のハイライト

VSCode 1.63 以降では、いくつかの特定の Unicode 文字にハイライトが加わるようになっています。これは、目に見えない文字や ASCII 文字に似た紛らわしい文字が、Unicode スプーフィング攻撃になることを防ぐためです。

和文を編集する際には、このような文字が含まれる場合が多くありますが、この機能を完全には無効化することは考えません。これは、意図しない文字が含まれていることを明示的に認識するためです。

逆に、自らが認識することが出来る文字に加わるハイライトに関しては、ハイライトを無効化するように構成します。

▽ 空白文字

半角スペース以外の空白文字（目に見えない文字）にハイライトが加わります。ハイライトを加えることで、Web 記事のコピペなどで意図しない空白文字の混入を防ぐことが出来ます。（おそらく、24 の空白文字が対象になっている ^⧉）

  "editor.unicodeHighlight.invisibleCharacters": true,

この設定によって、全角スペースにもハイライトが加わります。これを回避したい場合は、次に示す editor.unicodeHighlight.allowedCharacters に "　": true を追加すると良いでしょう。

この設定を false として無効化しても良いですが、目に見えない空白文字は数多くあるため、なるべく明示的にしておくと良いでしょう。

▽ 曖昧な文字

VSCode では、コード内に含まれると問題になる “ASCII 文字に類似した Unicode 文字” にハイライトが加わるようになっています。和文を編集する上で、ASCII 文字に似た文字はいくつか登場します。そのため、これらがハイライトされないようにしておきます。

設定	値	説明
`editor.unicodeHighlight.ambiguousCharacters`	真偽値	曖昧な Unicode 文字にハイライトを加える (`true`)
`editor.unicodeHighlight.allowedCharacters`	オブジェクト	ハイライトを加えない Unicode 文字を指定する

  "editor.unicodeHighlight.ambiguousCharacters": true,
  "editor.unicodeHighlight.allowedCharacters": {
    "゠": true,
    "，": true,
    "；": true,
    "：": true,
    "！": true,
    "？": true,
    "．": true,
    "‘": true,
    "’": true,
    "（": true,
    "）": true,
    "［": true,
    "］": true,
    "｛": true,
    "｝": true,
    "〔": true,
    "〕": true,
    "＜": true,
    "＞": true,
    "ノ": true,
  },

この他にも数多くの文字（全角英数やギリシャ文字の σ など）にハイライトが加わりますが、和文ではおおむね上に挙げた約物のみで十分になるでしょう。

曖昧な文字のリスト（折りたたみ）

このようなハイライトの加わる文字は、Unicode の confusables.txt と Issues で報告される文字に由来しています。これらの文字の内、ASCII 文字に似た文字にハイライトが加わるようになっているようです。

このことは、以下の Issue に見ることが出来ます。

Fullwidth characters are not highlighted as ambiguous (confusable) characters · Issue #138746 · microsoft/vscode

残念なことに、VSCode でハイライトが加わる文字の一覧を見つけることは出来ませんでした。

全角英数のハイライトを回避する場合の構成（折りたたみ）

和文内での全角英数は、文字文脈を認識されハイライトされない場合が多いです。以下の構成はお好みで追加すると良いでしょう。

  "editor.unicodeHighlight.allowedCharacters": {
    "ａ": true,
    "ｂ": true,
    "ｃ": true,
    "ｄ": true,
    "ｅ": true,
    "ｆ": true,
    "ｇ": true,
    "ｈ": true,
    "ｉ": true,
    "ｊ": true,
    "ｋ": true,
    "ｌ": true,
    "ｍ": true,
    "ｎ": true,
    "ｏ": true,
    "ｐ": true,
    "ｑ": true,
    "ｒ": true,
    "ｓ": true,
    "ｔ": true,
    "ｕ": true,
    "ｖ": true,
    "ｗ": true,
    "ｘ": true,
    "ｙ": true,
    "ｚ": true,
    "Ａ": true,
    "Ｂ": true,
    "Ｃ": true,
    "Ｄ": true,
    "Ｅ": true,
    "Ｆ": true,
    "Ｇ": true,
    "Ｈ": true,
    "Ｉ": true,
    "Ｊ": true,
    "Ｋ": true,
    "Ｌ": true,
    "Ｍ": true,
    "Ｎ": true,
    "Ｏ": true,
    "Ｐ": true,
    "Ｑ": true,
    "Ｒ": true,
    "Ｓ": true,
    "Ｔ": true,
    "Ｕ": true,
    "Ｖ": true,
    "Ｗ": true,
    "Ｘ": true,
    "Ｙ": true,
    "Ｚ": true,
    "１": true,
    "２": true,
    "３": true,
    "４": true,
    "５": true,
    "６": true,
    "７": true,
    "８": true,
    "９": true,
    "０": true,
  }

一方で、editor.unicodeHighlight.nonBasicASCII を true にした場合、ASCII 文字以外の文字すべてにハイライトが加わってしまうため、決して true にしてはいけません。

また、editor.unicodeHighlight.includeComments を有効 (true) にすると、コメント内の ASCII 文字に類似した Unicode 文字にもハイライトが加えられます。しかし、和文を編集する際にはそれほど問題にならないと考えられるので、デフォルト (false) のままで良いでしょう。

■ 括弧の対応付け

VSCode では対応する括弧が色付けられます。色付けがあることで、括弧が閉じられているか判別しやすくなります。鍵括弧などにも色付けを有効にしておきましょう。

もしも、括弧に色付けしたくないとして false にしていても、括弧内にカーソルがあると強調されます。

特に、ダブルクオーテーション (“~”) は開きと閉じが判別しづらいため、対応付いていると分かりやすいでしょう。

設定	値	説明
`editor.bracketPairColorization.enabled`	真偽値	対応する括弧に色付けをする (`true`)
`editor.language.colorizedBracketPairs`	配列	対応する括弧の構成

  "editor.bracketPairColorization.enabled": true,
  "editor.language.colorizedBracketPairs": [
    ["‘", "’"],
    ["“", "”"],
    ["(", ")"],
    ["（", "）"],
    ["｟", "｠"],
    ["[", "]"],
    ["［", "］"],
    ["〚", "〛"],
    ["〔", "〕"],
    ["{", "}"],
    ["｛", "｝"],
    ["〈", "〉"],
    ["《", "》"],
    ["「", "」"],
    ["『", "』"],
    ["【", "】"],
    ["〖", "〗"],
    ["〝", "〟"],
  ],

‘~’ は Let’s go など ’ のみを利用する際に、ペアになっていないことが警告されてしまいます。そのため、’ を単体で利用したい場合には、外しておくと良いでしょう。

この他、必要であればギュメ (["«", "»"]) なども追加すると良いでしょう。また、LaTeX ではクォーテーションを `~'、``~" と表現するため、["`", "'"]、["``", "\""] を追加しておくと良いでしょう。

■ キーバインド

構成しておくと便利なキーバインドをいくつか挙げておきます。これらのコマンドは VSCode デフォルトで提供されています。

選択した複数行を 1 行にする
（macOS ではデフォルトで構成されています）

  {
    "key": "ctrl+j",
    "command": "editor.action.joinLines",
    "when": "editorTextFocus && editorHasSelection"
  },

選択した文字列を左に 1 つ移動する

  {
    "key": "alt+left",
    "command": "editor.action.moveCarretLeftAction",
    "when": "editorTextFocus && editorHasSelection"
  },

選択した文字列を右に 1 つ移動する

  {
    "key": "alt+right",
    "command": "editor.action.moveCarretRightAction",
    "when": "editorTextFocus && editorHasSelection"
  },

括弧内の文字列を選択する

  {
    "key": "alt+a",
    "command": "editor.action.selectToBracket",
    "args": {
      "selectBrackets": false
      //  true：括弧を含む
      // false：括弧を含まない
    },
    "when": "editorTextFocus"
  },

editor.action.joinLines は行を連結する際に半角スペースを挿入します。これを避けるための引数は存在しません。もしもこの半角スペースを挿入したくない場合は、拡張機能 usernamehw.vscode-join-lines などを利用すると良いでしょう。

■ スニペット

記号関係のスニペットを作成しておくと、ほし → ★ のような虚無な変換を少なくすることが出来ます。また、この手の記号による予測変換の汚染を小さくすることが出来ます。

特に、頻繁に利用されるであろう記号は矢印でしょう。これを以下のようなスニペットに登録しておくと、比較的楽に編集することが出来ます。

矢印のためのスニペット例（折りたたみ）

    "Insert arrow symbol: To Up": {
        "prefix": [ "2u" ],
        "body": "↑",
        "description": "Arrow symbol: To Up"
    },
    "Insert arrow symbol: To Right": {
        "prefix": [ "2r" ],
        "body": "→",
        "description": "Arrow symbol: To Right"
    },
    "Insert arrow symbol: To Down": {
        "prefix": [ "2d" ],
        "body": "↓",
        "description": "Arrow symbol: To Down"
    },
    "Insert arrow symbol: To Left": {
        "prefix": [ "2l" ],
        "body": "←",
        "description": "Arrow symbol: To Left"
    },
    "Insert arrow symbol: To Left and Right": {
        "prefix": [ "2lr", "2rl" ],
        "body": "${1|⇆,↔,⇔|}",
        "description": "Arrow symbol: To Left and Right"
    },
    "Insert arrow symbol: To Up and Down": {
        "prefix": [ "2ud", "2du" ],
        "body": "${1|⇅,↕,⇕|}",
        "description": "Arrow symbol: To Up and Down"
    },

分けているのが面倒であれば、"body" を "${1|↑,→,↓,←,⇆,↔,⇔,⇅,↕,⇕|}" のようにしてしまえば良いでしょう。

さまざまな記号（折りたたみ）

    "Insert symbol: Circle": {
        "prefix": [ "maru", "circle" ],
        "body": "${1|○,●,◌|}",
        "description": "Circle"
    },
    "Insert symbol: Cross": {
        "prefix": [ "batu", "cross" ],
        "body": "${1|×,✗|}",
        "description": "Cross"
    },
    "Insert symbol: Check": {
        "prefix": "check",
        "body": "${1|✓,🗸,☑|}",
        "description": "Check mark"
    },
    "Insert symbol: Square": {
        "prefix": [ "sikaku", "square" ],
        "body": "${1|■,□,◆,◇|}",
        "description": "Square",
    },
    "Insert symbol: Triangle": {
        "prefix": [ "sankaku", "triangle" ],
        "body": "${1|▽,▼,▷,▶|}",
        "description": "Triangle",
    },
    "Insert symbol: Star": {
        "prefix": "star",
        "body": "${1|☆,★|}",
        "description": "Star symbol"
    },
    "Insert symbol: Reference mark": {
        "prefix": "kome",
        "body": "※",
        "description": "Reference mark"
    },
    "Insert symbol: Section": {
        "prefix": "section",
        "body": "§",
        "description": "Section",
    },
    "Insert symbol: Pilcrow": {
        "prefix": [ "pilcrow", "paragraph mark" ],
        "body": "¶",
        "description": "Paragraph"
    },
    "Insert symbol: Dagger": {
        "prefix": "dagger",
        "body": "${1|†,‡|}",
        "description": "Dagger"
    },

■ 拡張機能

拡張機能を導入することで、編集がより良いものになります。

▽ 区切り文字の向上

ひらがな・カタカナ・漢字の違いを理解して、カーソルの移動や Ctrl+Backspace を実行できるようになります。

この他にも、CJK に対応した SharzyL.cjk-word-handler やサクラエディタのような挙動を実現した lowpolysnow.skr-jp-word-handler も Fork として存在します。

▽ テキスト校正

テキスト校正には textlint を利用すると良いです。VSCode では以下の拡張機能から textlint の結果を得ることが出来ます。

ただし、textlint を導入するには Node.js をインストールするなどの環境を構築する必要があります。

これを面倒に感じる場合には、以下のような拡張機能を導入すると、Node.js などのセットアップ不要で textlint が利用することが出来るようになります。

▽ 置換

紋切り型の置換は 1 つのコマンドから一斉に置換できると楽になります。このような場合には、Replace Rules を利用すると良いでしょう。

たとえば、通常 Windows のキーボードから打つことのできる FULLWIDTH TILDE を正しい波ダッシュ (〜) WAVE DASH に置換するように構成することが出来ます。

  "replacerules.rules": {
    "Replace: Fullwidth-tilde to Wave-dash": {
      "find": "\uFF5E", // Fullwidth tilde
      "replace": "\u301C", // Wave dash
      "flags": "gu",
    }
  }

これを利用することで、フォーマッタのように利用することが出来ます。

▽ 英単語の補完

英単語を補完してくれます。

ユーザー独自に単語を追加することが出来ます。また、“LaTeX” などの case にこだわりがある単語を追加することが出来るため、表記ミスを防ぐことが出来ます。

余談

これくらいの設定をしておくと、和文も編集しやすくなります。本記事で詳細に取り扱っていませんが、等幅フォントに変更することも重要になります。多くの場合、外部からフォントをインストールする必要があるため、本記事での紹介は避けました。しかしながら、1:2 のフォント幅比にしておくと何かと見やすくなります。

本記事の構成に加えて各言語対応の拡張機能を導入することで、サジェストや各種編集コマンドを得ることが出来ます。

VSCode の設定はこの他にも数多くあります。自分なりのよりよい構成が見つかることを願います。

追記

2022/12/25: 「折り返し位置計算アルゴリズム」、「スニペット」について追記。その他軽微修正。
2023/01/06: 〝ノノカギ〟と〔亀甲括弧〕を追加。
2023/05/22: 軽微修正。
2024/02/27: 軽微修正。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up