CODEWITHSUNDEEP
visual-studio-code
Brian Schlenker
Brian Schlenker

Reputation: 5426

Automatically hard wrap lines at column in VSCode

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.

Upvotes: 295

Views: 246371

Answers (12)

Adrian Cubillos
Adrian Cubillos

Reputation: 23

In the current version of Visual Studio Code (1.95.3) you can:

Open Visual Studio Code Settings by one of these methods:

  1. Select File > Preferences > Settings.
  2. Use the keyboard shortcut 'Ctrl+'
  3. Open the Command Palette '(Ctrl+Shift+P)' and select Preferences: Open Settings

Search for: word wrap

Select 'on' from the drop down on the option 'Editor:Word Wrap' and add the desired number of columns on the option 'Editor:Word Wrap Column' e.g: '120'

And Done!

Alternatively you can change the values directly in the settings by adding these entries in your settings.json:

"editor.wordWrap": "on",
"editor.wordWrapColumn": 120,

Note: to find settings.json open VS Code settings using any of the three methods explained above, then locate on the top right corner an icon that allows you to switch between Setting (UI) and Setting (JSON) views.

Upvotes: 0

ACV
ACV

Reputation: 10562

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.

Upvotes: 22

oli_obk
oli_obk

Reputation: 31163

VSCode doesn't support this out of the box.

Rewrap extension

https://stkb.github.io/Rewrap/

Previously called Auto wrap.

It allows you to rewrap the block that your cursor is currently in by pressing Alt + Q.

Rewrap also supports automatic wrapping (off by default).

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

It supposedly works for various languages including JavaScript, Python, Markdown, latex, etc., and applies the rewrapping in a way that makes sense for the given context.

Upvotes: 363

zardosht
zardosht

Reputation: 3571

You can also use Regex with find and replace:

Select the block you want to wrap. Press Ctrl+f for search dialog. Select regex for seach. Select search in selection. For search enter something like (.{0,95}\s). This will try to wrap the columns up to 95 and does not berak the words. Pay attention to the () for group. We need it for the replace.

In the replace box now enter $1\n. This will add a newline at the matched section of the selected text.

enter image description here

Upvotes: 1

John Henckel
John Henckel

Reputation: 11347

You can do this without any extension. You just use two regex search-and-replace.

  1. Isolate the lines you want to rewrap by moving them to a separate file.

  2. Join all the lines into one line. For example, ctrl+h, "\n" ==> " ". Note: make sure regex is enabled (the dot star icon)

  3. Split the line into multiple lines. For example, ctrl+h, "(.{100}) " ==> "$1\n". Notice the space after the paren.

  4. Copy the lines back to the original file.

There are many variations on this technique. For example, you could using comma instead of space "(.{100})," ==> "$1,\n". You could use Find in Selection alt+L instead of using a temp file.

Upvotes: 3

Dawn Drescher
Dawn Drescher

Reputation: 957

Most of these didn’t work for me, but I found the extension Vsctoix, which does.

We start out with line breaks at column 80:

Mechanisms such as a “windfall clause” help distribute riches within particular 
futures. But for a windfall clause to be useful, many conjunctive assumptions 
have to be true. We present a new method to borrow against potential future 
windfalls today, when they have greater marginal use. The method also increases 
the probability and thus the expected value of the windfalls.

Then we execute “IX: Join Lines” (no parameter):

Mechanisms such as a “windfall clause” help distribute riches within particular futures. But for a windfall clause to be useful, many conjunctive assumptions have to be true. We present a new method to borrow against potential future windfalls today, when they have greater marginal use. The method also increases the probability and thus the expected value of the windfalls.

And then “IX: Break Line At” with parameter 100:

Mechanisms such as a “windfall clause” help distribute riches within particular futures. But for a 
windfall clause to be useful, many conjunctive assumptions have to be true. We present a new method 
to borrow against potential future windfalls today, when they have greater marginal use. The method 
also increases the probability and thus the expected value of the windfalls.

It would be neat if it respected paragraph breaks and did both steps at once, but so far it’s the only extension that works for me – except I haven’t tried the vim emulation yet.

Upvotes: 1

Nalaka Rajamanthri
Nalaka Rajamanthri

Reputation: 162

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)

Upvotes: -1

Mixed Pebble
Mixed Pebble

Reputation: 103

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

Upvotes: 0

mLstudent33
mLstudent33

Reputation: 1175

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.

Upvotes: 1

jabacchetta
jabacchetta

Reputation: 50018

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.

Upvotes: 15

Mark Carpenter Jr
Mark Carpenter Jr

Reputation: 842

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

Upvotes: 6

Wanda Ichsanul Isra
Wanda Ichsanul Isra

Reputation: 2272

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'

Upvotes: 104

Related Questions