Automatically hard wrap lines at column in VSCode

Visual Studio-CodeVscode Settings

Visual Studio-Code Problem Overview


How can I automatically hard wrap lines in VSCode? By that I mean if a line reaches a specified column, automatically insert a newline at the word boundary closest to that column without going over. Vim has a setting called textwidth that does this that I like to use when editing Markdown. It doesn't seem like VSCode does, as far as I can tell. It just has ways to control softwrapping.

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

VSCode doesn't support this out of the box. But you can install the Rewrap extension, which allows you to format the block that your cursor is currently in by pressing Alt + Q.

Rewrap requires no further settings, since it reads VSCode's settings to obtain the column at which to break.

Rewrap also supports automatic wrapping (off by default): https://github.com/stkb/Rewrap/wiki/Auto-wrap

Solution 2 - Visual Studio-Code

Unfortunately, VSCode doesn't have this feature yet. But, we still can make it to be as close as vim automatic word wrapping beautiful feature.


First Step

We need to setup soft word wrap feature in VSCode.

  1. Open VSCode Settings via Code => Preferences => Settings.

  2. Add these 3 lines of editor settings.

    "editor.wordWrap": "wordWrapColumn",
    "editor.wrappingIndent": "same",
    "editor.wordWrapColumn": n
    

    Don't forget to change (n) with your preferred length of columns line. For me, I feel more comfortable to set it to 60.

  3. Save this setting.

The main purpose of this first step is to make us feel more comfortable when we're typing because we don't need to manually type Enter and see a long line of text.


Second Step

We need to install Vim emulation for VSCode and set vim textwidth.

  1. Install Vim emulation via VSCode extensions.

  2. Open VSCode Settings via Code => Preferences => Settings.

  3. Add this line of vim setting.

    "vim.textwidth": n,
    

    Don't forget to change (n) with your preferred length of columns line. For me, I will set this to be the same with (n) in the first step.

  4. Save this setting.


Actual Use

When you finish to write your whole document, you can format it to be hard wrap lines using this way.

  1. Block all text using visual line mode (Shift + v)
  2. Type 'gq'

Solution 3 - Visual Studio-Code

Now VSCode support auto wrapping out of the box.

Settings --> Text Editor --> Last 3 options (as on today) is for autowrapping.

  1. Word Wrap (Controls how lines should wrap)
  2. Word Wrap Column (Controls the wrapping column of the editor)
  3. Wrapping indent (Controls the indentation of wrapped lines)

By default Word Wrap is off.

Solution 4 - Visual Studio-Code

As of 2020 and if you're using the Prettier - Code formatter plugin:

Go to Plugins -> Find Prettier -> Cog -> Extension Settings -> Prettier: Print Width Fit code within this line limit and set to whatever you want. By default it's 80.

When you save the file, Prettier will format automatically.

Solution 5 - Visual Studio-Code

Hard Wrap Comments

Use the Rewrap extension.

Soft Wrap Code

Add the following setting (replace column width with your preference): "editor.wordWrapColumn": 100

Then add either "editor.wordWrap": "wordWrapColumn" (wraps at the column) or "editor.wordWrap": "bounded" (wraps at either the column or the viewport).

Hard Wrap Comments and Soft Wrap Code

Unfortunately the extension and VSCode settings do not play nicely.

Feel free to upvote this feature request.

Solution 6 - Visual Studio-Code

There is currently an Open request for this in the VS Code Issue tracker on GitHub, You Can Find It Here

Solution 7 - Visual Studio-Code

Edit: (below answer might be for a soft wrap, see here for difference between soft and hard wrap: https://stackoverflow.com/a/319932/9481613) In my version it is Preferences -> Settings then scroll down to "Editor: Word Wrap" where a dropdown box is available from which I selected wordWrapColumn. After choosing this and closing, when I click on View now at the bottom it says Word Wrap Alt+Z.

Solution 8 - Visual Studio-Code

If anyone is running having issues, accessibility support/screen reader may need to be disabled. Go to preferences >> text editor >> accessibility support and toggle it off.

enter image description here

Solution 9 - Visual Studio-Code

You can easily set the column limit using ColumnLimit member in C_Cpp.clang_format_fallbackStyle in settings.json (You have to install Microsoft C/C++ extension)

"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: WebKit, IndentWidth: 4, ColumnLimit: 80 }",

Then you can format the file using Shift + Alt + F

There are many options you can change in this format feature

"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: WebKit, UseTab: Never, IndentWidth: 4, TabWidth: 4, BreakBeforeBraces: Attach, AllowShortIfStatementsOnASingleLine: false, IndentCaseLabels: false, ColumnLimit: 80, AccessModifierOffset: -4 }",

> Name of the predefined style used as a fallback in case clang-format > is invoked with style file but the .clang-format file is not found. > Possible values are Visual Studio, LLVM, Google, Chromium, Mozilla, > WebKit, Microsoft, GNU, none, or use {key: value, ...} to set specific > parameters. For example, the Visual Studio style is similar to: { > BasedOnStyle: LLVM, UseTab: Never, IndentWidth: 4, TabWidth: 4, > BreakBeforeBraces: Allman, AllowShortIfStatementsOnASingleLine: false, > IndentCaseLabels: false, ColumnLimit: 0, AccessModifierOffset: -4, > NamespaceIndentation: All, FixNamespaceComments: false }

Before

void Proc::Memory::getSramOff(const char* mem_name, uint dataSize, uint addrBits, uint& noOfBytes, uint& sram_off)

After

void Proc::Memory::getSramOff(const char* mem_name, uint dataSize,
    uint addrBits, uint& noOfBytes, uint& sram_off)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrian SchlenkerView Question on Stackoverflow
Solution 1 - Visual Studio-Codeoli_obkView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeWanda Ichsanul IsraView Answer on Stackoverflow
Solution 3 - Visual Studio-CodeArun Kumar KhattriView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeACVView Answer on Stackoverflow
Solution 5 - Visual Studio-CodejabacchettaView Answer on Stackoverflow
Solution 6 - Visual Studio-CodeMark Carpenter JrView Answer on Stackoverflow
Solution 7 - Visual Studio-CodemLstudent33View Answer on Stackoverflow
Solution 8 - Visual Studio-CodeMixed PebbleView Answer on Stackoverflow
Solution 9 - Visual Studio-CodeNalaka RajamanthriView Answer on Stackoverflow