How to increase size of spaces in indentation? - visual-studio-code

My indentation are too thin. But I also don't want to use more than 2 spaces for indentation. Is there a way to increase the size?
Current view,
Expected View,

Since you aren't using any formatter type extension
You can set your indentation easily by selecting the indenting option in the status bar.
and then select the size you want.
If you want to globally have the same settings.
add these values to your settings.json
"editor.tabSize": 4, //4 = 4 spaces
"editor.detectIndentation": true, // this will auto detect whether your file is using spaces or tabs to indent.
"editor.insertSpaces": true, // Insert spaces when pressing Tab. This setting is overridden based on the file contents when #editor.detectIndentation# is on.

Related

Make spaces act and look like tabs in VS Code

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"
}

How do you remove trailing spaces in all files except Markdown?

In Visual Studio Code the setting
"files.trimTrailingWhitespace": true
removes trailing white space when files are saved, or Shift + Alt + F is used to format a file, but this breaks Markdown formatting.
How do you selectively turn off white space trimming for Markdown?
Add this line to your settings.json file.
"[markdown]": {
"files.trimTrailingWhitespace": false
}
You can use EditorConfig by adding .editorconfig at the root of your project:
[!markdown]
trim_trailing_whitespace: false
Or as GollyJer suggested, add this code snippet in the settings.json file:
"[markdown]": {
"files.trimTrailingWhitespace": false
}
You can now (VSCode 1.68, May 2022) do this through the Settings GUI instead of directly your settings.json.
Settings editor improvements
The Settings editor now shows a default value override indicator for language-specific settings.
As a note, one can view language-specific settings by adding a language filter in the Settings editor search bar, and one can add such a filter either by typing it out explicitly, or by clicking the filter button on the right of the search bar, and selecting the "Language" option.
When the default value override indicator shows up, it indicates that the default value of the language-specific setting has been overridden by an extension. The indicator also indicates which extension overrode the default value.
(Theme Light Pink)
This example above is for line wrapping, but you can adapt it to reference trim_trailing_whitespace.
Do Ctrl-K s. This will "Save without formatting", which also means, without trimming trailing whitespace in the file you're editing
Solution
Add or update .editorconfig in root of your project and add the 2 following lines to prevent trimming on whitespace in VScode on matching file extension's
Update .editorconfig with following
[*.md]
trim_trailing_whitespace = false
[*.mdx]
trim_trailing_whitespace = false

Managing Indentation Settings in VS Code

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.

have different tab sizes in visual studio code

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.

What's the difference between "editor.insertSpaces" and "editor.tabSize" in settings?

How are they interpreted differently? I can only see what "editor.tabSize" does, which is the number of spaces that a tab occupies.
Thank you.
From the configuration file:
{
// Controls the rendering size of tabs in characters.
// If set to auto, the value will be guessed based on the opened file.
"editor.tabSize": 4,
// Controls if the editor will insert spaces for tabs.
// If set to auto, the value will be guessed based on the opened file.
"editor.insertSpaces": true
}
As you can see editor.tabSize sets the size of space occupied when you enter tab. While editor.insertSpaces configures the stored key code in file.
If editor.insertSpaces equals false then Visual Studio Code will insert one #09 character for each tab. When you change editor.tabSize your existing code will change indentation in all lines a #09 character is stored.
If editor.insertSpaces equals true then Visual Studio Code will insert space characters for each tab instead of #09 characters. The amount of inserted spaces is configured in editor.tabSize. When you change editor.tabSize your existing code will not change indentation since there is no #09 character being stored in the file. Only new tab strokes will be affected by the new value of editor.tabSize.
If you and other team members use only tab for indentation then it is no problem to set editor.insertSpaces to false.
If you and other team members use space or tab for indentation then you should set editor.insertSpaces to true. Otherwise your files can look awkward when somebody opens a file with a different value of editor.insertSpaces.
editor.insertSpaces:
Controls if the editor will insert spaces for tabs. Accepted values: "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
editor.tabSize:
Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened.