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.
Related
In the VS code editor, the default setting is to replace tabs by spaces, which is what I want. However, this is disastrous in a make file. I have written a make file (named Makefile) but VS code insists on changing tabs to spaces so I get a "Missing Separator" error when I run make.
If I go to File > Preferences > Settings and type #id:editor.insertSpaces in the menu, I see this:
When I click on Modified elsewhere I see this:
The second screenshot seems to says that the editor won't insert spaces in a Makefile, but it certainly is. What am I doing wrong, or what have I failed to do?
Try modifing settings.json
VScode Settings
There are 3 levels (by higher priority)
Worspace Settings JSON
User Settings JSON
Default Settings JSON
This should fix most inconveniences:
"[markdown]": {
"files.trimTrailingWhitespace": false,
"editor.insertSpaces": false
},
What worked for me was adding the following to settings.json:
"[makefile]": {
"editor.insertSpaces": false
},
I want to change tabs to whitespaces when I save the file.
I thought there would an option in the settings or at least an extension, but I was not able to see it.
I have seen many other posts for removing trim.trailingWhitespace, but that is not what I am looking for.
I am also using the conversion from tabs to whitespaces when pressing the Tab key. But that is, again, not my issue.
What I am looking for is to save the file and automatically change all the tabs to whitespaces, like Qt Creator does.
It is going to depend on the language. You need to install/setup a language-specific formatter and then enable the "editor.formatOnSave" setting, which will literally apply the formatter rules when saving files.
This answer is for Python and JavaScript because that's what I normally use.
For JavaScript, I use the Prettier extension.
(It has plugins for other languages but I've mainly used it for JS.)
Then add these to your settings.json:
// Set the default setting
"editor.formatOnSave": false,
// Then toggle depending on the language
"[javascript]": {
"editor.formatOnSave": true
},
By default, Prettier already provides some default formatting rules. But you can specify your own configuration file to specify your own (or a project-specific) set of formatting rules.
.
├── ...
├── .prettierrc.js
├── test.js
...
└── <<other files>>
In .prettierrc.js:
// prettier.config.js or .prettierrc.js
module.exports = {
useTabs: false,
tabWidth: 4
};
That Prettier config specifies not to use tabs and use an indentation level of 4 spaces. Now, with that setup, when you save a file, it will automatically change tabs to whitespaces (which is what I understand is what you want). There are also other formatting options.
You'll know the extension is working because it shows "Prettier" in the status bar:
For Python, VS Code currently supports 3 formatting providers):
"autopep8"
"yapf"
"black".
I use "autopep8".
Install autopep8 on your environment. Then in VS Code, make sure to select the environment that has autopep8. Then add this to your settings.json:
// Set the default setting
"editor.formatOnSave": false,
"[python]": {
"editor.formatOnSave": true
},
"python.formatting.provider": "autopep8",
"python.formatting.autopep8Args": [
// "--ignore=W191, E101, E111" // Uncomment to disable fixing indentation
],
Here, autopep8 formats code to follow the PEP8 style guide, which already recommends spaces over tabs. So all that needs to be done is enable it.
You might also be interested in VS Code settings related to spaces (so that tabs will not be put into the file in the first place):
"editor.detectIndentation": false,
"editor.insertSpaces": true,
"editor.tabSize": 4,
Whenever I face an indentation problem, I go online and google "beautify python code" and the 2nd or 3rd link of tutorials-point helps me out( link ).
Just put in your code and it will (in most cases) completely fix it for you or guide you theough the errors in a better way than an interpreter.
I installed prettier extension for vscode and configured tab width as 4 spaces but it still indents new lines with 2 spaces. Anything I am doing wrong?
Here is the gif showing when I format the file:
EDIT:
Contents of .prettierrc file:
{
"trailingComma": "none",
"overrides": [
{
"files": "**/lwc/**/*.html",
"options": { "parser": "lwc" }
},
{
"files": "*.{cmp,page,component}",
"options": { "parser": "html" }
}
]
}
First, remove any .prettierrc from the working directory. Because it overrides user settings and uses the default values.
Second, set Prettier: Tab Width to 4.
Third, Unchecked Prettier: Use Tabs
And if you have to use .prettierrc file then specify all the options.
{
"singleQuote": true,
"printWidth": 80,
"editor.formatOnSave": true,
"proseWrap": "always",
"tabWidth": 4,
"requireConfig": false,
"useTabs": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"semi": true
}
I think it was because, tabWidth:4 was specified in user's settings, while in workspace setting nothing was specified, so it uses default value for workspace i.e. tabWidth:2
as mentioned in comments also adding tabWidth:2 in .prettier.js would fix it!
Check out about tabWidth option in documentation
Disable "use Tabs" option. Hopefully it will start working properly.
Non of these possibilities solved my VS Code case with Prettier.
But the Prettier website show me how to do it!
This section (https://prettier.io/docs/en/options.html#tab-width) sent me to .editorconfig website (https://editorconfig.org/):
I found this .editorconfig file at root folder of my project, and it had two specific configs that I changed.
Before
indent_style = space
indent_size = 2
After
indent_style = tab
indent_size = 4
And finally it worked out!
It took me 3 hours to finally figure it out.
Make sure that the spaces/tab at the bottom is set to 4.
Tab size in settings is set to 4.
Prettier: Use Tabs is checked. (at least it worked for me)
Also try checking/unchecking Editor: detect indentation.
Editor: Detect Indentation
Prettier use tabs & tab size
How I fixed it myself:
I found an extension that I was not aware of (maybe pack installed): Editor config.
I figured out it messed up my setting for tab and other stuff, so I deleted it.
Uncheck 'Use User Setting' in prettier.
Check all tab config, prettier config.
That's the user level setting.
However some project make have project level setting which overwrites the user level, in file .prettierrc
{
******
"tabWidth": 5
}
For me, I had a file named prettier.config.js in my root directory. I added tabWidth to it and it fixed the problem. Below are the contents of this file:
// prettier.config.js
module.exports = {
plugins: [require("prettier-plugin-tailwindcss")],
tabWidth: 4,
};
This file basically overrides the default configuration.
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
I'm using visual studio code for programming cobol. However i would like to be able to set different tab sizes for the first and second tabs and then change the size to 3 spaces after that. However i don't know how i can set it like that. This is how i would like it set.
first tab = 7 spaces.
2nd tab = 1 space.
3th tab = 4 spaces.
4th and ongoing = 3 spaces.
I found how to set it to 3 spaces for all my tabs.
These are my current self set settings.
{
"editor.tabSize": 3,
"editor.detectIndentation": false,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true
}
You can manually set your indentation on open files using the toolbar at the bottom right (see image below) however this will not persist to whenever you change your tabs order, this is file specific.
From there on VSC has a "editor.detectIndentation" settings variable default to true that will help you keep your indentation working.
You can even set default tab sizes per file-type by adding something like this to your settings:
{
"[sass]": {
"editor.tabSize": 2
},
"[html]": {
"editor.tabSize": 4
},
"[javascript]": {
"editor.tabSize": 2
}
}
However, for you request I'm afraid the answer is no, you can't do this on a way that will persist based on the order of your tabs only.