Reputation: 63810

How can I switch word wrap on and off in Visual Studio Code?

When using code files, you typically don't need longer lines to wrap around. However, with .md files this is in fact rather useful. However, I can't seem to find the option to enable word wrap so longer lines will be wrapped.

To reproduce, open Visual Studio Code resized to a small-enough window, and enter the following text in a new document:

This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum. This is my test lorem ipsum.
A linebreak before this.

The effect is this:

Example of missing word wrap

I'm trying to get the horizontal scrollbar to stay away, having line 1 wrap around at the right side of the window.

I've done a few things to answer my own question:

Search Stack Overflow: zero results at the time of writing this;
Meticulously going through the menu of Visual Studio Code: didn't find it;
Using the Command Palette with "wrap": gives no matching commands.

Perhaps it's not possible, and I'd need to file a feature request? Or am I missing something?

Note that I'd like to be able to turn it on and off quickly. For one, @PanagiotisKanavos mentioned in comments this solution to change wrapping behavior in the settings, but I'm looking for a quick command or menu option to do this (much like Notepad++ and Sublime Text 2 have).

Upvotes: 897

Answers (27)

Bullsized

Reputation: 607

How I did it on my new Mac: in the Command Palette type in Preferences: Open User Settings and then add:

{
    "diffEditor.wordWrap": "on",
    "editor.wordWrap": "on"
}

and next time when you boot VSCode, the word wrap will setting will be active.

Upvotes: 2

Radha Satam

Reputation: 1008

Go to menu File → Preferences → User Settings.

It will open up Default Settings and settings.json automatically. Just add the following in the settings.json file and save it. This will overwrite the default settings.

// Place your settings in this file to overwrite the default settings
{ "editor.wrappingColumn": 0 }

Upvotes: 79

ulyssis2

Reputation: 1280

I am here to for the users who want to disable wrapping but could not succeed.

if disabling doesn't work after you changing the settings around VS code, i.e., the "wrap words" option in control pallete (ctrl+shif+P), or pressing alt+Z, then it is time to look at the extention you have installed.

In my case, i was working with Dart and installed Dart extension. This is what I did. open the extension: click the gear icon, choose "extention settings", type "wrap", you will see

change it, done!

Upvotes: 2

SurenSaluka

Reputation: 1591

When opening a huge file showing a notification. The notification guides towards disabling the huge file optimizations (i.e., it instructs how to configure "editor.largeFileOptimizations": false). Once that is done, word wrapping works even for huge files.

Upvotes: 0

Tim Skov Jacobsen

Reputation: 3852

This is from the VS Code docs as of May 2020:

Here are the new word wrap options:

editor.wordWrap: "off" - Lines will never wrap.
editor.wordWrap: "on" - Lines will wrap at viewport width.
editor.wordWrap: "wordWrapColumn" - Lines will wrap at the value of editor.wordWrapColumn.
editor.wordWrap: "bounded" - Lines will wrap at the minimum of viewport width and the value of editor.wordWrapColumn.

So for example, if you want to have the lines wrapped at the boundary of the window, you should:

Open settings.json (Hit CTRL+SHIFT+P and type "settings.json")
Put "editor.wordWrap": "bounded" in the json file, like this:
```
{
  ... ,
  "editor.wordWrap": "bounded",
  ... ,
}
```

and then it should work.

Upvotes: 6

Royer Adames

Reputation: 1076

If it's not working in mac, make sure to tell VScode that you are not using a screen reader.

I had word wrap on and restarted VScode, and it gave me a notification window saying that if I'm in a screenreader, yes or no, and to note that word-wrap does not work in screen readers.

Upvotes: 5

Syahidur Rahman

Reputation: 311

Using the Command Palette works for this question, but also for many similar other questions:

Press ctrl+shift+p (macOS command+shift+p)
The keyboard shortcut opens the "Command Palette"
Search for "toggle wrap" or just "wrap"
Set your preferences for "Toggle Word Wrap"

Notes:

Works for version 1.55.2 and up
Default shortcut is alt+z
The "Command Palette" will show you the keyboard shortcut for your option too

Screenshot:

Upvotes: 31

mk23

Reputation: 1403

Click on Settings in VS Code editor
Search for wordwrap
Select "on" for the Editor Word Wrap as shown in screenshot below

Upvotes: 3

Carlos Cuellar

Reputation: 89

Step 1: Access to Dart extension settings

Step 2: Find Dart: Line Length, set it to 132 and then save settings

Step 3: Press Alt + Shit + F and you will see the lines are wrapping as configured.

Upvotes: 3

Adam Erickson

Reputation: 6363

The language-specific example by @Riga is great. For a general setting, I would recommend the following:

"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 90,
"editor.wrappingIndent": "same",

This wraps text if your viewport is smaller than the column limit (90 here) and uses the same indent when wrapping.

Upvotes: 1

Cihan

Reputation: 157

Accessibility support is on by default and it will override your selected wrapper behavior. So disable Accessibility Support first.

Then choose "on" for the Word Wrap option. You don't need to go into settings.json to enable word wrap.

Picture of the accessibility support option

Upvotes: 3

Ricardo stands with Ukraine

Reputation: 4822

Explained here Language-specific editor settings but specifically:

Ctrl+Shift+P and type "Preferences: Configure Language Specific Settings"
Select the language or add section in the file (start typing "[" to see list of suggestions) or edit section as you like if already there.
If set it to bounded you might need to adjust the editor.wordWrapColumn value to wrap depending on the screen size. With bounded Lines will wrap at the minimum of viewport and editor.wordWrapColumn

Example:


    "editor.wordWrapColumn": 200,
    "[markdown]": {
        "editor.wordWrap": "on",
    },
    "[plaintext]": {
        "editor.wordWrap": "bounded",
    },
    "[typescript]": {
        "editor.tabSize": 2,
        "editor.wordWrap": "off",
    },

Upvotes: 10

حمزہ صابر

Reputation: 391

Here you go with word-wrap on Visual Studio Code.

Upvotes: 29

rmb_dev

Reputation: 31

In version 1.52 and above go to File > Preferences > Settings > Text Editor > Diff Editor and change Word Wrap parameter as you wish

Upvotes: 1

Adam Smaka

Reputation: 6403

For Dart check "Line length" property in Settings.

Upvotes: 4

Pixelomo

Reputation: 6737

wrappingColumn has been deprecated in favour of wordWrap.

Add this line to settings.json to set wordWrap on by default:

"editor.wordWrap": "on"

or open user settings:

Mac: ⌘ + ,

Windows: Ctrl + ,

Then search for "wordWrap" or scroll through the 'Commonly Used' settings to find it and select 'on'

Upvotes: 85

Abhishek

Reputation: 682

If you want a permanent solution for wordwrapping lines, go to menu File → Preference → Settings and change editor.wordWrap: "on". This will apply always.

However, we usually keep changing our preference to check code. So, I use the Alt + Z key to wrap written code of a file or you can go to menu View → Toggle Word Wrap. This applies whenever you want not always. And again Alt + Z to undo wordwrap (will show the full line in one line).

Upvotes: 1

Avinash Dewangan

Reputation: 331

If you want to use text word wrap in your Visual Studio Code editor, you have to press button Alt + Z for text word wrap. Its word wrap is toggled between text wrap or unwrap.

Upvotes: 27

Soner from The Ottoman Empire

Reputation: 20921

Go to the Preferences tab (menu File → Settings), and then search as “word wrap”. The following animated image is helpful too.

Upvotes: 28

Bahman.A

Reputation: 1296

Windows: Ctrl + Shift + press the key "P". Now on the command line, type Toggle Word Wrap and press Enter.
Mac: Command + Shift + press the key "P". Now in the command line, type Toggle Word Wrap and press Enter.

Upvotes: 4

robstarbuck

Reputation: 8111

Since 1.9, it's possible to select a specific language for word wrap settings (or any settings). You can find this in the command palette under:

Preferences: Configure Language Specific Settings...

Which will take you to your "settings.json" for a selected language where you might include:

"[markdown]": {
  "editor.wordWrapColumn": 100,
  "editor.wordWrap": "wordWrapColumn"
},

Upvotes: 27

Nish

Reputation: 738

Check out this screenshot (Toogle Word Wrap):

Upvotes: 36

Haroen Viaene

Reputation: 1360

Since version 0.3.0, wrapping has been put in the command palette. You can activate it with Toggle Word Wrap or Alt + Z.

Upvotes: 39

Hoss

Reputation: 952

I am not sure when it was added, but I'm using v0.10.8 and Alt + Z is the keyboard shortcut for turning word wrap on and off. This satisfies the requirement of "able to turn it on and off quickly".

The setting does not persist after closing Visual Studio Code. To persist, you need to set it through Radha's answer of using the settings.json file...

// Place your settings in this file to overwrite the default settings
{ "editor.wrappingColumn": 0 }

Upvotes: 13

Benjamin Pasero

Reputation: 124164

Since v1.0 you can toggle word wrap:

with the new command editor.action.toggleWordWrap, or
from the View menu (*View** → Toggle Word Wrap), or
using the ALT+Z keyboard shortcut (for Mac: ⌥+Z).

It can also be controlled with the following settings:

editor.wordWrap
editor.wordWrapColumn
editor.wrappingIndent

Known issues:

renderLineHighlight should highlight the entire logical line

If you'd like these bugs fixed, please vote for them.

Upvotes: 1452

Daniel Danielecki

Reputation: 10580

Mac: Code -> Preferences -> Settings -> Type wordwrap in Search settings -> Change Editor: Word Wrap from off to on.
Windows: File -> Preferences -> Settings -> Type wordwrap in Search settings -> Change Editor: Word Wrap from off to on.

Upvotes: 2

digish a d

Reputation: 451

Word wrap settings redesign

Here are the new word wrap options:

editor.wordWrap: "off" - Lines will never wrap.
editor.wordWrap: "on" - Lines will wrap at viewport width.
editor.wordWrap: "wordWrapColumn" - Lines will wrap at the value of editor.wordWrapColumn.
editor.wordWrap: "bounded"

Lines will wrap at the minimum of viewport width and the value of editor.wordWrapColumn.

Upvotes: 10

How can I switch word wrap on and off in Visual Studio Code?

Answers (27)

Related Questions