How to Enable Word Wrap in Visual Studio Code

Visual Studio Code (VS Code) handles long lines of text through its word wrap feature, which visually wraps code to fit the screen without altering the actual file structure. This article explains how word wrap functions in VS Code, how to toggle it instantly using keyboard shortcuts, and how to customize its behavior through the editor’s settings.

Understanding Word Wrap in VS Code

By default, VS Code displays code in a single, continuous line unless you scroll horizontally. When word wrap is enabled, the editor performs a “soft wrap.” This means long lines of code are visually wrapped to the next line so they fit within the visible area of the editor window, but no actual newline characters (\n) are inserted into the file. Your code remains structurally identical, which is crucial for maintaining proper syntax and clean version control diffs.

The Quick Keyboard Shortcut

The fastest way to turn word wrap on or off is by using a keyboard shortcut. This toggle applies immediately to the currently active file editor:

• Windows / Linux: Press Alt + Z
• macOS: Press Option + Z

You can also toggle this feature via the View menu. Click on View in the top menu bar and select Word Wrap (or Toggle Word Wrap).

Configuring Permanent Word Wrap Settings

If you want to configure word wrap permanently or customize how it behaves, you can do so in the VS Code Settings menu.

To open Settings, use the shortcut Ctrl + , (Windows/Linux) or Cmd + , (macOS), and search for “Word Wrap”. Alternatively, you can open your settings.json file and configure the editor.wordWrap setting.

VS Code offers four options for controlling how text wraps:

1. off (Default): Lines will never wrap. You must scroll horizontally to read long lines.
2. on: Lines will wrap automatically at the edge of the editor viewport.
3. wordWrapColumn: Lines will wrap at a specific column limit. You define this limit using the editor.wordWrapColumn setting (the default is 80 characters).
4. bounded: Lines will wrap at either the viewport width or the configured word wrap column, whichever is smaller.

Here is an example of how these configurations look in the settings.json file:

{
  "editor.wordWrap": "on",
  "editor.wordWrapColumn": 80
}

Customizing Wrapping Indents

When code wraps, you can control how the wrapped portion of the line is indented. This is managed by the editor.wrappingIndent setting. You can choose from the following options:

• none: The wrapped line starts at column 1 with no indentation.
• same: The wrapped line starts with the exact same indentation as the original line.
• indent (Default): The wrapped line is indented one level deeper than the original line.
• deepIndent: The wrapped line is indented two levels deeper than the original line.

By adjusting these settings, you can optimize your workspace readability, making it easier to read long lines of code, markdown files, or log outputs without tedious horizontal scrolling.