Unable to set tab width to 4 in prettier

Question

I installed prettier extension for vscode and configured tab width as 4 spaces but it still indents new lines with 2 spaces. Anything I am doing wrong?

Here is the gif showing when I format the file:

EDIT: Contents of .prettierrc file:

{
  "trailingComma": "none",
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": { "parser": "lwc" }
    },
    {
      "files": "*.{cmp,page,component}",
      "options": { "parser": "html" }
    }
  ]
}

Answer 1

First, remove any .prettierrc from the working directory. Because it overrides user settings and uses the default values.

Second, set Prettier: Tab Width to 4.

Third, Unchecked Prettier: Use Tabs

And if you have to use .prettierrc file then specify all the options.

{     "singleQuote": true,     "printWidth": 80,     "editor.formatOnSave": true,     "proseWrap": "always",     "tabWidth": 4,     "requireConfig": false,     "useTabs": false,     "trailingComma": "none",     "bracketSpacing": true,     "jsxBracketSameLine": false,     "semi": true } 

Answer 2

I think it was because, tabWidth:4 was specified in user's settings, while in workspace setting nothing was specified, so it uses default value for workspace i.e. tabWidth:2

as mentioned in comments also adding tabWidth:2 in .prettier.js would fix it!

Check out about tabWidth option in documentation

Answer 3

Disable "use Tabs" option. Hopefully it will start working properly.

Answer 4

Non of these possibilities solved my VS Code case with Prettier.

But the Prettier website show me how to do it!

This section (https://prettier.io/docs/en/options.html#tab-width) sent me to .editorconfig website (https://editorconfig.org/):

I found this .editorconfig file at root folder of my project, and it had two specific configs that I changed.

Before

indent_style = space
indent_size = 2

After

 indent_style = tab
 indent_size = 4

And finally it worked out!