Related
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:
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).
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.
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 }
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'
Since version 0.3.0, wrapping has been put in the command palette. You can activate it with Toggle Word Wrap or Alt + Z.
Check out this screenshot (Toogle Word Wrap):
Go to the Preferences tab (menu File → Settings), and then search as “word wrap”. The following animated image is helpful too.
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.
Here you go with word-wrap on Visual Studio Code.
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"
},
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 }
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.
press ctrl+ shift + p
Preferences open keyboard shortcut
search Toggle Wrap word
Set your preferences toggle wrap word
NOTES:
Works for version 1.55.2
Default one is alt+z
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",
},
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.
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.
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.
For Dart check "Line length" property in Settings.
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
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.
Click on Settings in VS Code editor
Search for wordwrap
Select "on" for the Editor Word Wrap as shown in screenshot below
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).
In version 1.52 and above go to File > Preferences > Settings > Text Editor > Diff Editor and change Word Wrap parameter as you wish
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.
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.
What hotkey or command helps to select the whole word under the cursor in VSC?
(Like CTRL or ALT + D in ST3)
To select the word under the cursor in VSCode:
ctrl + d
Note: the definition of a "word" is different when your document edited with VSCode is a markdown one.
That is why VSCode 1.52 (Nov. 2020) proposes:
Markdown inline smart select
Expand and shrink selection in Markdown documents using the following commands:
Expand: kb(editor.action.smartSelect.expand)
Shrink: kb(editor.action.smartSelect.shrink)
Selection applies to italics, bold, inline code blocks, and links.
Another simple way is to double click the mouse left button.
In Visual Studio Code the setting
"files.trimTrailingWhitespace": true
removes trailing white space when files are saved, or Shift + Alt + F is used to format a file, but this breaks Markdown formatting.
How do you selectively turn off white space trimming for Markdown?
Add this line to your settings.json file.
"[markdown]": {
"files.trimTrailingWhitespace": false
}
You can use EditorConfig by adding .editorconfig at the root of your project:
[!markdown]
trim_trailing_whitespace: false
Or as GollyJer suggested, add this code snippet in the settings.json file:
"[markdown]": {
"files.trimTrailingWhitespace": false
}
You can now (VSCode 1.68, May 2022) do this through the Settings GUI instead of directly your settings.json.
Settings editor improvements
The Settings editor now shows a default value override indicator for language-specific settings.
As a note, one can view language-specific settings by adding a language filter in the Settings editor search bar, and one can add such a filter either by typing it out explicitly, or by clicking the filter button on the right of the search bar, and selecting the "Language" option.
When the default value override indicator shows up, it indicates that the default value of the language-specific setting has been overridden by an extension. The indicator also indicates which extension overrode the default value.
(Theme Light Pink)
This example above is for line wrapping, but you can adapt it to reference trim_trailing_whitespace.
Do Ctrl-K s. This will "Save without formatting", which also means, without trimming trailing whitespace in the file you're editing
Solution
Add or update .editorconfig in root of your project and add the 2 following lines to prevent trimming on whitespace in VScode on matching file extension's
Update .editorconfig with following
[*.md]
trim_trailing_whitespace = false
[*.mdx]
trim_trailing_whitespace = false
Is it possible to make VSCode keep indents on empty lines?
Could not find such a setting neither natively nor in "Beautify" extension.
Example of desired behavior:
UPDATE: eventually I've just switched to Prettier - and never had to think about code style again as it's just being formatted automatically for me.
Go to File > Preferences > Settings. On the right side, add the line:
,"editor.trimAutoWhitespace": false
It worked for me perfectly.
Bit of an old question, but I found that a combination of the settings:
"editor.trimAutoWhitespace": false,
"editor.renderWhitespace": "all"
...worked for me.
NOTE: (19/03/2021)
It appears that this issue, registered on GitHub, is still an open case.
As of: 2022-02-01
Here is the solution that worked for me even with VSCODE formatting(linting) on:
There are two native VSCODE settings that format your code automatically:
"editor.formatOnSave": true,
"editor.formatOnType": true,
These settings affect your text editor only if
"editor.defaultFormatter" is not null
Here are the problems
The "editor.trimAutoWhitespace" VSCODE setting solves the problem but only works on the "editor.formatOnType" autoformat, when you save the document this setting is ignored.
You may also want to trimAutoWhitespaces on all cases but the ones where you are leaving an indent on an empty row. (this was my case).
In my case, while coding, I test my code in the terminal chunck by chunck. The problem with, in my case, python is that the end of a for loops and a conditional is defined by indentation. In this case since the terminal run the code line by line, and not in chuncks, with the removal of the indentation, the terminal thinks that the for and if commands are finished before they actually are.
Here is the solution:
Never define an edit.defaultFormatter in your VSCODE settings define it per language.
How do you do that?
Change VSCODE "editor.defaultFormatter" to null as in:
"editor.defaultFormatter": null,
Change the language formatter to your prefered one. In my case:
python.formatting.provider": "black"
VSCODE gives you the possibility of choosing a formatting (linting) provider for any language. These providers' rules are way more detailed than the VSCode native rules. In VS code press CRTL+SHIFT+P and search for "preferences: Configure Language Specific Settings...". Then define your formatting provider for said language.
Every provider (in my case "black") provides the option of ignoring some sort of formatting rule. Set the ignore argument for this provider.
In my case I only ignore 2 rules and my setting is:
"python.formatting.blackArgs": [ "--ignore=E501,W293" ],
Rule E501 = Row with more than 80 character.
Rule W293 = Empty Row containing only WhiteSpaces.
Ignoring W293 allows the Auto Trim White Spaces to keep working for every kind of trailing White Spaces except for the case referred to in W293.
I had the same issue but after removing :
"editor.autoIndent": "none"
I was good to go.
Timestamp:
2021, using VS Code v1.56.2
Use Case:
You use editor.action.trimTrailingWhitespace. Later you wish to write new code in a function. You navigate to a blank line within the function, but discover this line isn't indented and is completely empty. In this scenario, you have four choices:
Hit Tab multiple times until your cursor is at the proper indentation.
Navigate up to a line with proper indentation, press End, then press Enter.
Click your mouse to the right of a properly indented line, then press Enter.
Press Ctrl + ] repeatedly to indent the empty line.[See Footnote 1]
This answer automates this workflow by inserting the indentation for you (when you navigate to an empty line surrounded by indented lines).
Background:
Spent 3 hours trying all of the solutions on this page (and many different extensions). Couldn't find anything else which worked.
Solution via Extension
implicit-indent Extension by jemc:
https://marketplace.visualstudio.com/items?itemName=jemc.vscode-implicit-indent
Automatically indents an empty line when navigated to (if its surrounding lines are indented).
Functionality
From experimenting, here's how implicit-indent seems to work:
Checks and matches either tab or space indentation automatically.
Determines spaces or tabs based on indentation of surrounding text, regardless of editor settings.[See Footnote 2]
Clicking on an empty line automatically indents to match surroundings.
If pressing the up ↑ or down ↓ arrow key navigates the caret (a.k.a. text cursor) to an empty line, implicit-indent will automatically indent the line and place the cursor to the right of the indentation (making it feel the same as if the line were already indented).
-> Before ↑ or ↓ is pressed, it doesn't matter what column the caret is on, this extension will trigger regardless.
Navigating to an empty line matches nested indentation.
Assume you have the following:
Where |n| represents a line
and c represents the caret / text cursor
and only line |2| is empty.
|1| indented line
|2| (empty line)
|3| c indented line
^ assume caret is on line |3|
(caret can be at any column)
Pressing the up ↑ arrow key results in the following:
|1| indented line
|2| c
|3| indented line
^ Line |2| (previously empty)
is automatically indented to
match nested indentation
of line |3|
and the caret is automatically moved
to the end of the inserted whitespace
(as if the line were already indented).
VS Code
As of 2021 May, the following GitHub issues are still unresolved:
https://github.com/microsoft/vscode/issues/49661
https://github.com/microsoft/vscode/issues/54210
https://github.com/OmniSharp/omnisharp-vscode/issues/1980
https://github.com/OmniSharp/omnisharp-vscode/issues/1680
Using implicit-indent is the only workaround I've discovered so far.
I'll amend this answer when automatic indentation is added to VS Code's native settings.
[Footnote 1]
As an alternative to this extension, you can use Tab or the following indent/unindent functionality built-in to VS Code to manually indent an empty line. Slightly out of scope, but it's a good hotkey to know about.
Default built-in hotkeys are:
Hotkey: CTRL + ]
Command: editor.action.indentLines
What it does:
Indent current line (if no selection)
or indent all selected or partially-selected lines.
Hotkey: CTRL + [
Command: editor.action.outdentLines
What it does:
"Outdent" (a.k.a "unindent" a.k.a dedent)
current line (if no selection)
or outdent all selected or partially-selected lines.
[Footnote 2]
Note: regardless of whether you use this extension or not, you can quickly replace your current document's indentation (to either leading tabs or leading spaces) by using the following VS Code commands:
editor.action.indentationToTabs
editor.action.indentationToSpaces
That is probably eslint (and/or beautify) doing that. Look at
"no-trailing-spaces": ["error", { "skipBlankLines": false }],
I have that in my eslintrc.json file and so I get errors on blank lines with spaces or tabs on them. Setting "skipBlankLines" to true might work for you.
Answer edited as for VSC version 1.56.2 and newer.
The command editor.action.insertLineAfter makes a new line and moves the cursor there preserving the indentation.
To bind that command to Enter key, go to your keyboard shortcuts (press ctrl + k ctrl + s) then press the page with the pivot arrow icon on the far right top.
add the following inside keybindings.json to look like so:
// Place your key bindings in this file to override the defaults
[
{
"key": "enter",
"command": "editor.action.insertLineAfter",
"when": "editorTextFocus && !editorReadonly"
},
]
It worked for my without re-opening of VSC
I was having this issue with writing Flutter code.
Only solution for me was to change my default formatter to Flutter.
UPDATE: I also needed to disable Dart: Enable SDK Formatter
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:
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).
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.
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 }
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'
Since version 0.3.0, wrapping has been put in the command palette. You can activate it with Toggle Word Wrap or Alt + Z.
Check out this screenshot (Toogle Word Wrap):
Go to the Preferences tab (menu File → Settings), and then search as “word wrap”. The following animated image is helpful too.
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.
Here you go with word-wrap on Visual Studio Code.
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"
},
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 }
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.
press ctrl+ shift + p
Preferences open keyboard shortcut
search Toggle Wrap word
Set your preferences toggle wrap word
NOTES:
Works for version 1.55.2
Default one is alt+z
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",
},
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.
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.
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.
For Dart check "Line length" property in Settings.
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
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.
Click on Settings in VS Code editor
Search for wordwrap
Select "on" for the Editor Word Wrap as shown in screenshot below
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).
In version 1.52 and above go to File > Preferences > Settings > Text Editor > Diff Editor and change Word Wrap parameter as you wish
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.
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.