How to use 4 spaces formatting for indentation in VSCode for Volar through Vue - Official extension in .vue files?

Question

I have a vuejs project and my team uses VSCode as the editor. I'm trying to setup a general project configuration for consistent autoformatting, including 4 space indentation instead of 2. I installed prettier as an NPM project dependency and the prettier extension for VSCode, then created a .prettierrc file to configure it. I set it as the default formatter in general and the default formatter for .js files and so forth in my VSCode settings.json. However, prettier didn't seem to run in .vue files. So i installed the Vue - Official extension which apparently provides Volar for vuejs formatting. As you can see, i specified it in my VSCode settings and also explicitely set the indentation with to 4 spaces, the same for prettier.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 4,

  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Vue.volar"
  },

  "files.autoSave": "off", // Disable auto-save on focus change
  "workbench.startupEditor": "newUntitledFile",
  "terminal.integrated.fontSize": 12,
  "window.zoomLevel": 0,
  "workbench.colorTheme": "Visual Studio Dark"
}

Here is my .prettierrc for reference:

{
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 4,
    "useTabs": false
}

However, while some sort of formatting seems to run now in .vue files, it still only uses 2 spaces. Why? How can i fix this?

Answer 1

You try to check save in settings of VScode, if Editor: Format On Save doesn't check, please check it.

And in settings, you press prettier and change tabWidth to 4.

Finally, right click in your html file -> select Format Document With... -> select Config default formatter... -> select Prettier - Code Formatter.

I hope something above will help you resolve your problem.