コードを整理して読みやすくするための機能
VSCodeのテキスト折り返し機能は、1行がエディターの幅を超えると、自動的に改行して次の行に表示される機能です。
コードやテキストをより読みやすく整理するために重要な機能で、横スクロールをなくして表示領域内でテキストを確認できるようにします。
本記事では、VSCodeでのテキスト折り返しについて、設定方法や折り返し時の文字数、インデントについて詳しく解説します。
テキスト折り返しの設定方法
初期設定ではテキスト折り返しは無効(off)になっています。以下の方法で有効化していきます。
方法1:設定メニューから有効化
手順1:設定を開く
上部のメニューから「ファイル >> ユーザー設定 >> 設定」を開きます。

手順2:検索ボックスに入力
設定画面の検索ボックスに「wordwrap」と入力後に、該当する項目(Editor Wrap)を見つけます。

手順3:折り返し方法を選択
「EditorWrap」のオプションから、テキストの折り返し設定を選びます。

- off:行を折り返しません
- on:エディターの幅に合わせて折り返し
- wordWrapColumn:指定した文字数で自動的に折り返し
- bounded:エディターの横幅または指定文字数で折り返し
各折り返し方法の違い
off:折り返しなし
テキストがエディターの右端を超えても、そのまま一行として表示され、スクロールバーが表示されます。

on:エディターの幅に合わせて折り返し
テキストは自動的にエディターの幅に合わせて折り返されます。スクロールバーは表示されません。

wordWrapColumn:指定した文字数で自動的に折り返し
指定した文字数(デフォルトでは80文字)を超えると折り返されます。エディターの幅とは無関係に、指定した文字数での折り返しが行われます。

bounded:エディターの幅または指定文字数で折り返し
指定した文字数で折り返しますが、エディターの幅がそれより狭い場合は、自動的にエディターの幅に合わせて折り返されます。

方法2:ショートカットキーを使って有効化
テキスト折り返しを簡単にオン・オフできるショートカットキーが用意されています。
- Windows:Alt + Z
- macOS:Option + Z
ショートカットを押すたびに、折り返し機能のオン・オフが切り替わります。
折り返しの文字数やインデント設定
折り返しの文字数設定
手順1:設定を開く
上部メニューから「ファイル >> ユーザー設定 >> 設定」を開きます。

手順2:検索ボックスに入力
設定画面の検索ボックスに「wordwrap」と入力し、該当する項目(Editor Wrap)を見つけます。

手順3:行の折り返し方法を選択
行の折り返し方法で「wordWrapColumn」を選択します。

手順4:折り返し文字数を設定
「Editor: Word Wrap Column」に、折り返したい文字数を入力します。(例:40
に設定すると、半角40文字ごとに折り返しされます。)

折り返しのインデント設定
手順1:設定を開く
上部メニューから「ファイル >> ユーザー設定 >> 設定」を開きます。

手順2:検索ボックスに入力
設定画面の検索ボックスに「Editor: Wrapping Indent」と入力し、該当する項目を見つけます。

手順3:インデントの制御方法を選択
「none/same/indent/deepIndent」から、インデントの制御方法を選択します。

none:インデントなし
テキストが折り返された際に次の行頭からスタートし、インデントはありません。

same:行頭と同じ位置にインデント
折り返し行は、最初の行と同じインデント位置に揃えられます。

indent:1つ目の行より深いインデント
折り返し行は、最初の行よりも1つ深いインデントが付きます。

deepIndent:さらに深いインデント
折り返し行は、最初の行よりもさらに深いインデントが付きます。

折り返し時の処理方法を指定
「Editor: Wrapping Strategy」では、折り返し時の処理方法を指定します。折り返し処理の精度や速度などの調整が可能です。
手順1:設定を開く
上部メニューから「ファイル >> ユーザー設定 >> 設定」を開きます。

手順2:検索ボックスに入力
設定画面の検索ボックスに「Editor: Wrapping Strategy」と入力し、該当する項目を見つけます。

手順3:アルゴリズムの制御方法を選択
「simple、advanced」の中から、折り返しポイントのアルゴリズムの制御方法を選択します。

simple:シンプル、高速処理
折り返しの処理が高速で行われますが、等幅フォント(すべての文字が同じ幅)を想定しているため、非等幅フォント(幅が異なる文字を含む)では正確な折り返しが行われない可能性があります。
advanced:高度、正確な処理
非等幅フォント(文字幅が異なる)でも正確に折り返しが行われますが、その分処理速度が低下します。
等幅フォント(VSCodeのデフォルトフォントなど)を使用している場合は、デフォルトの「simple」設定で問題ありません。
折り返し設定をして快適にVSCodeを使おう!
今回は、VSCodeでのテキストの折り返し機能について、基本的な設定方法や文字数の指定、インデントの設定など解説しました。テキスト折り返し機能は、VSCodeでのコーディングやテキスト編集をより快適にするために重要な設定です。記事を参考にして自分好みにカスタマイズしてみましょう。