VS Codeが折り返しをしないときと、折り返しのショートカット。 / いがわ

.

Memo

VS Codeの折り返しと、ショートカット。

VS Codeが折り返していない!?

VS Codeのコードが折り返さずにはみ出てしまう。

コードが右端で折り返していない。

VS Codeでコーディングをしているときに、コードがはみ出ていることに気がつくことがある。

VS Codeの折り返し。コード画面。

直したはずなのに、また折り返しにならないことも。

VS Codeの折り返し。コード画面。


VS Codeの折り返しの設定箇所は複数ある。

右端での折り返しと、行の折り返し方法の制御。

右端での折り返し。

右端での折り返しは、VS Codeの「メニューバー」か「ショートカット」から。

行の折り返し方法の制御。

行の折り返し方法の制御は、VS Codeの「設定」から。

この両方で設定しておかないと、あとで「あれ?直ってない?」となったりする。


VS Codeのコードを折り返す2つの方法。

右端での折り返しにチェックをつける。

メニューバーから、右端での折り返し。
  • 「メニューバー」 > 「表示」 > 「右端での折り返し」 へ進み、チェックを入れる。
ショートカットから、右端での折り返し。

右端での折り返しのショートカットは、下記のキーで切り替えられる。

  • Mac: 「Option + 「Z」
  • Windows: 「Alt」 + 「Z」

戻る場合のショートカット、Mac:「command」 + 「Z」 (Win:「Ctrl」 + 「Z」)と使うキーが似ているので、無意識でつい押してしまっていることもありそう。

右端での折り返しは、ファイル単位での設定。

また、この「右端での折り返し」はファイル単位での設定となるので、別のファイルには適用されない。

行の折り返し方法を制御するをオンにする。

設定を開くときも複数の方法がある。
VS Codeの歯車から設定を開く。

VS Codeの設定は、画面左下のある歯車のアイコンから開ける。

もし歯車アイコンが出ていない場合は、「表示」 > 「外観」 > 「アクティビティ バーの位置」 > 「非表示」にチェックがついている可能性が高い。

そのようなときは「非表示」のチェックをはずすか、下記のショートカットなどで「設定」を開く。

VS Codeの折り返し。設定の画面。
VS Codeのショートカットから設定を開く。

ショートカットは下記のキーで開ける。

  • Mac: 「command」 + 「,」
  • Windows: 「Ctrl」 + 「」
  • 「,」はカンマ。)

折り返しの設定の方法。
  1. 「設定」の画面上部にある検索バーで、「word」や「wordwrap」と入力する。
  2. Word Wrapの項目が表示される。
  3. 「行の折り返し方法を制御します。」を「on」にする。

VS Codeの折り返し。設定の画面。


VS Codeの折り返しを見つめる猫ちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。