Unable to set tab width to 4 in prettier

user_305684 0
Viewed 42976

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?

enter image description here

Here is the gif showing when I format the file:

enter image description here

EDIT: Contents of .prettierrc file:

{
  "trailingComma": "none",
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": { "parser": "lwc" }
    },
    {
      "files": "*.{cmp,page,component}",
      "options": { "parser": "html" }
    }
  ]
}
prettier visual-studio-code
7 Answers

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

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

user_27616410

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

enter image description here

user_137902350

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!

user_54732210

It took me 3 hours to finally figure it out.

  1. Make sure that the spaces/tab at the bottom is set to 4.
  2. Tab size in settings is set to 4.
  3. Prettier: Use Tabs is checked. (at least it worked for me)
  4. Also try checking/unchecking Editor: detect indentation.

Editor: Detect Indentation Prettier use tabs & tab size

user_149583120

How I fixed it myself:

  1. I found an extension that I was not aware of (maybe pack installed): Editor config.

  2. I figured out it messed up my setting for tab and other stuff, so I deleted it.

  3. Uncheck 'Use User Setting' in prettier.

  4. Check all tab config, prettier config.

user_101202340

That's the user level setting.

However some project make have project level setting which overwrites the user level, in file .prettierrc

{
  ******
  "tabWidth": 5
}
user_44686480
Related