So, I'm using VS Code with an extension called Prettier. The problem is that after I hit save my code is being "refined" but also separated into 2 lines even despite the fact it's a very short line and I still have plenty of space on the right. Could you please advice what setting is responsible for this conversion? It seems to me that I have checked all available options but unfortunately couldn't find anything which causes it.
"prettier.printWidth": "80"
in your settings.json or search for print width setting in the UI
Increase or decrease this setting. This limits the number of characters prettier limits a line to, it it exceeds this, it will try to break it into smaller ones.
Search for settings.json in visual studio.
You will find a json file in this path AppData\Roaming\Code\User\settings.json if it is a windows machine.
Add the below JSON in the file, If you keep "editor.formatOnSave" as false formatting won't happen when you save the file.
If you want to have this setting just make a specific property as false just the way I did for javascript and HTML in the below section.
"editor.formatOnSave": false,
"[handlebars]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": false
},
"[html]": {
"editor.formatOnSave": false
},
"[less]": {
"editor.formatOnSave": true
},
Related
VSCode started to format my code in the wrong way.
E.g. I set it to use single quotes but VSCode changes it to double quotes on save.
I’ve disabled all extensions which could format code except for Prettier, checked all Prettier settings for User and Workflow (they are the same for now), and set Prettier as a default formatter for all types of files which I am working with.
But still, a code is formatted in the wrong way.
What else do I need to check to find what exactly format my files on save? How to fix this problem?
settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"prettier.arrowParens": "avoid",
"prettier.jsxSingleQuote": true
}
I have set my tabs to spaces and set the tab-width to 2 of them. When I explicitly ask vscode to reformat my code (javascript) it does exactly what I expect. When I create a new line in my code, it auto-indents to 2-spaces too.
However, when I save (manually or automatically) the code is reformatted with 4-spaces!!!
It doesn't do this with yaml.
I believe I'm using prettier (because it says so in the status bar) a little distance from where it says Spaces: 2. In my settings.json it has this: "editor.tabSize": 2. I've also got this pretty little thing:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Which I think means that it's using prettier. It has the same formatter logged for yaml (and, in fact, almost everything else).
Can somebody tell me how to stop this annoying behaviour without having to lose the benefits of autosave?
Please see, if .editorconfig exists in your project.
If this is a case, edit the file (see https://editorconfig.org/) or you may discuss it with an author, if it's a shared project. E.g.:
[*.js]
indent_style = space
indent_size = 2
Or switch off .editorconfig support altogether:
"prettier.useEditorConfig": false
Without using .editorconfig, I couldn't repeat your problem (i.e. tabSize configured = 2, reformats to 4).
However the workaround would be:
"editor.formatOnSave": false
or even limit to javascript only:
"[javascript]": { "editor.formatOnSave": false }
That would preserve auto-saving functionality, but skip auto-format.
Sum up on related options:
"editor.tabSize":
"editor.detectIndentation":
"editor.formatOnSave":
"prettier.tabWidth":
"prettier.useEditorConfig":
"prettier.useTabs":
Just disable indentation detection like this
"editor.detectIndentation": false.
also use
"editor.formatOnSave": true
and
"prettier.tabWidth": 2,
I have installed prettier extension for VS Code, set it as default formatter, also set format on save to true in VS Code's settings file, and files are set to be saved automatically after some time delay.
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"files.autoSave": "afterDelay"
But prettier is not formatting my code when file is saved automatically after 2 seconds delay. Code is only formatted if i:
manually format the code using option + Shift + F keyboard shortcut.
press command + S
Here's my .prettierrc file
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
How can i make prettier format my code automatically on file save?
After some searching, i found out that the following setting
"editor.formatOnSave": true
only works if:
Code formatter is available.
The files are NOT set to be saved after a delay.
And the editor must not be shutting down.
I had set the prettier as the default formatter using the following setting:
"editor.defaultFormatter": "esbenp.prettier-vscode"
But I had set files to be saved automatically after a delay as specified in the following setting:
"files.autoSave": "afterDelay"
This setting was the cause of the problem in my case.
"files.autoSave" setting can have one of the following values:
"off": A dirty editor is never automatically saved.
"afterDelay": A dirty editor is automatically saved after the configured files.autoSaveDelay.
"onFocusChange": A dirty editor is automatically saved when the editor loses focus.
"onWindowChange": A dirty editor is automatically saved when the window loses focus.
Setting "files.autoSave" to any possible value other than "afterDelay" will fix the issue. I solved this issue by setting "files.autoSave" to "onFocusChange".
I'm trying to make some statements visually line-up on the equal signs (per company style), which requires me putting extra spaces inside the line.
However, when I press save, VS Code deletes the spaces: even though I have all extensions off, and have it set to show all whitespace.
clip of problem, jump is on save
Any clue what might be causing this? I've tried restarting, toggling all the whitespace settings, disabling all extensions; no luck.
ctrl+comma
add line:
"editor.formatOnSave": false
You can also exclude some file types from format on save if you don't want to turn format on save off:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
}
Visual Studio Code Version 1.10 adds the ability to specify languages settings on a per language basis (*1). You put something like this in your settings.json file:
"[javascript]": {
"editor.fontSize": 100,
}
I'd like to do something more specific. I'd like to apply different rules to files that match *.min.js.
How would I do that?
I've actually got something that works, but it's a bit hacky, so I thought I'd ask.
*1) In case you want to know which ones: Use autocomplete after typing in "[]":, or see languageIds array in this file.
I'm aware beautify skips formatting min files by default. But just using "editor.formatOnSave": true, this doesn't seem to happen. Also, other non-formatting stuff like wordwrap is nice.
Here's my current solution:
"files.associations": {
"*.min.js": "javascriptreact"
},
// Hijack javascriptreact to create custom settings for min.js files
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.wordWrap": "on"
}
I'm using the fact that vscode happens to have a second type of javascript, one that isn't used my my project. Not ideal, but it seems to work.