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,
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
}
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
},
I am trying to add language based settings for several languages. In order to do so, I modified the file settings.json (see Configure language based settings in VS Code for more information) as follows:
{
"editor.tabSize": 4,
"editor.detectIndentation": false,
"editor.formatOnSave": true,
"vsicons.dontShowNewVersionMessage": false,
"[dart]": {
"editor.tabSize": 2
},
"[typescript]": {
"editor.tabSize": 4
},
"[c]": {
"editor.tabSize": 4
}
}
As you can see, I have the tab size option set to 2 for Dart and to 4 for other languages. The default value for indentation is 4 and "editor.detectIndentation" is disabled. But for some reason the editor doesn't get these settings:
For this reason, IndentRainbow extension does not work properly. On the bar below you can see that VS code still has "4" for tab size.
If I change the global setting for the tab size (editor.tabSize), VS Code just set the new value, e.g., 2 and I have then in all files and for all languages this value for indentation. I also tried to restart VS Code after settings were changed, it didn't help. What can I do to make what I want work properly?
settings.json is saved in C:\Users\MyName\AppData\Roaming\Code\User\
I found out for myself what the problem was. Under the extensions tab, I have the EditorConfig extension. This extension always overrides the user and workspace settings. I simply disabled this extension.
Another possible solution would be to create an .editorconfig file in the folder in which the project is located and to specify there the tab size.
I want to have VSCode indent C files by 2 spaces by default. Is it possible to do this? Thanks.
Adding to #Batman's answer after you amended your question via a comment (since this is too long to put into a comment): look into "configure language-specific settings..." in your command palette. It'll create
"[c]": {}
at the bottom of your settings.json so you can add anything there like:
"[c]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false
}
and that will only affect C files.
File > Preferences > Settings
Below Setting worked for me
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": 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.