本記事では、Visual Studio Code（以下、VSCode）における折り返し機能について解説します。
VSCodeの折り返し機能の基本的な使い方から、より高度な設定まで幅広く網羅します。
折り返し機能とは
折り返し機能とは、1行の文字数がある程度以上のときに自動で改行して次の行へ表示する機能のことです。
コーディングをする上で長い行を読みやすくしたり、コードのレイアウトを整えたりするために役立ちます。
VSCodeでは必要に応じてオン・オフにしたり、設定を変更したりできます。
基本的な使い方
折り返し機能のオン・オフ方法
必要に応じてオン・オフを切り替えられます。切り替えるには以下の手順を行ないます。
- 「表示」メニュー(英語設定の場合は「View」メニュー)をクリックします。
- 「表示」メニューから「右端での折り返し」をクリックします。
以上で折り返し機能のオン・オフが切り替わります。
折り返し位置の変更方法
折り返し位置は通常右端になります。この折り返し位置も変更できます。
- 「ファイル」メニュー(「File」メニュー)をクリックします。
- 「ファイル」メニューから基本設定メニュー(「Preferences」メニュー)をクリックします。
- 「基本設定」設定から設定メニュー(「Settings」メニュー)をクリックします。
- 検索ボックスに「word wrap」と入力します。
- 「Editor: Word Wrap」の値を「wordWrapColumn」か「bounded」に変更します。
- 「Editor: 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 Wrap | Diff Editorでの折り返し設定です。 |
| その他各言語などの Wrapping 設定 | 拡張ごとの設定やプログラミングごとの設定に wrapping の設定があることがあります。その拡張やプログラミング言語の設定方法に従ってください。 |
折り返し設定を切り替えるショートカット
ショートカットキー
Visual Studio Codeで一行が長すぎて右端が見えないとき、ショートカットで折り返し設定を切り替えられる。
MacとWindowsでそれぞれ以下のショートカットがデフォルトで割り当てられている。
- Macの場合: Option + z
- Windowsの場合: Alt + z
折り返し設定がされているときに入力すると折り返し設定がオフになり、 折り返し設定がオフのときに入力すると折り返しされる。
カスタムショートカットキーの設定方法
折り返しのショートカットキーをデフォルトの組み合わせから変更する方法は以下の通りです。
まず設定項目を探します。
- 「ファイル」メニューから「基本設定」→「キーボードショートカット」を選択します。
- 検索ボックスに「toggleWordWrap」などの関連するキーワードを入力します。
次にショートカットキーを変更します。
- 「toggleWordWrap」の行をダブルクリックします。
- ショートカットキー入力ダイアログが立ち上がるので割り当てたいショートカットを入力します。
- エンターキーを入力し、ショートカットキーを確定します。
以上で独自のショートカットキーを設定できます。
設定ファイルでカスタムショートカットキーを直接設定する
設定ファイルに手動で変更を加えることもできます。
なお、設定ファイルに手動で変更を加える場合は、以下の手順を行ないます。
- ctrl+shift+pでコマンドパレットを開き、キーボードショートカットを開く(JSON)を選択します。
- JSON形式で新しいショートカットキーを追加します。
例えば、「ctrl+alt+w」を「toggleWordWrap」に割り当てる場合、以下のようになります。
[
...
{
"key": "ctrl+alt+w",
"command": "editor.toggleWordWrap",
"when": "editorTextFocus"
}
...
]
setting.jsonでの設定
折り返しに関するsetting.jsonでの設定方法
VSCodeではsetting.jsonというファイルを使って折り返しに関する設定をカスタマイズできます。
ctrl+shift+pでコマンドパレットを開き、setting.jsonを開きます。
折り返しに関する設定項目は以下の通りです。
| ショートカットキー | 説明 |
|---|---|
| editor.wordWrap | 折り返しの方法を指定する設定。“off”（折り返しなし）, “on”（単語単位で折り返し）, “wordWrapColumn”（指定した桁数で折り返し）, “bounded”（親要素の幅に合わせて折り返し） |
| editor.wordWrapColumn | “wordWrapColumn"を選択した場合、折り返しの桁数を指定する設定。デフォルト値は80。 |
| editor.wrappingIndent | 折り返された行のインデントを指定する設定。“none”（インデントなし）, “same”（折り返された行を先頭行と同じ位置にインデント）, “indent”（折り返された行を1つ目の行よりもインデント） |
上記の設定例は以下の通りです。
{
// 折り返しに関する設定
"editor.wordWrap": "on",
"editor.wordWrapColumn": 80,
"editor.wrappingIndent": "indent"
}
折り返し機能の高度な使い方
折り返し機能をより効果的に使うために、以下のような高度な使い方があります。
行末の空白文字の除去
VSCodeは、折り返し機能を使うと、行末に不要な空白文字が追加されることがあります。これを防ぐためには、files.trimTrailingWhitespaceをtrueに設定します。
"files.trimTrailingWhitespace": true
長い単語の折り返し
VSCodeでは、長い単語を折り返すためのオプションが用意されています。editor.wordWrapをwordWrapColumnに設定し、editor.wordWrapColumnの値を適切な桁数に設定することで、長い単語を折り返すことができます。
"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 80
Markdownファイルの折り返し
Markdownファイルでも、通常のテキストと同様に折り返し機能を使用できます。
ただしMarkdownファイルでは、行末にスペースを入れることで改行を表現します。
この場合、editor.wordWrapをboundedに設定すると、行末のスペースを無視して折り返しできます。
"[markdown]": {
"editor.wordWrap": "bounded"
}
まとめ
本記事ではVSCodeにおける折り返し機能の使い方や設定方法について詳しく解説しました。
行の折り返しや単語の折り返しの設定方法や、ショートカットキーの一覧、さらにはsetting.jsonを使ったカスタム設定方法まで紹介しました。
折り返し機能をうまく活用することでコードが見やすくなり、より効率的なコーディングが可能になります。
