本記事ではVisual Studio Code（以下、VSCode）でテキストを折り返して表示する方法を解説する。

長い行を自動改行して表示する基本的な設定から、折り返し位置の指定やショートカットキーの変更まで幅広く網羅する。

折り返し表示(自動改行)とは

折り返し表示とは、1行の文字数がある程度以上のときに自動で改行して次の行へ表示する機能である。
長い行が読みやすくなり、横スクロールせずにコード全体を確認できる。

折り返し

折り返されるのは画面上の見た目だけで、ファイルに改行文字は挿入されない。折り返した状態で保存してもファイルの内容は変わらない。

VSCodeでは必要に応じてオン・オフを切り替えたり、設定を変更したりできる。

基本的な使い方

テキストを折り返して表示する

折り返し表示は以下の手順で切り替える。

  1. 「表示」メニュー(英語設定の場合は「View」メニュー)をクリック
  2. 「表示」メニューから「右端での折り返し」をクリック

折り返しを切り替えるメニュー

以上で折り返し表示のオン・オフが切り替わる。

メニューからの切り替えは開いているファイルに対する一時的な変更である。後述するsettings.jsonのeditor.wordWrapは書き換わらない。

折り返し位置の変更方法

折り返し位置は通常右端になる。折り返し位置は以下の手順で変更する。

  1. 「ファイル」メニュー(「File」メニュー)をクリック
  2. 「ファイル」メニューから基本設定メニュー(「Preferences」メニュー)をクリック
  3. 「基本設定」設定から設定メニュー(「Settings」メニュー)をクリック
  4. 検索ボックスに「word wrap」と入力
  5. 「Editor: Word Wrap」の値を「wordWrapColumn」か「bounded」に変更
  6. 「Editor: Word Wrap Column」に折り返したい位置を指定

Word Wrap Column の設定

試しに小さな値を指定すると折り返し位置を確認できる。
途中で折り返されているのが分かる。

Word Wrap Column の設定の確認

通常はWord Wrap=on(画面端で折り返し)の設定で十分見やすい。桁数を揃えたい場合に指定するとよい。

折り返しに関する設定の一覧

設定説明
Editor: Word Wrap折り返すかどうかの設定
Editor: Word Wrap Column折り返し位置の指定。設定値を有効にするには Word Wrap の値を wordWrapColumn か bounded にする必要がある。
Editor: Wrapping Indent折り返したときの2行目以降のインデントを指定。
Editor: Wrapping Strategy折り返し位置の計算方法を指定。 simple は等幅フォントではない場合ずれる可能性があるが高速に動作する。advancedは等幅フォント以外でも正しく動作するが低速であり大きなファイルでフリーズする可能性がある。
Diff Editor: Word WrapDiff Editorでの折り返し設定。
その他各言語などの Wrapping 設定拡張ごとの設定やプログラミング言語ごとの設定にwrappingの設定がある場合がある。その拡張やプログラミング言語の設定方法に従う。

折り返し設定を切り替えるショートカット

ショートカットキー

1行が長すぎて右端が見えないとき、ショートカットで折り返し設定を切り替えられる。

MacとWindowsでそれぞれ以下のショートカットがデフォルトで割り当てられている。

  • Macの場合: Option + z
  • Windowsの場合: Alt + z

折り返し表示がオンのときに入力するとオフになり、オフのときに入力するとオンになる。

ショートカットで折り返しを切り替える

ショートカットも「表示」メニューと同じ一時的な切り替えである。settings.jsonの設定を変更する場合は後述の手順で指定する。

カスタムショートカットキーの設定方法

折り返しのショートカットキーはデフォルトの組み合わせから変更できる。

まず設定項目を探す。

  1. 「ファイル」メニューから「基本設定」→「キーボードショートカット」を選択
  2. 検索ボックスに「toggleWordWrap」などの関連するキーワードを入力

キーボードショートカット設定

次にショートカットキーを変更する。

  1. 「toggleWordWrap」の行をダブルクリック
  2. ショートカットキー入力ダイアログが立ち上がるので割り当てたいショートカットを入力
  3. エンターキーを入力し、ショートカットキーを確定

キーボードショートカットの入力

以上で独自のショートカットキーを設定できる。

設定ファイルでカスタムショートカットキーを直接設定する

設定ファイルに直接記述する場合は以下の手順で設定する。

  1. コマンドパレット(Windowsはctrl+shift+p、Macはcmd+shift+p)を開き、「基本設定: キーボード ショートカットを開く (JSON)」を選択
  2. JSON形式で新しいショートカットキーを追加

キーボードショートカットをJSONで開く

例えば「ctrl+alt+w」を「toggleWordWrap」に割り当てる場合は以下のように記述する。

[
  // 既存の設定

  {
    "key": "ctrl+alt+w",
    "command": "editor.action.toggleWordWrap",
    "when": "editorTextFocus"
  }
]

コマンドIDはeditor.action.toggleWordWrapである。キーボードショートカットの一覧に表示される「toggleWordWrap」は表示名であり、JSONに書くIDとは異なる。

settings.jsonでの設定

折り返しに関するsettings.jsonでの設定方法

VSCodeではsettings.jsonで折り返しに関する設定をカスタマイズできる。

コマンドパレット(Windowsはctrl+shift+p、Macはcmd+shift+p)を開き、settings.jsonを開く。

コマンドパレット

折り返しに関する設定項目は以下の通り。

設定説明
editor.wordWrap折り返しの方法を指定する設定。“off”（折り返さない。デフォルト）, “on”（画面幅で折り返し）, “wordWrapColumn”（editor.wordWrapColumnで指定した桁数で折り返し）, “bounded”（画面幅とeditor.wordWrapColumnのうち小さいほうで折り返し）
editor.wordWrapColumn“wordWrapColumn"または"bounded"を選択した場合の折り返しの桁数を指定する設定。デフォルト値は80。
editor.wrappingIndent折り返された行のインデントを指定する設定。“none”（インデントなし）, “same”（折り返された行を先頭行と同じ位置にインデント。デフォルト）, “indent”（折り返された行を1つ目の行よりもインデント）, “deepIndent”（“indent"よりもさらに深くインデント）
editor.wrappingStrategy折り返し位置の計算方法を指定する設定。“simple”（等幅フォント前提で高速に計算する。デフォルト）, “advanced”（等幅フォント以外でも正確に計算するが低速）

上記の設定例は以下の通り。

{
  // 折り返しに関する設定
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  "editor.wrappingIndent": "indent"
}

editor.wordWrapColumnはeditor.wordWrapが"wordWrapColumn"か"bounded"のときだけ効く。画面幅で折り返すだけなら"editor.wordWrap": "on"のみを指定する。

ファイルの種類ごとに折り返しを設定する

折り返しの設定は言語ごとに指定できる。ソースコードは折り返さず、Markdownや平文のテキストだけ折り返して表示する、といった使い分けができる。

言語IDを"[markdown]"のように角括弧で囲んで指定する。

{
  "editor.wordWrap": "off",
  "[markdown]": {
    "editor.wordWrap": "on"
  },
  "[plaintext]": {
    "editor.wordWrap": "on"
  }
}

画面幅より狭い位置で折り返す

editor.wordWrapを"bounded"にすると、画面幅とeditor.wordWrapColumnのうち小さいほうで折り返される。

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

"wordWrapColumn"との違いはウィンドウを狭くしたときの挙動である。"wordWrapColumn"は画面幅に関係なく常に指定した桁数で折り返すため、ウィンドウが80桁より狭いと折り返された行が画面からはみ出す。"bounded"は画面幅のほうが狭ければ画面幅で折り返すため、横スクロールが発生しない。

まとめ

本記事ではVSCodeでテキストを折り返して表示する方法を解説した。

折り返し表示のオン・オフ、折り返し位置の指定、ショートカットキーの変更、settings.jsonでの設定方法まで紹介した。

自動改行を活用するとコードが見やすくなり、効率的にコーディングできる。

＼第一線のプログラマーの行動原理を学べる！／

プログラマが知るべき97のこと

Amazonで見る