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

.

Memo

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

広告について。

サイト運営のため、Googleアドセンス
による広告があります。

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