Word wrapping is one of the many essential features that every single text editor should have. And yes, of course a popular source code editor such as VSCode has that feature built-in. Yet, some of you may not be familiar with the interface and how to configure settings in VSCode.
This short article is going to show you how to quickly toggle word wrapping on and off, as well as customize word wrap settings in VSCode.
Quickly turn on/off word wrap in VSCode
You can toggle word wrap for the VS Code session by pressing a key combination. On Windows or Linux, simply press Alt+Z. On MacOS, you can also press Option ⌥ + Z.
Alternatively, one can enable/disable word wrapping by selecting View > Word Wrap from the Menu.
Advanced word wrap settings
Most of the time, the word wrap feature just works out of the box without any additional configuration. But VSCode allows you to fine-tuning it even more by using a few other settings flags.
To further customize VSCode word wrap, you need to access VSCode settings first. You can do that by accessing File > Preferences or press Ctrl + , key combination. Alternatively, open Command Palette and find Open Settings (JSON) to open
If you enabled word wrapping, there should be a key
editor.wordWrap set to
on in the
settings.json file. It can be customized with the following options.
"editor.wordWrap"controls how the lines should wrap.
"editor.wordWrap": "off"turns off word wrapping. Lines would not be wrapped.
"editor.wordWrap": "on"- Lines will wrap at the viewport width.
"editor.wordWrap": "wordWrapColumn"- Lines will wrap at the
"wordWrapColumn"width, no matter how the window are resized.
"editor.wordWrap": "bounded"- Lines will wrap at the minimum of viewport and
"wordWrapColumn": 80- Lines will wrap if the line length exceed 60 characters.
"editor.wrappingIndent"- Controls the indentation of wrapped lines. You can set this option to "none", "same", "indent" or "deepIndent".
"editor.wrappingIndent": "none": No indentation. Wrapped lines begin at column 1.
"editor.wrappingIndent": "same": Wrapped lines get the same indentation as the parent line.
"editor.wrappingIndent": "indent": Wrapped lines get +1 indentation toward the parent line.
"editor.wrappingIndent": "deepIndent": Wrapped lines get +2 indentation toward the parent line.
The end result should look like this
"editor.wordWrap": "bounded", "editor.wrappingIndent": "same", "editor.wordWrapColumn": 60,
Once you've done inserting the settings into
settings.json, save the file and restart VSCode to see the result.
Hard wrap lines in VSCode
Currently, VSCode only supports softwrapping out of the box. Users who are familiar with Vim may want something called "hard wrap". Hard wrapping means a newline would be automatically inserted at the closest word boundary if a line exceed a specified length. The feature can be helpful if you're writing in Markdown or other markup language.
Once you have Vim emulation installed, open
settings.json and insert the following line
Remember to replace
80 with the line length you want. I personally find
80 to be the best setting.
Alternatively, you can use Rewrap by stkb extension if Vim inteferes with your current settings.
We hope that this article helped you learn how to set up word wrap in VSCode to build up a better programming workflow. You may also want to see our guide on Spell Check Extensions for VSCode or how to integrate ZSH terminal to VSCode.