Whenever I let vscode autoformat my code, it formats to 2 spaces instead of 4, even though apparently the default is 4 spaces, and I have not touched the settings.json
Editor.tabsize also shows 4.
In the bottom right hand corner, its shows spaces: 4, but after autoformatting, it shows spaces: 2, and will revert itself back to 2 no matter how many times I change it to 4.
Anyone know what's going on. This is happening with Ruby, if that matters.
Also, does anyone know of an alternate indenter/autoformatter for VScode?
I think that you might have a problem with "Auto Detect Indentation". You should try to turn it off and see if that helps.
// The number of spaces a tab is equal to. This setting is overriden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 4,
// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": false
For those who could not use above like me, Here is somewhat GUI guide.
Go to setting by pressing = > CTRL + , (suggested by comment) to open settings or via menue
File->Preferences->Settings
There you can find both (find tab size and detect indentation) in search box, like I have shown in following image (see the text 'lets play')
detect indentation => uncheck it (turn off)
tab size => Set it to 4
How to ? need to visualize? here it is,
Right click following image and open in new tab see it clearly
I solved this problem using https://editorconfig.org/
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = tab
indent_size = 4
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Make sure to also install the vs code extension!
Related
When writing a source file in VS Code that is styled with spaces of a specific width (maybe determined by the .editorconfig file), how can I force VS Code to treat the spaces like tabs without reformatting the file?
For example, the indent width may be 4 spaces, so rather than displaying 4 spaces in my editor, I'd rather see one tab space character with a width of 4 spaces.
The selection aspect of space-tabulated code is supported with VSCode 1.52 (Nov. 2020) and:
Sticky Tab Stops when indenting with Spaces
If you prefer to indent your code with spaces, there is a new setting called editor.stickyTabStops, which makes VS Code treat cursor movements in leading spaces similar to tabs.
Appearance
You said vscode is:
displaying 4 spaces in my editor
I assume that means you're getting those little Interpunct dot characters coming up like this ····
If you want those to go away, so they appear more consistent with tabs, go into VScode settings (JSON) and enter the following:
"editor.renderWhitespace": "selection"
Assuming everything else is default, both tabs and spaces should be rendered as regular whitespace. But that alone it doesn't really help, because it doesn't allow you to distinguish nested structures i.e. you can't tell how many levels of indentation you're at.
To fix that, there's 2 things.
(minimum) Set indent guides explicitly in your user settings, this will render vertical lines at each indentation level, no matter if the file is using tabs or spaces:
"editor.renderIndentGuides": true
(optional extra) If you want to take it further, there are a few extensions you can try, but the one i recommend is indent-rainbow. There are lots of options for it, but i have mine config'd so after a certain level of indentation it becomes more obnoxious, because i treat it as a code smell i.e. i like to minimize how much i nest if possible.
The end result of doing all this is that tabs and spaces are rendered exactly the same way, and you can't tell the difference unless you have part of your code highlighted:
Behavior
To make the behavior of indentation more consistent, the following should be in your settings if it's not already applied by default:
"editor.detectIndentation": true,
"editor.insertSpaces": true,
"editor.useTabStops": true
As for this:
source file in VS Code that is styled with spaces of a specific width (maybe determined by the .editorconfig file)
I don't think this is possible, or at least not natively. You may be able to find/write an extension that can do detection based on tabsize since there is in fact a property called:
"editor.tabSize": 4,
Not sure if this will help, but you can do selective setting overrides based on filetype, for example:
"[yaml]": {
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.autoIndent": "advanced"
}
vscode:
version - 1.40.2
On a normal text type file, type Hello and hit TAB.
All i want is when i hit tab vscode should register 2/4 spaces (what i have configured in the settings.json for the specific language) not a single space.
HelloTAB
Expected: Hello****|
Actual: Hello*|
Make sure you have unchecked Editor: Detect Indentation. Checking this option will override the Tab Size configuration. E.g. if the opened file has 1 space tab indentation but you have configured a 4 spaces tab indentation - the tab size will be 1 space.
Ctrl + , to open Settings.json
Enter in "spaces" in search
Uncheck Editor: Detect Indentation
Leave Editor: Insert spaces checked if you want to insert actual spaces instead of a tab (i.e. you need to do 4 backspaces if you made a mistake). Or unchecked it if you want to insert actual tabs.
Also, you can check what is the configured tab size for that particular opened file by looking at the bottom right of your editor:
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
I'm really liking VS Code, but I've looked everywhere and I can't seem to change one very annoying feature: pressing return on an empty indented line carries over the current indentation, but removes all indentation on the original line. It seems impossible to have two consecutive tab-indented lines in the editor.
Is there a setting I'm missing or some other way to preserve the tab-indentation across lines? Thanks.
We can setup user settings for this,
Go to File > Preferences > User Settings:
You can customize this easily via these 3 settings in
/ The number of spaces a tab is equal to. This setting is overriden
// based on the file contents when editor.detectIndentation is true.
"editor.tabSize": 4,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when editor.detectIndentation is true.
"editor.insertSpaces": true,
// When opening a file, editor.tabSize and editor.insertSpaces
// will be detected based on the file contents.
"editor.detectIndentation": true
For more information -
We can setup user settings for this,
Go to File > Preferences > User Settings:
You can customize this easily via these 3 settings in
/ The number of spaces a tab is equal to. This setting is overriden
// based on the file contents when editor.detectIndentation is true.
"editor.tabSize": 4,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when editor.detectIndentation is true.
"editor.insertSpaces": true,
// When opening a file, editor.tabSize and editor.insertSpaces
// will be detected based on the file contents.
"editor.detectIndentation": true
For more info you can check here - How to set tab-space style?
I have figured out my problem:
In Settings, "editor.trimAutoWhitespace" is true by default, meaning any trailing tabs left on a line are automatically deleted, even if they are just holding the regular indentation level. I have fixed my problem by setting this option to false in my User Settings (File / Preferences / Settings).
I am surprised that I can't find any record of anyone else having found this behavior unusual.
I have both TypeScript and HTML files in my project, in both files tabs are converted to spaces.
I want to turn the auto-conversion off and make sure that my project has only tabs.
Edit:
With this setting it seems to work in HTML files but not in TypeScript files.
{
"editor.insertSpaces": false
}
There are 3 options in .vscode/settings.json:
// The number of spaces a tab is equal to.
"editor.tabSize": 4,
// Insert spaces when pressing Tab.
"editor.insertSpaces": true,
// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true
editor.detectIndentation detects it from your file, you have to disable it.
If it didn't help, check that you have no settings with higher priority.
For example when you save it to User settings it could be overwritten by Workspace settings which are in your project folder.
Update:
To access these settings, you can open File » Preferences » Settings, click the Manage cog icon at the bottom left, or use the keyboard shortcut:
CTRL+, (Windows, Linux)
⌘+, (Mac)
Update:
Now you have an alternative to editing those options manually. Click on selector Spaces:4 at the bottom-right of the editor:
EDIT:
To convert existing indentation from spaces to tabs hit Ctrl+Shift+P and type:
>Convert indentation to Tabs
This will change the indentation for your document based on the defined settings to Tabs.
To change tab settings, click the text area right to the Ln/Col text in the status bar on the bottom right of vscode window.
The name can be Tab Size or Spaces.
A menu will pop up with all available actions and settings.
Ctrl+Shift+P, then "Convert Indentation to Tabs"
If you want to use tabs instead of spaces
Try this:
Go to File ➤ Preferences ➤ Settings or just press Ctrl + ,
In the Search settings bar on top insert editor.insertSpaces
You will see something like this: Editor: Insert Spaces and it will be probably checked. Just uncheck it as show in image below
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)
If it doesn't worked try this:
It's probably because of installed plugin JS-CSS-HTML Formatter
(You can check it by going to File ➤ Preferences ➤ Extensions or just pressing Ctrl + Shift + X, in the Enabled list you will find JS-CSS-HTML Formatter)
If so you can modify this plugin:
Press F1 ➤ type Formatter config ➤ press Enter (it will open the file formatter.json)
Modify the file like this:
4| "indent_size": 1,
5| "indent_char": "\t"
——|
24| "indent_size": 1,
25| "indentCharacter": "\t",
26| "indent_char": "\t",
——|
34| "indent_size": 1,
35| "indent_char": "\t",
36| "indent_character": "\t"
Save it (Go to File ➤ Save or just press Ctrl + S)
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)
Check this from official vscode setting:
// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": true,
// The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 4,
// Config the editor that making the "space" instead of "tab"
"editor.insertSpaces": true,
// Configure editor settings to be overridden for [html] language.
"[html]": {
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.autoIndent": false
}
Below settings are worked well for me,
"editor.insertSpaces": false,
"editor.formatOnSave": true, // only if you want auto fomattting on saving the file
"editor.detectIndentation": false
Above settings will reflect and applied to every files. You don't need to indent/format every file manually.
In my case, the problem was JS-CSS-HTML Formatter extension installed after january update. The default indent_char property is space. I uninstalled it and the weird behavior stops.
Highlight your Code (in file)
Click Tab Size in bottom righthand corner of application window
Select the appropriate Convert Indentation to Tabs
File -> Preferences -> Settings or just press Ctrl + , and search for spaces, then just deactivate this option:
I had to reopen the file so the changes would take effect.
If you want to change tabs to spaces in a lot of files, but don't want to open them individually, I have found that it works equally as well to just use the Find and Replace option from the left-most tools bar.
In the first box (Find), copy and paste a tab from the source code.
In the second box (Replace), enter the number of spaces that you wish to use (i.e. 2 or 4).
If you press the ... button, you can specify directories to include or ignore (i.e. src/Data/Json).
Finally, inspect the result preview and press Replace All. All files in the workspace may be affected.
Set this to false if you are using .sass files and it's giving you the Expected tabs, was spaces error:
"editor.detectIndentation": false
... then select your block of code and indent it by pressing the tab key and indent it back by pressing the shift + tab key.
In my case it was about unchecking
Prettier: Use Tabs
on VSCode settings
{
"editor.insertSpaces": true
}
True works for me.