VS Code Word Wrap Not Working

Introduction

Word wrap in VS Code ensures long lines of code display within the visible editor width, preventing horizontal scrolling. When it stops working, you're forced to scroll horizontally to read content, which is frustrating and reduces productivity. Let me show you how to fix word wrap issues.

Symptoms

• Long lines extend beyond the editor width
• Horizontal scrollbar appears unnecessarily
• Lines wrap at wrong column
• Word wrap works in some files but not others
• Word wrap setting keeps resetting

Quick Toggle

The fastest way to toggle word wrap:

Keyboard Shortcut: Press Alt+Z (Windows/Linux) or Option+Z (Mac)

Command Palette: Press Ctrl+Shift+P and run:

View: Toggle Word Wrap

Step-by-Step Fixes

Step 1: Enable Word Wrap Globally

The most basic fix is ensuring word wrap is enabled:

// settings.json
"editor.wordWrap": "on"

Options for editor.wordWrap: - "off": No wrapping (default) - "on": Wrap at viewport width - "wordWrapColumn": Wrap at wordWrapColumn value - "bounded": Wrap at viewport width OR wordWrapColumn, whichever is smaller

Step 2: Set Wrap Column

If you want to wrap at a specific column:

// settings.json
"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 80

Or use bounded to respect both viewport and column:

// settings.json
"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 100

Step 3: Check for Language Overrides

Word wrap may be disabled for specific languages:

// settings.json - Check these overrides
"[markdown]": {
    "editor.wordWrap": "on"
},
"[plaintext]": {
    "editor.wordWrap": "on"
},
"[javascript]": {
    "editor.wordWrap": "on"
}

Some extensions set language-specific defaults that override your global settings.

Step 4: Fix Workspace Settings Override

Workspace settings override user settings:

1. 1.Check .vscode/settings.json in your project
2. 2.Look for "editor.wordWrap": "off"
3. 3.Remove or change the setting

// .vscode/settings.json
{
    "editor.wordWrap": "on"  // Make sure this is not "off"
}

Step 5: Check Editor Layout

The minimap and other UI elements can affect wrapping:

// settings.json
"editor.minimap.enabled": true,
"editor.minimap.maxColumn": 120,
"editor.minimap.side": "right"

If the minimap is too wide, it reduces the editor width and affects where lines wrap.

Step 6: Fix Word Wrap with Rulers

Rulers (vertical lines) should not affect wrapping, but they help visualize:

// settings.json
"editor.rulers": [80, 120],
"editor.wordWrap": "on"

Rulers show where lines would wrap, even with "wordWrap": "on".

Step 7: Handle Diff Editor Wrapping

Word wrap in diff view has separate settings:

// settings.json
"diffEditor.wordWrap": "on"

Options are the same as editor.wordWrap.

Step 8: Check for Prettier/Formatter Conflicts

Formatters like Prettier may reformat code to fit within column limits:

// settings.json
"editor.formatOnSave": true,
"prettier.printWidth": 80,
"editor.wordWrap": "on"

If Prettier is formatting your code, it may appear that word wrap isn't working because Prettier adds line breaks instead.

Step 9: Fix Notebook Cell Wrapping

Notebook editors (like Jupyter) have separate settings:

// settings.json
"notebook.diff.wordWrap": true,
"notebook.editorOptionsCustomizations": {
    "wordWrap": "on"
}

Step 10: Handle Extension Conflicts

Extensions can override word wrap settings:

1. 1.Open Extensions (Ctrl+Shift+X)
2. 2.Search for "wrap" or "format"
3. 3.Disable extensions one by one
4. 4.Check if word wrap starts working

Common extensions that affect wrapping: - Prettier - ESLint (with max-len rule) - EditorConfig

Check EditorConfig:

# .editorconfig
[*]
max_line_length = 80

This can conflict with VS Code settings.

Step 11: Fix Word Wrap in Specific Scenarios

Word wrap in search results:

// settings.json
"search.useReplacePreview": true

Word wrap in output panels:

// settings.json
"output.wordWrap": true

Word wrap in debug console:

// settings.json
"debug.console.wordWrap": true

Word wrap in terminal:

// settings.json
"terminal.integrated.rightClickBehavior": "default"

Terminal wrapping is controlled by the shell, not VS Code settings.

Step 12: Check Accessibility Mode

Accessibility settings can affect word wrap:

// settings.json
"editor.accessibilitySupport": "off"

Options: "on", "off", or "auto"

Advanced Configuration

Wrap indentation

Control how wrapped lines are indented:

// settings.json
"editor.wrappingIndent": "indent"

Options: - "none": No indentation for wrapped lines - "same": Same indentation as parent line - "indent": One level deeper than parent - "deepIndent": Two levels deeper

Wrap Strategy

Control where lines break:

// settings.json
"editor.wordWrapStrategy": "simple"

Options: - "simple": Break at viewport width - "advanced": Break at logical points (after operators, etc.) - "bounded": Respect word boundaries

Verification

Test word wrap with a long line:

// This line should wrap at the editor width or column you specified
const veryLongString = "This is a very long string that should wrap at some point depending on your word wrap settings. If word wrap is working correctly, this line will not require horizontal scrolling to read in its entirety.";

1. 1.Check:
2. 2.No horizontal scrollbar should appear
3. 3.Lines should wrap at the specified column or viewport width
4. 4.Wrapped lines should have appropriate indentation

Common Scenarios

Markdown Files

Markdown often needs word wrap:

// settings.json
"[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": false
}

Configuration Files

JSON/YAML files benefit from word wrap:

// settings.json
"[json]": {
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 120
},
"[yaml]": {
    "editor.wordWrap": "on"
}

Log Files

For viewing logs with long lines:

// settings.json
"[log]": {
    "editor.wordWrap": "on",
    "editor.scrollBeyondLastLine": false
}

Related Issues

• VS Code Minimap Not Showing
• VS Code Auto Save Not Working
• VS Code Format on Save Not Working