55

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" }
    }
  ]
}
javanoob
  • 6,070
  • 16
  • 65
  • 88
  • do you also have a `.prettierrc` file in your project, and if so, what does it contain? – NSjonas Nov 13 '19 at 05:58
  • @NSjonas yes. Updated question with contents of the file. – javanoob Nov 13 '19 at 06:02
  • 2
    I only use the `.prettierrc` file and I don't seem to have any issues. Try adding `"tabWidth": 4,`. You might also check the "Workspace Settings" to make sure you aren't overwriting the user settings displayed in your answer. – NSjonas Nov 13 '19 at 06:07
  • 1
    @NSjonas I did the "format document" and see this info dialog from prettier (https://imgur.com/YYxhWCf) and now my `.prettierrc` file shrunk to just two lines `{"tabWidth": 4,"useTabs": true}` and it is working fine. Looks like prettier 3.0 fixed it or made it easy. Thanks for your time. – javanoob Nov 13 '19 at 06:15
  • Using `"tabWidth": 4,` in `.prettierrc` inside my project fixed the issue for me! Thanks, @nsjonas !!! – Aqeeb Imtiaz Harun Dec 01 '20 at 16:38
  • @AqeebImtiazHarun Was that "tabWidth" or "prettier.tabWidth"? – James Poulose Dec 31 '20 at 02:27
  • @JamesPoulose it was just `tabWidth` for me in `.prettierrc` in the root of the project. For VS Code settings.json it was `prettier.tabWidth` – Aqeeb Imtiaz Harun Jan 02 '21 at 18:40
  • Wanted to also add for anyone else who may come across this that even with updating the prettier settings, there may be a `.editorconfig` that could override any of the settings. – JHizzal Mar 17 '22 at 16:24
  • I just restarted VSCode (close/open) and it works fine now. – Shahriar Apr 03 '22 at 16:36

9 Answers9

45

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
}
Mahbub Ul Islam
  • 773
  • 8
  • 15
  • hey,@mahbub-ul-islam, I have used this file. But when I changed this value VScode doesn't load the latest change from this file. Why this problem ? – H Nazmul Hassan Jan 03 '23 at 06:08
  • 1
    I think `editor.formatOnSave` does not belong to `.prettierrc`. It should belong to vscode? – Xin Jan 26 '23 at 12:08
8

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

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Akshay Vijay Jain
  • 13,461
  • 8
  • 60
  • 73
8

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!

PedroPK
  • 519
  • 6
  • 8
  • Lifesaver. I just uninstalled the extension and deleted the .editorconfig file. A tab space of two I understand with HTML, but I just can't see code if the tabsize isn't four spaces. Heck I used to know people that would use eight spaces! – Matt Parkins Jul 01 '22 at 20:02
  • yes you're right. – huykon225 Jun 09 '23 at 04:18
6

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

enter image description here

Liam
  • 27,717
  • 28
  • 128
  • 190
Muhammad Ahsan
  • 117
  • 2
  • 7
2

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

Santanu Biswas
  • 51
  • 1
  • 2
  • 6
1

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.

ouflak
  • 2,458
  • 10
  • 44
  • 49
Sohas Lyn
  • 11
  • 1
1

For me, I had a file named prettier.config.js in my root directory. I added tabWidth to it and it fixed the problem. Below are the contents of this file:

// prettier.config.js
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tabWidth: 4,
};

This file basically overrides the default configuration.

Tejaswi Kasat
  • 63
  • 4
0

That's the user level setting.

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

{
  ******
  "tabWidth": 5
}
Xin
  • 33,823
  • 14
  • 84
  • 85
0
  1. Open the user settings cmd shift p then search for user settings
  2. Add the following at the bottom of the file: "editor.tabSize": 4
Operator
  • 504
  • 8
  • 17