これで解決！VS Code コード折り返しのショートカットと設定方法

By /

これで解決！VS Code コード折り返しのショートカットと設定方法【完全保存版】

プログラマーやライター、設定ファイルを扱う多くのユーザーにとって、エディタでの作業効率は日々の生産性に直結します。特に、長いコード行や文章行を扱う際に、画面の右端で見切れてしまい、横スクロールが頻繁に必要になるのは非常にストレスフルな状況です。この問題を解決してくれるのが、「コード折り返し（Word Wrap）」機能です。

コード折り返し機能を適切に使うことで、エディタの表示領域に合わせて行が自動的に折り返され、横スクロールなしで内容全体を確認できるようになります。VS Code（Visual Studio Code）は、その強力な編集機能と柔軟なカスタマイズ性で知られていますが、コード折り返しに関しても非常にきめ細やかな設定が可能です。

しかし、「どう設定すればいいの？」「一時的に切り替えたいけどショートカットは？」「特定のファイル形式だけ折り返したいんだけど？」といった疑問を持つ方も少なくないでしょう。VS Codeの設定項目は多岐にわたるため、目的の設定を見つけるのに苦労したり、設定値の意味がよく分からなかったりすることもあります。

この記事は、そんなVS Codeのコード折り返しに関するあらゆる疑問を解決するための、まさに「完全保存版」です。コード折り返しの基本的な概念から、VS Codeでの詳細な設定方法、便利なショートカットの使い方、そして知っておくと役立つ応用テクニックまで、約5000語のボリュームで徹底的に解説します。

この記事を読み終える頃には、あなたはVS Codeのコード折り返し機能を完全にマスターし、あなたの作業環境をより快適で効率的なものに変えることができるようになっているはずです。さあ、コード折り返しの世界へ一緒に深く潜っていきましょう！

1. コード折り返し（Word Wrap）とは？なぜ必要なのか？

まず、コード折り返し機能がどのようなもので、なぜエディタにおいて重要なのかを理解しましょう。

1.1. コード折り返しの定義

コード折り返し（Word Wrap）とは、エディタやワープロソフトなどのテキスト表示領域において、入力されているテキストの行が画面（または指定された幅）の右端に到達した際に、次の行へ自動的に継続して表示する機能です。これは、テキストファイル内で改行文字（\nなど）が入力されていない長い行に対して適用されます。

通常のテキストファイルでは、手動で改行しない限り、1つの論理的な行は非常に長く続けることができます。しかし、エディタのウィンドウ幅には限りがあります。コード折り返しが有効になっていない場合、長い行はエディタの右端で見切れてしまい、その行の後半部分を見るためには水平方向にスクロールする必要があります。

コード折り返しが有効になっている場合、エディタは表示上の都合で長い行を複数の「表示行」に分割します。これにより、テキスト全体がエディタの表示領域内に収まり、水平スクロールなしで内容を追うことができるようになります。

1.2. コード折り返しの必要性

なぜコード折り返し機能が必要なのでしょうか？主な理由は以下の通りです。

  • 可読性の向上: 長い行を水平スクロールせずに一度に確認できるため、コードや文章を読む際の視線の移動が少なくなり、内容を追いやすくなります。特に、コメント、長い文字列リテラル、または特定の言語で1行に長くなりがちな記述（例: Pythonの長いリスト内包表記、JavaScriptの長い関数呼び出しチェーン）を読む際に非常に役立ちます。
  • 編集効率の向上: 水平スクロールの手間がなくなることで、編集作業がスムーズになります。カーソル移動も、物理的な画面上の位置に基づいて行われるため、直感的に操作できます。
  • 画面スペースの有効活用: ディスプレイの解像度やウィンドウサイズに合わせてテキストが自動的に調整されるため、画面上の表示領域を最大限に活用できます。特に、解像度が低いディスプレイや、複数のウィンドウを並べて作業している場合に有効です。
  • 差分（Diff）表示の見やすさ: バージョン管理システムなどでファイルの差分を表示する際、長い行が折り返されていると、変更箇所が見やすくなる場合があります。

1.3. コード折り返しのメリットとデメリット

メリット デメリット
可読性向上: 横スクロール不要で全体を把握 論理行と表示行のずれ: 1つの論理的な行が複数の表示行になるため、行番号を使ったナビゲーションが混乱することがある
編集効率向上: 水平スクロールの手間削減 コード構造の把握困難: インデントや整形が崩れて見えることがあり、コードのブロック構造などが分かりにくくなる場合がある
画面スペースの有効活用 コピー＆ペーストの問題: 折り返された状態で表示されているテキストをコピー＆ペーストする際に、意図しない改行が入ることがある（ただし、これはエディタの実装による）
差分表示の見やすさ 列位置の把握困難: 特定の列（カーソル位置の桁数）を正確に把握するのが難しくなる場合がある

これらのメリットとデメリットを理解した上で、自分の作業内容やファイルの種類に合わせてコード折り返しを適切に設定・利用することが重要です。VS Codeでは、これらのニーズに応えるために、非常に柔軟なコード折り返し設定を提供しています。

2. VS Codeにおけるコード折り返しの基本設定 (editor.wordWrap)

VS Codeでコード折り返しを制御する最も基本的な設定項目は editor.wordWrap です。この設定は、エディタ全体に対して、コード折り返しをどのように適用するかを定義します。

2.1. editor.wordWrap の設定値とその意味

editor.wordWrap 設定は、以下の4つの値を取ることができます。

  1. off: コード折り返しを無効にします。長い行はエディタの右端で見切れてしまい、水平スクロールが必要になります。これがデフォルトの設定値です。
  2. on: コード折り返しを有効にします。テキストはエディタのビューポート（ウィンドウ）の幅に合わせて折り返されます。ウィンドウのサイズを変更すると、折り返しの位置も動的に調整されます。
  3. wordWrapColumn: 指定した列数でテキストを折り返します。エディタのウィンドウ幅に関係なく、設定された列数を超えた行が折り返されます。この設定を使う場合、editor.wordWrapColumn で具体的な列数を指定する必要があります。
  4. bounded: エディタのビューポート幅と editor.wordWrapColumn で指定された列数の、より小さい方でテキストを折り返します。つまり、エディタ幅が指定列数より狭い場合はエディタ幅で折り返し、エディタ幅が指定列数より広い場合は指定列数で折り返します。この設定も editor.wordWrapColumn の値に依存します。

2.2. 各設定値の挙動詳細

2.2.1. off

最もシンプルな設定です。コード折り返しは行われません。長い行は一行として表示され続け、エディタの右端からはみ出した部分は水平スクロールしないと見えません。

利点:
* コードの論理的な構造（特にインデント）が崩れず、見た目がソースコードファイルの内容と一致します。
* 行番号や列番号が常に論理的な行と対応するため、特定の位置への移動や、他のツール（エラーメッセージなど）との連携が容易です。
* コピー＆ペーストの際に、意図しない改行が入る心配がありません。

欠点:
* 長い行が多い場合、水平スクロールが頻繁に必要になり、可読性や編集効率が低下します。

2.2.2. on

最も一般的に使われるコード折り返し設定の一つです。エディタの現在の表示幅に合わせてテキストが折り返されます。

利点:
* どんなにウィンドウ幅が狭くても、テキスト全体が画面内に収まります。
* ウィンドウのサイズを変更すると、折り返し位置も自動的に調整されるため、常に最適な表示が得られます。
* 特に、文章や設定ファイル、ログファイルなど、固定幅よりも画面幅に合わせて読みたいテキストに適しています。

欠点:
* ウィンドウ幅が変わると折り返し位置も変わるため、表示が不安定に感じることがあります。
* コードの場合、ウィンドウ幅が狭いと非常に短い表示行がたくさんできてしまい、かえって読みにくくなることがあります。
* 論理行と表示行の対応がウィンドウ幅に依存するため、慣れるまで戸惑うことがあります。

2.2.3. wordWrapColumn

指定した固定の列数（文字数）でテキストを折り返します。例えば、多くのコーディング規約で推奨されている「1行80文字以内」といったルールに従いたい場合に便利です。

利点:
* 常に一定の列数で折り返されるため、表示が安定しています。
* コーディング規約に合わせた表示が可能になります。
* ウィンドウ幅が広くても、指定列数で折り返されるため、視線の移動距離を一定に保つことができます。

欠点:
* エディタのウィンドウ幅が指定列数より狭い場合、それでも指定列数で折り返そうとするため、結果的に水平スクロールが必要になる場合があります（ただし、これはVS Codeの挙動ではなく、他のエディタでの挙動の可能性もあります。VS CodeのwordWrapColumnは、ウィンドウ幅が指定列数より狭い場合はウィンドウ幅で折り返すようです。後述のboundedとの違いが重要です）。
* 指定した列数が適切でない場合、読みにくくなる可能性があります。

補足: VS Codeの wordWrapColumn の実際の挙動は、「指定された列数、またはビューポートの幅の小さい方で折り返す」という、かつての bounded の挙動に近いようです。最新のドキュメントや実験で確認が必要です。しかし、設定値としては wordWrapColumn という名前で存在しており、指定列数を意識した折り返しに使われます。

2.2.4. bounded

エディタのビューポートの幅と editor.wordWrapColumn で指定された列数を比較し、小さい方の幅でテキストを折り返します。

利点:
* ウィンドウ幅が狭い場合はウィンドウ幅に合わせて折り返すため、水平スクロールを回避できます。
* ウィンドウ幅が広い場合は指定列数で折り返すため、視線の移動距離が過剰に長くなるのを防ぎつつ、一定のレイアウトを保てます。
* onとwordWrapColumnのそれぞれの利点を組み合わせたような挙動を提供します。多くのユーザーにとって、これが最もバランスの取れた設定かもしれません。

欠点:
* 挙動がやや複雑なため、直感的に理解しにくい場合があります。

これらの editor.wordWrap の設定値は、あなたの普段の作業内容や好みに応じて選択することが重要です。コードを書くことが多いなら off や bounded を、文章や設定ファイルをよく編集するなら on が適しているかもしれません。

2.3. editor.wordWrapColumn の設定

editor.wordWrap を wordWrapColumn または bounded に設定した場合、実際に折り返しを行う列数を指定するために editor.wordWrapColumn という設定項目を使用します。

この設定項目は数値を取り、その数値が折り返しの基準となる列数を示します。例えば、"editor.wordWrapColumn": 80 と設定すると、80列目で折り返しが行われます（editor.wordWrap が wordWrapColumn または bounded の場合）。

デフォルト値は 80 です。多くのプログラミング言語のスタイルガイドで80文字または120文字などが推奨されているため、このデフォルト値は非常に一般的です。

2.4. editor.wrappingIndent の設定

コード折り返しによって複数行に分割された表示行の、2行目以降のインデントをどのように表示するかを制御する設定項目です。この設定は、折り返された行の可読性に大きく影響します。

editor.wrappingIndent は以下の4つの値を取ることができます。

  1. none: 折り返された行の2行目以降は、前の行の先頭と同じ列（インデントなし）から表示されます。
  2. same: 折り返された行の2行目以降は、前の行の開始位置（折り返しが発生した論理行の最初の文字が表示されている列）と同じ列から表示されます。
  3. indent: 折り返された行の2行目以降は、前の行のインデントレベルに加えて、さらにエディタの標準インデント幅（通常はタブ幅やスペース数）だけインデントされて表示されます。
  4. deepIndent: 折り返された行の2行目以降は、前の行のインデントレベルに加えて、エディタの標準インデント幅の2倍だけインデントされて表示されます。

それぞれの違いの例（標準インデントが4スペースの場合）:

元の論理行:
python
def my_function(arg1, arg2, arg3, arg4, arg5): # この行が長いとする
pass

折り返し位置: arg4, の後

  • none:
    python
    def my_function(arg1, arg2, arg3,
    arg4, arg5):
    pass
    （折り返された行が左端に揃う）

  • same:
    python
    def my_function(arg1, arg2, arg3,
    arg4, arg5):
    pass
    （折り返された行が def の列に揃う）

  • indent:
    python
    def my_function(arg1, arg2, arg3,
    arg4, arg5): # 実際にはdefの列 + 標準インデント（4スペース）
    pass
    （折り返された行が def の列から標準インデント分右にずれる）

  • deepIndent:
    python
    def my_function(arg1, arg2, arg3,
    arg4, arg5): # 実際にはdefの列 + 標準インデントの2倍（8スペース）
    pass
    （折り返された行が def の列から標準インデントの2倍分右にずれる）

多くのコードでは、indent または deepIndent が、折り返された部分が論理行の続きであることが視覚的に分かりやすく、可読性を高める傾向があります。特に indent は、コードブロックのインデントと混同しにくいため、よく使われます。

デフォルト値は same です。

2.5. その他の高度な折り返し設定

さらに詳細な折り返し挙動を制御するための設定項目もあります。これらは通常、特定の文字での折り返しを制御したい場合に利用します。

  • editor.wordWrapBreakBeforeCharacters: これらの文字の前で折り返しを行う優先度が高まります。デフォルト値は '([{ です。
  • editor.wordWrapBreakAfterCharacters: これらの文字の後で折り返しを行う優先度が高まります。デフォルト値は ' ,;.>)}] です。
  • editor.wordWrapBreakObtrusiveCharacters: これらの文字の前や後で折り返しを行うかどうかを制御します。デフォルト値は .:,;)]} です。これは、これらの文字を含む行を折り返す際に、それらの文字が新しい行の先頭に来るか、前の行の末尾に残るかに影響します。

これらの設定は、特定の言語やファイル形式において、より自然な位置で折り返しを行わせたい場合に調整する可能性がありますが、ほとんどのユーザーはデフォルト値のままで問題なく利用できるでしょう。

3. コード折り返しの設定方法（GUI vs settings.json）

VS Codeの設定を変更する方法は主に2つあります。グラフィカルユーザーインターフェース（GUI）を使用する方法と、設定ファイル（settings.json）を直接編集する方法です。どちらの方法でも同じ設定が可能ですが、それぞれに利点があります。

3.1. GUIを使った設定方法

GUIを使う方法は、VS Codeの操作に慣れていない方や、利用可能な設定項目を一覧で見たい場合に便利です。

  1. 設定画面を開く:

    • Windows/Linux: File > Preferences > Settings またはショートカット Ctrl + ,
    • macOS: Code > Preferences > Settings またはショートカット Cmd + ,

  2. 設定項目を検索する:
    設定画面の上部にある検索バーに、「word wrap」または「コード折り返し」と入力します。関連する設定項目が絞り込まれて表示されます。

  3. Editor: Word Wrap を設定する:
    検索結果の中から「Editor: Word Wrap」という項目を見つけます。この項目のドロップダウンメニューから、off, on, wordWrapColumn, bounded のいずれかを選択します。

    • off: オフ
    • on: オン
    • wordWrapColumn: カラム幅で折り返す
    • bounded: バウンド幅で折り返す

  4. Editor: Word Wrap Column を設定する (必要な場合):
    Editor: Word Wrap を wordWrapColumn または bounded に設定した場合、「Editor: Word Wrap Column」という項目が表示されます。ここに、折り返しの基準としたい列数を数値で入力します。デフォルトは 80 です。

  5. Editor: Wrapping Indent を設定する:
    「Editor: Wrapping Indent」という項目で、折り返された行のインデントスタイルを選択します。ドロップダウンメニューから none, same, indent, deepIndent のいずれかを選択します。デフォルトは same です。

設定画面でこれらの項目を変更すると、通常はVS Codeにすぐに反映されます。特に保存ボタンなどはありません。

GUI設定画面では、各設定項目の下に簡単な説明が表示されるため、設定内容を理解しやすいという利点があります。

3.2. settings.json を使った設定方法

settings.json ファイルを直接編集する方法は、より詳細な設定を行いたい場合や、設定をテキストとして管理・共有したい場合に便利です。また、GUI設定画面では提供されていない、より細かい設定を行うことも可能です（コード折り返し関連では少ないですが）。

  1. settings.json ファイルを開く:

    • 設定画面を開き、右上にある「{}」（Open Settings (JSON)）アイコンをクリックします。
    • コマンドパレット (F1 または Ctrl+Shift+P/Cmd+Shift+P) を開き、「Open Settings (JSON)」と入力して選択します。

    これにより、ユーザー設定の settings.json ファイルが開かれます。このファイルはJSON形式で、VS Codeのさまざまな設定項目をキーと値のペアで記述します。

  2. コード折り返し設定を記述する:
    開いた settings.json ファイルに、以下の形式で設定項目と値を記述します。すでに他の設定が記述されている場合は、カンマで区切って追加します。

    “`json
    {
    // 他の設定…

    "editor.wordWrap": "on", // 例: オンに設定
"editor.wordWrapColumn": 100, // 例: 100列で折り返す（wordWrapがwordWrapColumnまたはboundedの場合に有効）
"editor.wrappingIndent": "indent" // 例: 標準インデントで折り返す

    }
    “`

    • "editor.wordWrap" の値は "off", "on", "wordWrapColumn", "bounded" のいずれかを文字列で指定します。
    • "editor.wordWrapColumn" の値は数値を指定します。
    • "editor.wrappingIndent" の値は "none", "same", "indent", "deepIndent" のいずれかを文字列で指定します。

  3. ファイルを保存する:
    settings.json ファイルを保存します (Ctrl + S/Cmd + S)。通常、保存するとすぐに設定がVS Codeに反映されます。

settings.json を直接編集する利点は、設定のコピペが容易であること、コメント（//で始まる行）を使って設定の意味をメモしておけること、そして後述する言語固有の設定やワークスペース設定を記述できることです。

3.3. 設定の適用範囲と優先順位

VS Codeには、設定を適用する範囲として以下の3つのレベルがあります。

  1. ユーザー設定: すべてのVS Codeウィンドウ、ワークスペース、フォルダーに適用されるグローバルな設定です。settings.json は通常このレベルのファイルを編集します。
  2. ワークスペース設定: 開いている特定のワークスペース（複数のフォルダーやプロジェクトを含む場合）にのみ適用される設定です。ワークスペースのルートにある .vscode/settings.json ファイルに記述します。
  3. フォルダー設定: 開いている特定のフォルダー（単一のプロジェクトなど）にのみ適用される設定です。フォルダーのルートにある .vscode/settings.json ファイルに記述します。

これらの設定は、より狭い範囲の設定が広い範囲の設定を上書きするという優先順位で適用されます。つまり、フォルダー設定 > ワークスペース設定 > ユーザー設定 の順で優先されます。

例えば、ユーザー設定で editor.wordWrap を "off" に設定していても、特定のプロジェクトのフォルダー設定で editor.wordWrap を "on" に設定すると、そのプロジェクトを開いている間はその設定が優先され、コードが折り返されて表示されます。

これにより、「普段は折り返したくないけど、特定のプロジェクトだけは折り返したい」「この種類のファイルは常に折り返したい」といった柔軟な設定が可能になります。

4. 言語固有およびワークスペースごとのコード折り返し設定

前述の通り、VS Codeの設定は適用範囲を指定できます。この機能を使うと、「普段はコード折り返しをオフにしているが、Markdownファイルを開いたときだけオンにしたい」といったニーズに応えることができます。

4.1. 言語固有のコード折り返し設定

特定の言語（ファイル形式）を開いたときだけ、コード折り返しの設定を変えたい場合は、言語固有の設定を使用します。これは主に settings.json に記述します。

settings.json ファイル内で、言語IDをキーとして設定を記述します。言語IDは角括弧 [] で囲みます。例えば、Markdownファイル（言語ID: markdown）でコード折り返しをオンにしたい場合は、以下のように記述します。

“`json
{
“editor.wordWrap”: “off”, // ユーザー設定全体ではオフ

"[markdown]": { // Markdownファイルの場合
    "editor.wordWrap": "on" // オンにする
},
"[json]": { // JSONファイルの場合
    "editor.wordWrap": "bounded", // boundedにする
    "editor.wordWrapColumn": 120 // 120列で折り返す
}
// 他の設定...

}
“`

この設定により、通常のコードファイル（例: .js, .py, .cpp など）を開いているときはユーザー設定の editor.wordWrap: "off" が適用されますが、.md ファイルを開くと [markdown] ブロック内の設定が優先され、editor.wordWrap: "on" が適用されます。.json ファイルを開いた場合は、[json] ブロック内の設定が適用されます。

よく使う言語IDの例：
* JavaScript: javascript
* TypeScript: typescript
* Python: python
* HTML: html
* CSS: css
* JSON: json
* Markdown: markdown
* YAML: yaml
* Shell Script: shellscript
* C++: cpp
* Java: java
* PHP: php

言語IDは、VS Codeのウィンドウ右下にあるステータスバーに表示されていることが多いです。または、コマンドパレットで「Change Language Mode」を実行すると、利用可能な言語モードと対応する言語IDを確認できます。

言語固有設定では、editor.wordWrap だけでなく、editor.wordWrapColumn や editor.wrappingIndent など、コード折り返しに関連する他の設定も個別に指定できます。

4.2. ワークスペース/フォルダーごとのコード折り返し設定

特定のプロジェクトやフォルダーを開いているときだけ、コード折り返しの設定を変えたい場合は、ワークスペース設定またはフォルダー設定を使用します。

これは、そのワークスペースまたはフォルダーのルートディレクトリ直下にある .vscode という隠しフォルダ内に settings.json ファイルを作成し、その中に設定を記述することで実現します。

例えば、/path/to/my_project というフォルダーを開いているときに、このフォルダー内のファイルに対してだけコード折り返しをオンにしたい場合は、/path/to/my_project/.vscode/settings.json ファイルを作成し、以下のように記述します。

json
// /path/to/my_project/.vscode/settings.json
{
"editor.wordWrap": "on"
}

この設定は、他のワークスペースやフォルダーを開いた場合には影響しません。ユーザー設定で editor.wordWrap が off になっていても、このフォルダーを開いている間はこの設定が優先されます。

ワークスペース設定とフォルダー設定の違いは、VS Codeで「ワークスペース」として保存しているか（.code-workspace ファイルが存在する場合）、単にフォルダーを開いているかです。単一のフォルダーを開いている場合はフォルダー設定、複数のフォルダーを含むワークスペースを開いている場合はワークスペース設定として扱われますが、設定ファイルの場所はどちらも .vscode/settings.json です。

この機能は、チーム内でプロジェクト固有のコーディングスタイル（例: 行の長さ制限）を共有したい場合や、特定のドキュメントプロジェクト（例: Markdownで書かれたドキュメント）では常に折り返したいが、コードプロジェクトでは折り返したくない、といった場合に非常に役立ちます。.vscode/settings.json をプロジェクトのリポジトリに含めることで、チームメンバー間で統一されたエディタ設定を共有することも可能です。

5. コード折り返しのショートカット (Alt + Z)

コード折り返しのオン/オフを頻繁に切り替えたい場合に便利なのが、ショートカットキーです。VS Codeには、コード折り返しを一時的に切り替えるためのデフォルトのショートカットキーが用意されています。

5.1. デフォルトのショートカットキー

VS Codeのデフォルト設定では、コード折り返しを切り替えるショートカットは以下の通りです。

  • Windows/Linux: Alt + Z
  • macOS: Option + Z

このショートカットを押すたびに、現在のエディタでのコード折り返しの状態がトグル（切り替え）されます。

  • 折り返しがオフ (off) の状態であれば、オン (on) になります。
  • 折り返しがオン (on) の状態であれば、オフ (off) になります。

重要: このショートカットで切り替えられる「オン」の状態は、基本的に editor.wordWrap: "on" の挙動と同じ、つまり「ビューポート幅での折り返し」です。たとえ settings.json で editor.wordWrap を wordWrapColumn や bounded に設定していても、Alt + Z (または Option + Z) で切り替えた一時的な状態は、ビューポート幅での折り返し (on の挙動) になります。

このショートカットは、設定を永続的に変更するのではなく、一時的に表示を切り替えるためのものです。ショートカットでオンにした後、VS Codeを再起動したり、別のファイルを開き直したりすると、settings.json や言語固有設定、ワークスペース設定で定義された永続的な設定状態に戻ります。

5.2. ショートカットの使い方と活用シーン

Alt + Z / Option + Z ショートカットは、以下のようなシーンで非常に便利です。

  • 長い行の内容を素早く確認したい: デフォルトで折り返しをオフにしているが、特定の長い行の内容全体を一時的に確認したい場合に、ショートカットを一度押すだけでビューポート幅で折り返して表示できます。確認後、もう一度押せば元のオフの状態に戻ります。
  • コード構造と全文表示を切り替えたい: コードの全体的な構造（インデントなど）を確認する際は折り返しをオフにし、コメントや文字列リテラルのような長いテキストの内容を読みたいときは一時的に折り返しをオンにする、といった使い分けが素早く行えます。
  • プレゼンテーションや画面共有: デモなどで画面を共有する際に、参加者の画面解像度に合わせて一時的にコードを折り返して表示し、見切れを防ぐことができます。

このショートカットは、開いているエディタごとに独立して機能します。複数のファイルをタブで開いている場合、Alt + Z を押したエディタタブのみでコード折り返しの状態が切り替わります。

5.3. ショートカットが効かない場合

デフォルトのショートカット (Alt + Z / Option + Z) が効かない場合は、以下の点を確認してください。

  1. アクティブなエディタがあるか: ショートカットはエディタウィンドウがアクティブな場合にのみ機能します。サイドバーやターミナルなどがフォーカスされている状態では効きません。コード編集エリアをクリックしてエディタにフォーカスを当て直してみてください。
  2. 他のアプリケーションとの競合: Alt + Z や Option + Z が、VS Code以外の常駐アプリケーション（例: グラフィックドライバーの設定ツール、クラウドストレージの同期ツールなど）によってショートカットとして占有されている可能性があります。タスクマネージャーなどで実行中のアプリケーションを確認し、競合している可能性のあるアプリケーションを一時的に終了させてみてください。
  3. VS Code内のキーバインディングの競合: VS Code内で、別の拡張機能やユーザー設定によって Alt + Z に別のコマンドが割り当てられている可能性があります。後述するキーバインディング設定画面で確認できます。
  4. キーボードレイアウト: 使用しているキーボードレイアウトによっては、意図したキーが正しく入力されていない可能性があります。
  5. 拡張機能の影響: まれに、インストールされている拡張機能がエディタのキーボードイベントを横取りしたり、コード折り返し機能に干渉したりする場合があります。すべての拡張機能を一時的に無効にして、ショートカットが機能するか試してみてください（コマンドパレットで「Developer: Reload With Extensions Disabled」を実行）。

これらの確認を行っても解決しない場合は、VS Codeのキーバインディング設定を確認し、必要に応じてショートカットをカスタマイズすることを検討しましょう。

6. コード折り返しショートカットのカスタマイズ

デフォルトの Alt + Z / Option + Z が使いにくい場合や、別のキーに割り当てたい場合は、VS Codeの強力なキーバインディングカスタマイズ機能を利用できます。

6.1. キーバインディング設定画面（GUI）でのカスタマイズ

GUIを使ってショートカットを変更する方法は、直感的で簡単です。

  1. キーボードショートカット設定画面を開く:

    • Windows/Linux: File > Preferences > Keyboard Shortcuts またはショートカット Ctrl + K Ctrl + S
    • macOS: Code > Preferences > Keyboard Shortcuts またはショートカット Cmd + K Cmd + S

    これにより、キーボードショートカットの設定画面が開きます。この画面には、VS Codeで利用可能なコマンドと、それらに割り当てられている現在のショートカットの一覧が表示されます。

  2. コマンドを検索する:
    設定画面の上部にある検索バーに、「word wrap」または「折り返し」と入力します。コード折り返しに関連するコマンドが表示されます。探しているコマンドは通常 editor.action.toggleWordWrap です。

  3. ショートカットを変更または追加する:
    editor.action.toggleWordWrap の行を見つけます。

    • 既存のショートカットを変更: 現在割り当てられているショートカットの上でダブルクリックするか、右クリックして「Change Keybinding」を選択します。入力ダイアログが表示されるので、新しく割り当てたいキーの組み合わせを押します。
    • 新しいショートカットを追加: editor.action.toggleWordWrap の行の上で右クリックし、「Add Keybinding」を選択します。入力ダイアログが表示されるので、新しく割り当てたいキーの組み合わせを押します。

    入力ダイアログで希望のキーを押すと、そのキーの組み合わせがテキストとして表示されます。Enter キーを押して確定します。もしそのキーの組み合わせが既に別のコマンドに割り当てられている場合は、警告が表示されます。必要であれば、競合しているコマンドのショートカットを変更するか、割り当てを解除してください。

  4. when 句を設定する (オプション):
    ショートカットの適用条件を細かく制御したい場合は、when 句を設定します。editor.action.toggleWordWrap の行を右クリックし、「Change When Expression」を選択します。入力ダイアログが表示されるので、条件式を入力します。

    デフォルトの Alt + Z / Option + Z の when 句は通常 editorTextFocus です。これは「テキストエディタにフォーカスがあるとき」という意味です。これにより、エディタ以外の場所（サイドバーなど）にいるときに意図せずショートカットが発動するのを防いでいます。

    例えば、Markdownファイルを開いているときにだけこのショートカットを有効にしたい場合は、editorTextFocus && editorLangId == 'markdown' のように条件式を設定できます（ただし、一時的なトグルのショートカットにこのような細かい条件をつけるのは一般的ではありません）。

設定画面での変更は、自動的にユーザー設定の keybindings.json ファイルに保存されます。

6.2. keybindings.json ファイルでのカスタマイズ

より高度な設定や、複数のショートカットをまとめて管理したい場合は、keybindings.json ファイルを直接編集します。

  1. keybindings.json ファイルを開く:

    • キーボードショートカット設定画面を開き、右上にある「{}」（Open Keyboard Shortcuts (JSON)）アイコンをクリックします。
    • コマンドパレット (F1 または Ctrl+Shift+P/Cmd+Shift+P) を開き、「Open Keyboard Shortcuts (JSON)」と入力して選択します。

    これにより、ユーザー設定の keybindings.json ファイルが開かれます。このファイルはJSON形式で、カスタムのキーバインディングを記述します。

  2. カスタムショートカットを記述する:
    keybindings.json ファイルは、ショートカット設定の配列です。それぞれの要素は、key, command, when の3つのプロパティを持つオブジェクトです。

    “`json
    [
    // 他のカスタムショートカット…

    {
    "key": "alt+z", // 割り当てたいキーの組み合わせ
    "command": "editor.action.toggleWordWrap", // 実行したいコマンド
    "when": "editorTextFocus" // コマンドを実行する条件
},
{
    "key": "ctrl+alt+w", // 例: Ctrl+Alt+W にも割り当てる
    "command": "editor.action.toggleWordWrap",
    "when": "editorTextFocus"
}

    ]
    “`

    • key: 割り当てたいキーの組み合わせを文字列で指定します。複数のキーを組み合わせる場合は + でつなぎます（例: "ctrl+shift+w"）。特定のキー（例: f1, enter, escape など）や、修飾キーのみ（例: ctrl, shift, alt, cmd）も指定できます。キーコードを使うことも可能ですが、通常はキー名を使います。
    • command: 実行したいコマンドIDを文字列で指定します。コード折り返しをトグルするコマンドは "editor.action.toggleWordWrap" です。コマンドIDはキーボードショートカット設定画面で確認できます。
    • when: コマンドが有効になる条件を文字列で指定します。これはVS Codeのコンテキストキーに基づいたブール式です。例えば、"editorTextFocus" は「テキストエディタにフォーカスがあるとき」を意味します。条件を省略した場合、常に有効になります（ただし、エディタコマンドの場合は通常 editorTextFocus が暗黙的に含まれます）。

    when 句で使えるコンテキストキーは多岐にわたります。例えば：
    * editorTextFocus: テキストエディタにフォーカスがあるか
    * editorLangId == 'markdown': 現在のファイルがMarkdownであるか
    * editorFileName == 'settings.json': 現在のファイル名が settings.json であるか
    * inDebugMode: デバッグモード中か
    * terminalFocus: 統合ターミナルにフォーカスがあるか
    * explorerViewletVisible: エクスプローラーサイドバーが表示されているか
    * filesExplorerFocus: エクスプローラー内のファイルリストにフォーカスがあるか
    * textInputFocus: テキスト入力フィールド（検索バーなど）にフォーカスがあるか
    * editorHasSelection: エディタでテキストが選択されているか

    これらのコンテキストキーを && (AND)、|| (OR)、! (NOT) と組み合わせて、複雑な条件を指定できます。例えば、「Markdownファイルではないエディタにフォーカスがあるときに有効」とするなら editorTextFocus && editorLangId != 'markdown' となります。

    keybindings.json では、デフォルトのキーバインディングを上書きすることも可能です。同じ key と when の組み合わせを持つエントリを keybindings.json に記述すると、デフォルトの設定よりもユーザー設定が優先されます。特定のコマンドのデフォルトショートカットを無効にしたい場合は、そのコマンドに対して key を指定せず、command に -コマンドID の形式で記述します。

    json
    [
    // デフォルトの Alt+Z を無効にする例
    {
    "key": "alt+z",
    "command": "-editor.action.toggleWordWrap"
    },
    // Ctrl+W に別のコマンドを割り当てたいが、ウィンドウを閉じるデフォルト動作も維持したい場合
    // より限定的な when 句を持つ設定を先に記述する
    {
    "key": "ctrl+w",
    "command": "workbench.action.closeActiveEditor", // 通常のエディタを閉じるデフォルトコマンド
    "when": "editorTextFocus"
    },
    {
    "key": "ctrl+w",
    "command": "terminal.kill", // ターミナルにフォーカスがあるときはターミナルを閉じる
    "when": "terminalFocus"
    }
    ]
    ショートカットの競合を解決する際は、when 句を使って、より限定的なコンテキストで実行されるコマンドに優先度を与えるように記述することが重要です。keybindings.json の配列の後半に記述された設定ほど優先度が高くなります。

  3. ファイルを保存する:
    keybindings.json ファイルを保存すると、通常はすぐに変更がVS Codeに反映されます。

キーバインディングのカスタマイズは、VS Codeを自分好みに最適化するための強力な手段です。コード折り返しのトグルだけでなく、頻繁に使う他のコマンドにも便利なショートカットを割り当てることで、コーディング効率を大幅に向上させることができます。

7. コマンドパレットからのコード折り返し操作

ショートカットキーを覚えるのが苦手な場合や、キーボードを使わずに操作したい場合は、VS Codeのコマンドパレットからコード折り返しを操作することも可能です。

  1. コマンドパレットを開く:

    • Windows/Linux: Ctrl + Shift + P
    • macOS: Cmd + Shift + P

    または、F1 キーを押すことでも開けます。

  2. コマンドを検索・実行する:
    開いたコマンドパレットに、「toggle word wrap」または「折り返し」と入力します。入力内容に応じてコマンドが絞り込まれて表示されます。

    目的のコマンドは「View: Toggle Word Wrap」（または「表示: コードの折り返しを切り替え」）です。このコマンドは、前述のショートカット Alt + Z / Option + Z と同じ機能を提供します。つまり、現在のエディタでコード折り返しのオン/オフを一時的に切り替えます。

    リストから「View: Toggle Word Wrap」を選択し、Enter キーを押すかクリックすると、コマンドが実行され、コード折り返しの状態が切り替わります。

コマンドパレットは、VS Codeのあらゆるコマンドにアクセスできる非常に便利な機能です。頻繁には使わないけれど時々使いたい機能や、ショートカットを覚えていない機能を利用する際に役立ちます。コード折り返しのトグルも、その一つとしてコマンドパレットから実行できます。

8. 応用編・関連機能との連携

コード折り返し機能は単体でも便利ですが、VS Codeの他の機能や、プロジェクトで利用するツールと連携させることで、さらに快適な開発環境を構築できます。

8.1. 水平スクロールとの関係

コード折り返しを無効 (editor.wordWrap: "off") にした場合、長い行はエディタの右端で見切れ、水平スクロールが必要になります。VS Codeでは、この水平スクロールの挙動に関する設定も提供されています。

  • editor.scrollBeyondLastColumn: 最後の列のさらに右側までスクロールできる列数を指定します。デフォルトは 5 です。これを大きな値（例: 999 など）に設定すると、最後の文字が見切れることなく、右端に余裕を持って表示させることができます。
  • editor.smoothScrolling: スクロールを滑らかにするかどうかを設定します。オンにすると、マウスホイールやスクロールバー操作での移動がより滑らかになります。

コード折り返しをオフにしている場合でも、これらの設定を調整することで、水平スクロール時の操作感を改善できます。

8.2. ミニマップ（Minimap）での表示

VS Codeのミニマップは、コード全体の鳥瞰図を提供してくれる便利な機能です。コード折り返しが有効な場合、ミニマップ上での行の表示も折り返しを反映します。

長い行が折り返されている場合、ミニマップ上ではその論理行が複数の短い表示行として表示されます。これにより、コードの「形」が、折り返された状態を反映したものになります。

もし、ミニマップ上で論理的な行の長さ（折り返される前の長さ）を確認したい場合は、一時的にコード折り返しをオフにするか、ミニマップ関連の設定で挙動を調整する必要があるかもしれません（ただし、ミニマップ自体に折り返しを無効にする直接的な設定はないようです）。通常は、折り返し状態を反映したミニマップ表示で問題ないでしょう。

8.3. フォーマッター（Prettierなど）との連携

PrettierやESLintなどのフォーマッターは、コードを自動的に整形し、コーディングスタイルを統一するのに役立ちます。多くのフォーマッターには、1行あたりの文字数の上限（Print Widthなど）を設定するオプションがあります。

例えば、Prettierで printWidth: 80 と設定すると、可能であれば80文字でコードを折り返すように整形されます。ただし、すべての長い行が80文字で収まるように整形されるわけではありません。整形ルールによっては、どうしても80文字を超える長い行が生成されることもあります。

このような場合、Prettierなどのフォーマッターの設定と、VS Codeのコード折り返し設定を組み合わせて使うと効果的です。

  • Prettierで printWidth: 80 と設定し、コードを整形する。
  • VS Codeで editor.wordWrap を bounded または wordWrapColumn に設定し、editor.wordWrapColumn を 80 以上の値（例: 100 や 120）に設定する。

これにより、フォーマッターが整形したコードは（可能な範囲で）指定した文字幅に収まりますが、それでも超えてしまう行は、VS Codeのコード折り返し機能によって表示領域内で折り返されるため、水平スクロールなしで全体を確認できます。

逆に、Prettierなどのフォーマッターがコード折り返しを厳密に行う場合（例: 長い配列やオブジェクトを必ず複数行に整形する）、VS Code側の editor.wordWrap を off にしておくと、フォーマッターによって整形された論理的な改行構造をそのまま表示でき、コードの意図をより明確に読み取れる場合があります。

8.4. 長いコメントや文字列リテラルへの対応

プログラムコード内のコメントや、長い文字列リテラルは、しばしば1行が非常に長くなりがちです。これらの部分だけを折り返したい、あるいは折り返したくないというニーズがあるかもしれません。

残念ながら、VS Codeの標準機能では「コメントだけ折り返す」「文字列リテラルだけ折り返さない」といった、構文要素に基づいたきめ細かいコード折り返し設定は提供されていません。editor.wordWrap 設定は、エディタバッファ全体のテキストに対して適用されます。

ただし、以下の方法で部分的に対応できる場合があります。

  • 言語固有設定: 特定の言語でコメントや文字列リテラルが長い傾向がある場合、その言語全体に対して editor.wordWrap をオンにするなど、言語固有の設定で対応する。
  • 手動改行: 本当に読みにくい長いコメントなどは、コード折り返しに頼るのではなく、エディタ上で手動で改行を挿入して複数の短い行に分割する。
  • 拡張機能: コード折り返しに関する、より高度な機能を提供する拡張機能が存在する可能性があります。VS Codeマーケットプレイスで「word wrap」や「ソフトラップ」などのキーワードで検索してみてください。

9. コード折り返しに関するトラブルシューティング

コード折り返しが期待通りに動作しない場合、いくつかの原因が考えられます。ここでは、一般的なトラブルシューティングの手順と解決策を示します。

9.1. 設定が反映されない場合

  • 設定ファイルを確認する:
    • どのレベル（ユーザー、ワークスペース、フォルダー）の settings.json を編集しましたか？
    • そのファイルは正しく保存されていますか？
    • JSON構文にエラーはありませんか？ settings.json ファイルを開いたときに、VS Codeが構文エラー（赤い波線やエラーアイコン）を報告していないか確認してください。
    • 設定項目名 (editor.wordWrap など) や設定値 ("on", "off" など) は正しく記述されていますか？タイポがないか確認してください。
  • 設定の優先順位を考慮する:
    • より狭い範囲（フォルダー > ワークスペース > ユーザー）で、あなたの設定を上書きする設定が存在しませんか？例えば、ユーザー設定でオンにしても、開いているフォルダーの .vscode/settings.json でオフに設定されていると、そちらが優先されます。
    • 言語固有設定（[languageId] ブロック）で、あなたの設定を上書きしていませんか？現在開いているファイルの言語IDと、settings.json の言語固有設定を確認してください。
  • VS Codeを再起動する:
    まれに、設定の変更がすぐに反映されない場合があります。VS Codeを完全に終了し、再起動してみてください。
  • VS Codeのバージョンを確認する:
    非常に古いバージョンのVS Codeを使用している場合、設定項目や挙動が現在のものと異なる可能性があります。最新版にアップデートすることを検討してください。

9.2. ショートカットが効かない場合

  • エディタがアクティブか確認する:
    ショートカットは、通常エディタ領域にフォーカスがある場合にのみ有効です。エディタをクリックしてみてください。
  • キーバインディング設定を確認する:
    前述の「キーボードショートカット設定画面」を開き、editor.action.toggleWordWrap コマンドに目的のショートカットが割り当てられているか確認します。

    • もし割り当てられていない場合は、設定します。
    • もし割り当てられているにも関わらず効かない場合は、同じキーの組み合わせが他のコマンドに割り当てられていないか確認します。競合している場合は、競合しているコマンドのショートカットを変更するか、keybindings.json で when 句を調整して競合を解消します。
    • when 句が設定されている場合、その条件（例: editorTextFocus）が満たされているか確認します。
  • 他のアプリケーションとの競合を確認する:
    VS Code外のアプリケーションがそのショートカットを占有していないか確認します。
  • 拡張機能を無効にして試す:
    拡張機能が原因でショートカットが機能しない可能性はゼロではありません。一時的にすべての拡張機能を無効にして、ショートカットが効くか試してみてください。
  • キーボードレイアウトや物理的なキーボードの問題:
    使用しているキーボードやOSのキーボード設定、または物理的なキーボード自体に問題がないか確認します。

9.3. 折り返し位置がおかしい場合

  • editor.wordWrap の設定値を確認する:
    on であればビューポート幅、wordWrapColumn または bounded であれば editor.wordWrapColumn の値に基づいて折り返されます。期待した設定値になっていますか？
  • editor.wordWrapColumn の値を確認する:
    wordWrapColumn または bounded を使用している場合、editor.wordWrapColumn に設定された数値が正しいか確認します。
  • editor.wordWrapBreak* 設定を確認する:
    高度な折り返し文字設定 (editor.wordWrapBreakBeforeCharacters, editor.wordWrapBreakAfterCharacters, editor.wordWrapBreakObtrusiveCharacters) がデフォルトから変更されていないか確認します。これらの設定が不適切だと、単語の途中など不自然な位置で折り返しが発生することがあります。通常はデフォルト値のままで問題ありません。
  • 表示フォントやズームレベル:
    使用しているフォントの種類、フォントサイズ、VS Codeのズームレベル (Ctrl + =/- または Cmd + =/-) が、列幅の解釈にわずかに影響を与える可能性があります。ただし、これは通常大きな問題にはなりません。
  • タブとスペース:
    インデントにタブとスペースが混在している場合、列幅の計算に影響を与える可能性があります。editor.tabSize などの設定が適切か確認してください。

9.4. 特定のファイルでだけ折り返したい/折り返したくない場合

  • 言語固有設定を利用する:
    特定のファイル形式（例: Markdown, JSON）だけで折り返したい場合は、settings.json に [languageId] ブロックを作成し、そこで editor.wordWrap を設定します。
  • ワークスペース/フォルダー設定を利用する:
    特定のプロジェクトやフォルダー内のすべてのファイルで折り返しの設定を統一したい場合は、そのフォルダーの .vscode/settings.json に設定を記述します。
  • 設定の適用範囲と優先順位を再確認する:
    ユーザー設定、ワークスペース設定、言語固有設定、エディタビューの一時的な状態（ショートカットによる切り替え）など、複数の設定が関与している可能性があります。どの設定が優先されているか、意図した通りの優先順位になっているかを確認します。VS Codeの設定画面で、設定項目がどのレベルで上書きされているかを確認する機能が役立ちます。

これらのトラブルシューティングの手順を順番に試していくことで、コード折り返しに関するほとんどの問題は解決できるはずです。

10. まとめ：コード折り返し機能をマスターしてVS Codeを快適に

この記事では、VS Codeにおけるコード折り返し（Word Wrap）機能について、その必要性から始まり、基本設定、詳細な設定オプション、GUIおよびsettings.jsonを使った設定方法、言語固有およびワークスペース設定、そして便利なショートカットの使い方とカスタマイズ方法まで、網羅的に解説しました。

コード折り返し機能は、特に長い行を扱う際に、水平スクロールの手間を省き、可読性と編集効率を大幅に向上させてくれる非常に便利な機能です。VS Codeでは、editor.wordWrap の off, on, wordWrapColumn, bounded といった設定値、editor.wordWrapColumn での列数指定、editor.wrappingIndent でのインデントスタイルの調整など、非常に柔軟な設定が可能です。

これらの設定を理解し、自分の作業スタイルやファイルの種類に合わせて適切に設定することで、VS Codeの表示領域を最大限に活用し、快適なコーディング・編集環境を実現できます。

また、Alt + Z / Option + Z というデフォルトのショートカットを使えば、コード折り返しの状態を一時的に素早く切り替えることができます。このショートカットが効かない場合や、別のキーに割り当てたい場合は、キーボードショートカット設定画面や keybindings.json ファイルを使って簡単にカスタマイズが可能です。特に keybindings.json を使えば、when 句によって特定の条件下でのみショートカットを有効にするなど、高度なカスタマイズも行えます。

さらに、言語固有設定やワークスペース設定を活用することで、「普段はオフだけど、Markdownファイルだけはオンにする」「特定のプロジェクトを開いているときだけ、コード折り返しを有効にする」といった、より実践的なニーズにも対応できます。

もしコード折り返しに関する問題に直面した場合は、設定の適用範囲、設定値の正確さ、キーバインディングの競合、そして拡張機能の影響などを順に確認することで、ほとんどの場合解決できます。

VS Codeのコード折り返し機能を完全に理解し、自在に操れるようになれば、あなたのコーディングやドキュメント作成はさらに快適で効率的なものになるでしょう。ぜひこの記事を参考に、あなたのVS Code環境を最適化してみてください。

VS Codeには、この記事で紹介した以外にも、あなたの生産性を向上させるための強力な機能がたくさん備わっています。公式ドキュメントを探索したり、他のVS CodeユーザーのTipsを参考にしたりしながら、あなたにとって最高の開発環境を築き上げてください。

快適なVS Codeライフを！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール