VSCode convert project to 4 spaces - visual-studio-code

I used the Vue cli to create a project and it uses 2 spaces by default. I want to get 4 spaces. I've turned off detect indentation, set tab size to 4 but no amount of running format document will change - for example - this little js file that was created.
I also tried to change things with eslint. It spots the errors but --fix has no effect
If I start a new object then the spaces are correct though.

I am using an extension called Vetur and in my VS Code settings file I added the following rule: "vetur.format.options.tabSize": 4,
Also for initial indentation I have added the following rules:
"vetur.format.styleInitialIndent": true,
"vetur.format.scriptInitialIndent": true,
If you are not using this extension, do you have a .editorconfig file in your solution and/or have you looked at your VS Code settings for conflicting rules?

Related

Format using 4 spaces instead of 2 in VS Code

When I open a file in VS Code and press Alt + Shift + F, the opened file gets formatted. The 2 spaces indentation gets used in html, js, etc. even though my configurations specify 4 spaces. How could I fix it?
I can refer the same issue in Visual Studio. Relevent changes for each type of file extesion exist in different section with the same heading. For example C# and JavaScript/TypeScript has the same settings. So make sure you are modifying correct one.

How to get the same format for vim-prettier and vscode-prettier?

I have vim-prettier installed and also have the vscode extension for prettier installed.
They format differently however. I would like to use vim-prettier to format the same way I would for vscode's prettier.
I followed vscode's configuration and it lead me to /home/user/.prettierrc.json but it is empty and only has {} inside of it.
I put let g:prettier#autoformat = ["/home/user/.prettierrc.json"]
inside my .vimrc file but it does not format to the same way vscode-prettier does.
Is there a way to do this?
So first I tried whereis prettier and compared it to the value i get from running :PrettierCliPath
prettier is in /usr/local/bin/prettier
and the one that vim uses is in /home/user/node_modules/.bin/prettier
I tried to set my vimrc to point to the first one via
let g:prettier#exec_cmd_path = "~/path/to/cli/prettier"
But it didn't work. It gave me a syntax error whenever I tried to run prettier in vim.
After a long time I noticed this line in the README for vim-prettier
Note: vim-prettier default settings differ from prettier intentionally. However they can be configured by:
and it gave a bunch of settings like let g:prettier#config#print_width = 'auto'
So I ended up just manually configuring each setting to the desired result.
Now I want to find a way to only allow these settings for a certain filetype(html) so that the formatter for html and css are different instead of the same.

Why I can not use vscode apple-swift-format extention to format my code with target .swift-format?

When I use vscode's apple-swift-format (whose hot-key is Shift+Option+F) to format my code, the result show it doesn't work with the ../../.swift-format.
I set my custom .swift-format as
"indentation" : {
"spaces" : 4
},
but when I pressed Shift+Option+F, I got the result with indentation spaces 2. And this should be the default configuration.
As for the description from https://github.com/apple/swift-format:
For any source file being checked or formatted, swift-format looks for a JSON-formatted file named .swift-format in the same directory. If one is found, then that file is loaded to determine the tool's configuration. If the file is not found, then it looks in the parent directory, and so on.
Besides, I tried to use command-line-tool to format my source code and it works well in expection, with indentation spaces 4.
So why the vscode/apple-swift-format extention doesn't work in expect? Is this is a bug for the extention?
My swift-format tool's version is 0.50600.0.
enter image description here

How to add Format config file to VSCode workspace using Ionide

I want to add specific workspace setting for Formatting for F#
I see that Ionide for VSCode uses FsAutoComplete which in turns uses Fantomas as the Formatter and that Fantomas has config file support (not documented), but I tried to add .fantomas-config and fantomas-config.json in the root of my project and the config file was ignored.
Ultimately what I want to achieve is:
preserve new lines made by me.
set the "word wrap" column length
Other common formatting options like indentation etc.

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