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"
}
Related
I'm working on a project that is using 2 spaces as indentation.
I have a hard time reading code with such small indentation, so my question is:
Question: Can I make vscode show the two spaces as if they were wider (for example double the width)?
(I could of course solve it in a hackish way, by converting each file on checkout, and convert it back before i commit it, but that would be very tedious and error prone. I could also try to convince the project to convert the whole project to tabs, so that everyone can use their own preferred indentation. But I don't want to go into that discussion for every project I work on :) )
I have written the extension Indent Whitespace that decorates each space used in indentation with additional spaces (cursor will skip the decoration).
The decorated spaces are colored with a very transparent red.
With a setting you can change the number of spaces to add, default 1.
If you delete spaces with Delete it looks funny because the selection does not change, use the Arrow keys to update the decorations.
In a later version I will make the decoration color a setting, and also only update the decoration when the file changes (only important for large files, and fix the delete-update rendering).
I think you can't.
There is no such setting in VS Code. As of version 1.13, you can change the kerning, but this changes the spacing between all characters. You cannot do this only for a single character (or a set of characters).
The space width is a property of the font. Microsoft has a guideline that defines what is the ideal space size for a font. But this does not mean you cannot change it yourself when designing one. So I created a version of Roboto Mono which space character is 4x the original one.
This works on Notepad and MS Word, we can see the space is quite big. However, using the exact same font in VS Code, the space is still small, independently of the font being monospaced or not.
Illustration
Somehow, it looks like VS Code ignores space size in the font and decides by itself what is the best value.
I have file using an indentation level of 4 columns, and assuming that a tabulation character corresponds to 8 spaces, like this (I use . to represent a space, and <------> for a tabulation character):
class Foo {
....void bar() {
<------>if (boz) {
<------>....return x;
<------>}
....}
}
This is common for certain coding styles like Oracle coding conventions for Java:
Four spaces should be used as the unit of indentation. The exact construction of the indentation (spaces vs. tabs) is unspecified. Tabs must be set exactly every 8 spaces (not 4).
I'm having trouble rendering this properly with VSCode:
If I set editor.tabSize to 4, then it renders badly as
class Foo {
....void bar() {
<-->if (boz) {
<-->....return x;
<-->}
....}
}
If I set editor.tabSize to 8, then the text is rendered properly, but the indentation guides are incorrect (a guide is missing for the void bar() indentation level):
More importantly, automatic indentation (pressing the "tab" key, or on-the-fly indentation when pressing "return" after a { character) now indents with 8 columns, making the editor barely usable.
An obvious workaround is to use only spaces for indenting, but this is not applicable when opening a pre-existing file.
Is there a way to configure the indentation guides to be displayed every 4 columns, while still rendering tabs every 8 columns?
In the editorconfig cross-editor configuration file specification, this corresponds to the tab_width and indent_size properties, that I would like to be able to change independently.
I'm a former Emacs-user, and this would correspond to tab-width and c-basic-offset for example.
The issue mentioned in the comments in 2020, microsoft/vscode issue 10339, has finally been closed in Nov. 2022(!)
PR 155450 enables having separate values for indentation and the display width of tab characters, which is a common requirement of some older projects and/or coding styles.
In addition to adding support for an editor.indentSize property, the indentation options on the status bar have been updated to allow independently configuring editor.indentSize and editor.tabSize.
So:
editor.indentSize: The number of spaces used for indentation or 'tabSize' to use the value from editor.tabSize.
This setting is overridden based on the file contents when editor.detectIndentation is on.
This should be available soon in VSCode Insiders and released with VSCode 1.74 (Nov. 2022).
Unfortunately, as of now there is no setting or extension that is based only on (spaces/tabs-at-the-current-tab-size).
I have indented my files in my sublime text but when I push to github they don't look indented. How do I fix this?
The approach taken to indent file on sublime is:
select the code > Edit > Line > Reindent
looks like this on github:
Your issue looks to be caused by your use of literal tab characters for indenting as opposed to using spaces instead.
If there's a hotter holy war topic among developers than the debate of tabs versus spaces, it's probably related to how wide you should interpret a tab character to be for display purposes if you happen to use them.
In particular your images would appear to indicate that you think that tabs should be 2 characters wide and GitHub thinks they should be 8. As mentioned in this answer you can append an extra query field to the URL in GitHub in order to view the files the way you prefer them to be viewed.
As far as I'm aware that just changes how they're rendered on the page when you view and doesn't actually modify the file at all. If it's important that the file retain the same indent levels regardless of where or how you view the file, you should convert from tab indentation to space indentation instead since a space is unambiguously sized.
If you're using Sublime Text you can do that by clicking in the status bar where it says Tab Size: 2 and select Convert indentation to spaces; the status bar will switch to say Spaces: 2 to indicate that the indent has changed.
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 have a file in Visual Studio Code in which I use only tabs for indentation. When I copy the contents of that file somewhere else and edit them, then when I paste them back all tabs are gone and spaces have taken their places.
How can I prevent the use of spaces for indentation and automatically spaces will be converted to tabs?
Also I have changed the preferences:
"editor.insertSpaces": false,
"editor.detectIndentation": false,
Unfortunately you can't (yet). I think it would be nice to get spaces/tabs converted upon file opening - like some editors do. You can quickly convert spaces by tabs by selecting the number of indentation spaces, pressing cmd+F2 in mac or ctrl-F2 in linux/windows (to find and select all occurrences of that amount of spaces), and then pressing tab key (only once). You can also give Untabfy (or Whitespacer) a try.