How do you remove trailing spaces in all files except Markdown? - visual-studio-code

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

Related

How can I selectively trim trailing whitespace in VSCode?

I generally have the Trim Trailing Whitespace setting turned on in VSCode because I want that behaviour for code files.
However, I have a folder of text resources (.txt files) that I would like to exclude from this rule. Some of the text files need trailing whitespace on the lines.
Is it possible to selectively turn this rule on/off based on file path or file extension?
I've tried having a .vscode/settings.json file at the root of my workspace turning the feature on, and another in the folder containing the text resources to turn it off and that doesn't work.
Is there an extension that enables this? I looked but wasn't able to find one.
In settings.json, insert:
"[plaintext]": {
"files.trimTrailingWhitespace": false
}

How can I stop VS code from converting tabs to spaces in a particular file?

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

How do I Change VSCode To Indent 4 Spaces Instead Of Default 2?

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

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.

Visual Studio Code - Convert spaces to tabs

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.