かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Mac VSCode 折返し設定 (Word Wrap) が無視されてしまう問題

Mac VSCode でエディター端で折り返す設定 Editor:Word Wrap: bounded を設定しているのに、テキストがエディターの幅を超えて横スクロールが表示されてしまう現象に問題に悩んでいました。
コードは Prettier で width のフォーマットをしているので問題ないのですが markdown でドキュメントを書いている時に非常に困る…

原因 editor.accessibilitySupporton になっていると折り返しが無視される

 

Screen reader mode
When VS Code detects that a screen reader is being used, it goes into screen reader optimized mode for the UI such as the editor and Integrated Terminal. The Status Bar displays Screen Reader Optimized in the lower right and you can exit screen reader mode by clicking on the display text.
Certain features such as folding, minimap (code overview), and word wrap are disabled when in screen reader mode. You can control whether VS Code uses screen reader mode with the Editor: Accessibility Support setting (editor.accessibilitySupport) and the values are on, off, or the default auto to automatically detect a screen reader through querying the platform.
cf. Accessibility in Visual Studio Code

スクリーンリーダーに対応したモードの設定で、これが on になっていると、コードの折りたたみ・折り返し・ミニマップなどの機能が無効になるトノコト。

設定の箇所にも on にすると Word Wrapping が無効になることが書かれていました

Editor: Accessibility Support Controls whether the editor should run in a mode where it is optimized for screen readers. Setting to on will disable word wrapping.

VSCode AccessibilitySupport setting

デフォルトは auto なのですが、設定した覚えがないのに on になっていたのが原因でした… この設定を on から auto にすると無事エディタの端で折り返されるようになりました!

Markdown の時だけ折返しの設定をする

.vscode/settings.json

{
  "[markdown]": {
    "files.trimTrailingWhitespace": false,
    "editor.accessibilitySupport": "auto",
    "editor.wordWrap": "bounded"
  }
}

wordWrap

keyword 意味
off Lines will never wrap.
折り返さない
on Lines will wrap at the viewport width.
エディタの幅で折り返す
wordWrapColumn Lines will wrap at editor.wordWrapColumn.
Editor:Word Wrap Column で指定されている幅で折り返す
bounded Lines will wrap at the minimum of viewport and editor.wordWrapColumn.
エディターの幅 又は Editor:Word Wrap Column のいずれか狭い方で折り返す

おわり ₍ ᐢ. ̫ .ᐢ ₎


[参考]