I'm trying to set different width of row for my VSCode prettier(extension) settings, but without any luck.
Tried different variations with prefixes or without in ~root/.vscode/settings.json:
"max-len": 120,
"printWidth": 120
"editor.max-len": 120,
"editor.printWidth": 120
"prettier.max-len": 120,
"prettier.printWidth": 120
none of it respect rules.
How can I solve it?
Did you consider the file extensions Prettier is actually supporting?
If yes, when you have the file opened, is "Prettier" selected in the status bar on the bottom right?
If yes, open the "Output" tab in VS Code and try to format the file. What do you see as output (you might need to select "Prettier" in the dropdown of the "Output" tab).
Find .editorconfig file in your project. If exists, add max_line_length = 120 to it.
See "Print Width" in Prettier document https://prettier.io/docs/en/options.html for details
You're missing trailing commas on line 2 and 4. Click on the "Prettier" link in the status bar and it will tell what to debug.
Related
Is it possible to show the last folder in the title bar? If you have multiple instances of VS Code open, it is difficult to distinguish between them from the task bar. If both instances are open on say a file called 'main.ts', you will see 'main.ts' in the taskbar item.
Currently, the title would be [filename open] - [folder open] (e.g main.ts - angular2-training. Is it possible to invert them to become [folder open] - [filename open] (e.g angular2-training - main.ts?
Use window.title in user/workspace settings
The documentation is here with the full list of options of what can be shown. It's quite flexible.
In your case, to display angular2-training - main.ts you can use this
{
"window.title": "${rootName}${separator}${activeEditorShort}"
}
Older VS Code versions
The above only works in v1.10 and up. Here's how to do it in older versions:
v1.9, v1.8 - "window.showFullPath": true shows the full path to the current file, so you can at least see the project folder. Note this config is unsupported after v1.10
v1.7 and below - it's not possible
On version 1.13
Go to settings, inside UserSettings add this line to the json blob:
"window.title": "${activeEditorLong}"
On version 1.41.1
based uploaded image:
1,2: Go to Setting
3: Search windows title in search box
4: Type this statement in windows title box:
${dirty}${separator}${rootName}${separator}${activeEditorShort}
If you want to be able to identify which project you are working on by looking at the window title bar, one option is to set "window.title" to a custom value in the workspace settings file at
/.vscode/settings.json
If the file doesn't exist, create it, then add the following to it:
{
"window.title": "<PROJECT NAME> : ${rootName}${separator}${activeEditorShort}"
}
This is a simple solution that works rather well.
Tested in 1.44
The setting which matches the OPs problem... not being able to tell which VS Code editor is which from the taskbar... is:
"window.title": "${folderName} ${separator} ${activeEditorShort}"
I prefer the simpler
"window.title": "${folderName}"
${activeFolderShort} and friends, don't do what I want, as these follow the folder the active file is in. Whereas I want the folder of the whole "project" shown at all times.
Also, when browsing from the taskbar, I don't care what file is active - it is just noise. I care about the project (i.e. folder). On many occasions, every open VS Code will "main.rs" as the active file, so it is pointless to show it!
Editing the settings in json format even includes intellisense now, so you can see all the options without even having to look them up, and they appear as soon you save the settings file. No need to reload. Awesome!
v1.31 of vscode added these options to window.title:
There are three new variables that can be used within the window.title
setting:
${activeFolderShort}: The name of the folder the file is contained in.
${activeFolderMedium}: The path of the folder the file is contained
in, relative to the workspace folder.
${activeFolderLong}: The full
path of the folder the file is contained in.
In addition of the setting:
"window.title": "${rootName}${separator}${activeEditorShort}"
You now can configure the separator as well with VSCode 1.45 (April 2020)
Allow customize the window title separator
A new setting window.titleSeparator allows to change the separator that is used in the window title.
By default a dash is used.
Just some tweaks i found out:
// will not work on workspace settings.json -> only global
"window.titleBarStyle": "custom",
// show only the name of the workspace folder in the title bar
"window.title": "${folderName}",
// remove the useless icons on the top-right
"window.commandCenter": false,
// make left & top green :-)
"workbench.colorCustomizations": {
"activityBar.background": "#1e2127",
"activityBar.foreground": "#95C085",
"titleBar.activeBackground": "#165900",
"titleBar.activeForeground": "#ffffff",
},
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 am using windows and VS Code, I have few files that I do not need to wrap them wherever I press Alt+Shift+F, is there a way to disable auto format wrapping for specific files?
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 if already there.
If wrapping, depending on columns available in your editor you might want to update editor.wordWrapColumn. Lines will wrap at the minimum of viewport and editor.wordWrapColumn
Example:
...
"editor.wordWrapColumn": 200,
"[typescript]": {
"editor.tabSize": 2,
"editor.wordWrap": "off",
},
"[plaintext]": {
"editor.wordWrap": "bounded",
},
...
Looks like VSCode allows for this. You can tweak it as you prefer for each file type.
However note that there have been reports of it not working for markdown files.
I guess it is something still being tweaked.
Looks like this person made an extension that might be useful for you.
https://marketplace.visualstudio.com/items?itemName=Ho-Wan.setting-toggle
Looks like you can setup a few quick easy setting toggles. would at least make it quicker as you're bouncing from file to file.
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.