How to Convert Tabs into Whitespaces on Save? - visual-studio-code

Question

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.

Answer 1

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,

Answer 2

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.