Fixing VSCode's Word Wrap Issue

Introduction

After entering the AI programming era, my primary IDE has already switched to VSCode. Especially recently, with all development environments moved to remote development, I rely even more on VSCode's features.

In VSCode I often run into markdown editing, but by default, even with automatic wrapping enabled, VSCode's markdown still only wraps a few columns past the editor's bounds.

I spent quite a while investigating, with ChatGPT helping to troubleshoot, and finally solved it.

This post is a brief record of that.

Conclusion

I'll start with the conclusion.

VS Code has a known wrapping issue: the default editor.wrappingStrategy is simple, which may miscalculate for Chinese/CJK, non-standard character widths, and some monospaced Chinese fonts.

The corresponding issue: Incorrect wrap position in simple mode with monospaced Chinese fonts

The fix is to switch editor.wrappingStrategy to advanced

Here's the full configuration; just add this snippet to your user settings json.

"[markdown]": {
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.scrollBeyondLastColumn": 0, // 允许编辑器在最后一列之外，再额外横向滚动 N 列。
    "editor.minimap.enabled": false,
    "editor.wrappingStrategy": "advanced", // 默认的 editor.wrappingStrategy 是 simple，对 中文/CJK、非标准字符宽度、某些等宽中文字体 可能计算不准。VS Code 甚至有一个几乎完全对应的 issue：“monospaced Chinese fonts 下 simple 模式自动换行位置错误”，切换到 advanced 后换行位置正常
    "editor.wordWrap": "on", // 一直开启换行
},

I also turned off the minimap here to avoid covering the text on the right.

Screenshot of the result:

The Trial-and-Error Process

At first I enabled word wrap in the settings UI and set word wrap column,

but markdown lines were still too long, and I often had to drag the horizontal scrollbar, which really hurt the experience.

The configuration I tried at that point was:

"[markdown]": {
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  "editor.wrappingIndent": "same"
}

Using bounded instead of on, the logic is:

• Editor window narrower than 80 columns → wrap automatically to the window width
• Editor window is very wide → wrap at 80 columns at most
• So Markdown won't have "a sentence spanning the entire 4K screen"
• Normal text basically no longer needs horizontal scrolling

But it still didn't work; 80 columns was still too large, and only changing it to 70 had some effect.

And because of issues with how Chinese fonts are measured, the actual wrap position didn't match the editor width.

And this wasn't the effect I wanted either. I wanted wrapping to follow the editor width when I shrink it, not a fixed value.

This only takes effect when you set "editor.wordWrap": "on".

After all that fiddling it still didn't work. With the help of grandpa LLM, I finally found that GitHub issue mentioned earlier and solved it 😂

Appendix: VSCode Settings Override Priority

VSCode has four layers of configuration

Priority from high to low is: Workspace > Remote > User > Default