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.
In WebStorm you can select an element and it's surrounding when you do Alt + Arrow Up.
How can you achieve that in VSCode ?
You can try with VSCode buit in Emmet: Balance (outward) command: Ctrl+Shift+A
If the shortcut does not work, follow these steps:
Press Ctrl+Shift+P to open the Command Palette
Type Emmet
Select Emmet: Balance (outward)
This will select the tag where you have your cursor currently in, and all its contents (I understand that by its surroundings you mean the tag contents and the tag itself).
If the tag has as a content a combination of text and tags and your cursor is in the text, the command will select all the content. A new hit of the command will grow the selection to include the tag itself.
I want to indent a specific section of code in Visual Studio Code.
I read How do you format code in Visual Studio Code? that gives shortcuts to indent the whole code, but it doesn't work when selecting a specific section of code.
I tried Ctrl + Shift + F after selecting some line in my code, but the whole file is indented. I'm on Windows with Visual Studio Code Insider 1.8.0. How can I do it?
I want to indent a specific section of code in Visual Studio Code:
Select the lines you want to indent.
Use Ctrl + ] to indent them.
If you want to format a section (instead of indenting it):
Select the lines you want to format.
Use Ctrl + K, Ctrl + F to format them.
You can also indent a whole section (multi-lines) by selecting it and clicking
TAB
and also indent backward using Shift+TAB
And of course for auto indentation and formatting, following the language you're using, you can see which good extensions do the good job, and which formatters to install or which parameters settings to enable or set. For each language and its available tools. Just make sure to read well the documentation of the extension, to install and set all what it needs. Exemple: prettier is the most common used formatter for JavaScript and typescript. And it's widely used by all projects and code style requirements and setup. And in CI pipelines.
Up to now the indentation problem bothers me with Python when copy pasting a block of code. If that's the case, here is how you solve that: Visual Studio Code indentation for Python
On OS X, choose "Document Format", and select all lines that you need format.
Then Option + Shift + F.
(This works at least up to version 1.74.2, checked in Jan 2023)
On macOS Visual Studio Code version 1.36.1 (2019)
To auto-format the selection, use ⌘K ⌘F (the trick is that this is to be done in sequence, ⌘K first, followed by ⌘F).
To just indent (shift right) without auto-formatting, use ⌘]
As in Keyboard Shortcuts (⌘K ⌘S, or from the menu as shown below)
This should be able to set to whatever keybindings you want for indent/outdent here:
Menu File → Preferences → Keyboard Shortcuts
editor.action.indentLines
editor.action.outdentLines
F1 → open Keyboard Shortcuts → search for 'Indent Line', and change keybinding to Tab.
Right click > "Change when expression" to editorHasSelection && editorTextFocus && !editorReadonly
It will allow you to indent line when something in that line is selected (multiple lines still work).
For German keyboard layout, the standard settings are:
Indent selection: Strg + ´
Outdent selection: Strg + ß
As you've seen there are two ways to indent the code (this for Windows).
Reindenting the entire file
Shift+Alt+F
Reindenting only selected lines
First set the shortcut for Reindent Selected Lines
Menu File → Preferences → Keyboard Shortcuts → In the Search in keybindings type in Reindent Selected Lines → Select it and press Enter → Type in your own shortcut, e.g. Shift + 5, followed by Enter
Now select your code lines in the editor and use the shortcut set above, e.g. Shift + 5, to automatically indent those lines only.
On windows its "Ctrl+[" and "Ctrl+]" for indent and unindent You can find rest of the shortcuts here
For mac, you can find the shortcuts here: https://code.visualstudio.com/docs/getstarted/keybindings
For me on windows it was Ctrl+¡ , indent line. It adds a tab at the beggining of each line.
Many of the answers were not able to solve my problem too.
Just go for fn+tab
Welcome in advance.
On linux ubuntu: select text then ctrl + shift + i
This is the way I had my code before formatting...
Then I used the command like this... (Make sure to select the code part that you need to format)
Shift+ Alt+F
And I got the formatted code like this....
For me, using a mac in 2022 it was CMD + ] to indent multiple lines after selecting the desired indented lines.
Crtl + Alt + F can also formate (windows)
Windows - 2022
Shift+Alt+F
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.
I often change the font size of my editor. So does anyone know a shortcut key for that? Until now I have to use the menu with several clicks: Preferences -> Color and Fonts -> Basic -> Text Font. Would be nice of one can use CTRL + MouseWheel...
I am sure at some point of time you would have wanted to increase/decrease the font using CTRL + + or mouse scroll.
Found one solution, CTRL and +/- keys for increasing and decreasing font.
Download jar from
http://code.google.com/p/tarlog-plugins/downloads/list
Place the jar in plugins directory of eclipse installation
Restart eclipse.
Enjoy
You can get close by binding your-favorite-function-key to the command. Here's how:
Windows > Preferences > General > Keys
Locate the command related to setting the font >> Preferences (General > Appearance > Colors and Fonts)
Click inside the Binding text field
Specify the key-binding you wish to use by pressing the appropriate keys
Accept by pressing OK
Profit!
I'm using Aptana with an English keyboard and casually came into these keys combinations
- [CTRL] + [-] then 1 --> smaller font
- [CTRL] + [SHIFT] + [=] --> bigger font
NOTE:
[-] key is on the main keyboard, not the numeric pad
[SHIFT] + [=] gives + in the English keyboard