When I write a long paragraph it looks normal. But after saving (formatting) it looks weird.
FYI word-wrapping and format on save was on.
This is before formatting
This is after formatting
Please help.
VS code wraps long lines if they exceed a certain length if "format on save" is on. To disable it, set the maximum length to 0.
Press Ctrl+Shift+P to bring up the command palette and run the Preferences: Open JSON Settings command. Add the following line:
"html.format.wrapLineLength": 0
Okey, It's the window width. If I maximize vscode the promlem is gone.
Related
The VS Code in my Mac pc is automatically breaking the customer HTML tags in new lines. This is making the length of the whole code much bigger.
For example, I want below code in one line
<FormInput name="propertyTax" width="43%" height="7%" placeholder="3,200"></FormInput>
But the VS code is showing as below.
<FormInput
name="propertyTax"
width="43%"
height="7%"
placeholder="3,200">
</FormInput>
I tried change wordwrap from settings with no luck.
Please help me.
Just press F1, and type: join lines
You can try switching off any formatters that you have in VSCOde. Go to Code > Preferences > Settings and search for "Format" and try switching off "Format on Save" and any other format option that you have.
If you're using Prettier formatter. Go to Settings and search for this: prettier.printWidth and change from default 80 to 300.
Im not using any plugins for breaking my code, i think it's an integrated function. This problem is now since a few weeks and it's driving me crazy pasting code and then putting every line back.
Here is a screenshot of my code (i just copied this line):
https://imgur.com/YOdfM2u
Here is a screenshot of my code (i pasted it):
https://imgur.com/1AfzNIH
Why is my vscode breaking the lines everytime?
Thanks in advance for your help, i really apreciate it
This is the default formatter wrapping text (or trying to) at the default of 80 columns.
If you want to override this, you can do so by adding this line to your settings.json file:
"html.format.wrapLineLength": 0
If you prefer to change your settings from the GUI instead of the json file, open the command palette and open the settings from there. Once in it, look for "HTML format wrap line length" in the search box and change the value to 0.
You find a shortcut to the settings here too:
I just started using VSCODE and faced with an annoyance every time I paste in YAML code in an existing YML file.
Basically the editor seems to auto format the document and in doing so messes up the significant spaces in the document. This causes builds in Azure Devops to break.
Although VS code formats the document nicely into collapsible regions, the formatting annoyance makes it hard to use.
Any help would be appreciated.
BEFORE:
AFTER:
I fixed this by changing editor.autoIndent settings for yaml and dockercompose language
"[yaml]": {
"editor.autoIndent": "advanced"
},
"[dockercompose]": {
"editor.autoIndent": "advanced"
}
In VsCode, press ctrl+shift+p (cmd+shift+p in Mac), and search for Preferences: Open User Settings (JSON). There I added this line:
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
},
I picked it because it contains the word yaml, so I figured it must be yaml specific.
Anyhow, it seems to do a pretty good job for me.
Turn off the setting format on paste. This is a global setting, but plugins sometimes have their own, so if you're running a formatter like prettier, you'll need to see whether this is even an option with that plugin.
Looks like the problem is in the first line. Maybe when you copy the code, you're not copying the indentation on the first line.
One trick I use, is copying from the end of the preceding line, so the copied code starts with a newline, and then the paste is perfect.
Or just add the indentation on that first line, after pasting.
I have applied the below settings in VS Code to get 4 spaces indentation.
But always when I open a new file, it switches back to 2 in the right-bottom corner.
If I click in the right-bottom corner and change the setting back to 4,
VSCode will still change back to 2 and still apply it with the 2-space auto-indent.
Alt+Shift+F
What am I missing?
Bit of an late answer. But just got the same issue solved...
Multiple things are able to control this. It also has taken me quite a bit of experimentation to get it corrected. For me point 3 below was the final trick to make it work. Before that, I noticed the editor loading with 4, but jumping back to 2 spaces. Now it stays at 4.
Some things to check:
1: VS Code configuration (Settings & Workspace, you can set these for system wide configuration or just for the current Workspace):
Check whether you have set:
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false
And language specific settings (optional):
"[javascript]": {
"editor.tabSize": 4
},
"[typescript]": {
"editor.tabSize": 4
}
2: Are there any Extensions that could influence the indentation -> people have reported JS-CSS-HTML to also configure the setting.
3: Is there a .editorconfig file in your workspace? If so, check the settings over there. Angular creates one for example and configures the indent_size:
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
Most answers focussed point 1 which, but for me the last step was important to make VS Code work properly.
This Stack Overflow handles all of the above in different answers:
Visual Studio Code: format is not using indent settings
I fixed it in the VisualStudio settings (1.31)
Go to: settings > workspace settings > Text editor
uncheck 'Detect Indentation' to stick to your default setting.
In many cases, it is Prettier that causes this. In fact, it just ignores all settings listed in #Oskar's answer.
So it needs to be overridden explicitly:
"prettier.tabWidth": 4,
"prettier.useTabs": true
And then just go to your file and hit Ctrlk,Ctrld, and the correct indentation should be applied.
See also Prettier is not indenting as specified.
Slightly different from previous answers. I had one file with the wrong indentation for its type and I wanted to correct only that file.
(If you must know: this Python script started out as text file with some queries in it. I got it from psql's -E \d echo look at the postgres schemas).
Anyway, this file was now a Python .py file, with a 2 spaces indentation. Not something that should be fixed by modifying general vscode settings.
What I did:
click on the bottom status bar spot that says 2 Spaces
choose Convert Indentation to Tabs on the dialog popup. Now it says Tab size 2
click on the status bar again where it says Tab size 2
choose Convert Indentation to Spaces. Now the dialog changes to propose indent size: 2 is selected. Pick 4 instead or any size you want.
Done
Basically there are different ways through this dialog, but if you get into tab mode and then switch back to space-based indentation, it will allow you to pick the number of spaces you want to use.
Be careful; this extension EditorConfig for VS Code interferes with vscode tab and indentation settings. Its installed by default but it is a nightmare. Disable it will solve all your problems.
Another problem I discovered with Python is that VS Code uses autopep8. No matter which setting I tweaked, VS Code seemed to ignore the 2 spaces setting. If you want 2 spaces instead of 4 - the fix is to add this to your settings.json.
"python.formatting.autopep8Args": [
"--indent-size=2",
"--ignore E121"
]
Btw you can see your autopep8 arguments by opening the command palette (⌘-shift-p on mac) and entering >Python: Show Language Server Output then switching to view the "Python" log.
This seems to be a common issue. See: VS Code Python autopep8 does not honor 2 spaces hanging indentation
VS Code is stacking element attributes when I format HTML files. Is there any way to disable this?
The default setting for this is:
"html.format.wrapAttributes": "auto"
With "auto" meaning:
Wrap attributes only when line length is exceeded.
The line length is defined in a different setting and defaults to 120:
// Maximum amount of characters per line (0 = disable).
"html.format.wrapLineLength": 120
So setting "html.format.wrapLineLength" to 0 should give you the desired behavior.
This worked for me.
In your "Settings.json" file add the line
"prettier.printWidth": 300
How to debug this issue:
Click on HTML
Notice the force option, but also take a look a Wrap Line Length.
Test there to achieve desired results, but...
Test the HTML Formatting First
Open document to edit and right click to format.
Choose the HTML Formatter
Now go back and test each of your other formatters, such as Prettier and TidyHTML etc.
What seemed to work for me was changing the default 120 wrap line length to another value. I tried 0 and still had same problem, but for some odd reason a value of 20 worked. I don't understand why, it just worked.