Enable/disable word wrap in VSCode

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 settings.json.

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 editor.wordWrapColumn.
• "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,Code language: JavaScript (javascript)

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.

In order to enable hard wrap in VSCode, you have to install an extension called Vim. If you didn’t know how to do that yet, we had a guide on how to install VSCode extensions to help.

Once you have Vim emulation installed, open settings.json and insert the following line

"vim.textwidth": 80,Code language: JavaScript (javascript)

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, how to integrate ZSH terminal to VSCode and how to format JSON in VSCode.