Prettier is not indenting as specified

Question

Prettier continues to format my code incorrectly. I desire 4 spaces for tabs (second picture) but it ignores the editor settings and does 2 (first picture).

I know it is prettier causing this because when I disable it vs code correctly indents for me. Unfortunately the other functionality of prettier is lost. I have already tried uninstalling and reinstalling.

So, what settings changes am I missing? I must be missing something. Any suggestions would be grand. Thanks.

Here are are all of prettier's settings I have changed.

"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 4,
"prettier.useTabs": true

score 55 · Answer 1 · edited Dec 27 '20 at 20:20

You can try the following to change indentation/tab width:

1. At the bottom of your Editor window, check for the 'Spaces: 2' (in case your code is getting indented with 2 spaces). Click on that and choose Indent using Tab and choose the value according to your need.

Image of the bottom section for your reference

2. Alter Prettier options in Visual Studio Code settings: Go to the Visual Studio Code Setting by File > Preferences > Settings or pressing Ctrl + ,. Type 'Prettier' to bring up all the settings related to Prettier and look for Prettier: Tab Width. Change the value according to your need.

3. settings.json / User Settings file: Add the following lines to settings.json file which contains all the configurations associated with VS Code.

"prettier.tabWidth": 4,
"prettier.useTabs": true,

Depending on your platform, the user settings file / settings.json is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

visit https://code.visualstudio.com/docs/getstarted/settings for more info regarding User settings file / settings.json

4. If you have .editorconfig file: Check if you have a file named .editorconfig in the root of your project directory. In case you have that file, open it and make sure you change the values in the file according to your need. The below given code is for setting the indent_style Tab and the indent_size 4:

indent_style = tabs
indent_size = 4

5. If you do not have a .editorconfig file: In case you do not have a .editorconfig file in the root of your project directory, you can create a file named .prettierrc and add the following to the file

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

You can alter this based on your requirement

Already have every single one of these and it still doesn't work... This is a real good answer though, I've encountered this problem before and usually it's one of these. — Justin, Nov 28 '21 at 20:45
Doesn't work for me, I have the same problem except I want 2 tabs. I have set tabs to 2 in every possible location I could find. — gyozo kudor, Mar 17 '22 at 15:22
I have format on save turned on and nothing worked for me. Step 5 above finally worked for me... but there's a hitch. I added the .prettierrc file. It still didn't work so I set "Settings > User > Prettier: Config Path" to the location of my .prettierrc file (/Users/me/projects/.prettierrc) It now formats correctly when I save! — Dave, Apr 26 '22 at 14:05

score 31 · Accepted Answer · edited Feb 22 '20 at 18:14

31

Are you using .editorconfig? You might have to change (or set) to

"editor.tabSize" : 4

as well.

edited Feb 22 '20 at 18:14

Roko C. Buljan

196,159
39
305
313

answered Mar 07 '18 at 11:45

Lipis

21,388
20
94
121

2

Thanks for the advice, I solved removing the `.editorconfig` – Fred K Dec 23 '18 at 10:47
Thanks - this helped me! – Delice Jan 11 '21 at 15:53
same; not sure how it was reduced to 0...alas this was the issue – J.R. Bob Dobbs Sep 28 '22 at 18:55
In my case I needed to edit `.editorconfig` which was overriding tab width. – geoidesic Jan 21 '23 at 11:51

score 14 · Answer 3 · answered Mar 24 '21 at 01:19

Just create .prettierrc named file at the root of your project and paste the code bellow

in .prettierrc

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

you can find the git issue here : https://github.com/prettier/prettier-vscode/issues/344#issuecomment-360430551

This should be the default answer. – Hank Chan Jan 06 '23 at 16:30 — Hank Chan, Jan 06 '23 at 16:30

score 2 · Answer 4 · answered Apr 03 '19 at 22:47

2

I didn't have an .editorconfig file, but I'm using VS Code and needed to add "editor.tabSize": 4 to my user settings.json file.

answered Apr 03 '19 at 22:47

Charlie Stanard

909
2
9
19

score 0 · Answer 5 · answered Jul 26 '21 at 04:31

0

I just removed the .prettierrc file because prettier's logs said, "

Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used"

I suppose you either use a local config file or you use VS Code's config, but not both, so far.

answered Jul 26 '21 at 04:31

ltdn

11
1
1

For programming alone or just testing something out this approach is okay. If you work in a team however, the use of a `.prettierrc` file is recommended as you can track it with git and it sets a consistent formatting standard for your whole team. Automatic checks are also able to lint your code base using prettier but require a `.prettierrc` file to know how to format it. – riggedCoinflip Nov 17 '21 at 11:11

score 0 · Answer 6 · answered Nov 15 '21 at 15:37

0

For Prettier Extension: Go to the extension - cog icon after uninstall button - choose Extension Settings and then Prettier: Tab width. Change the value and it's done!

answered Nov 15 '21 at 15:37

bito_

169
2
10

I tried this. Didn't work for me. – Adam Apr 26 '22 at 00:19

score 0 · Answer 7 · answered Mar 03 '22 at 18:19

0

In my case, I was using .prettierrc.js setup with module.export. Switching to .prettierrc.yaml and converting it to YAML configuration fixed my issue.

answered Mar 03 '22 at 18:19

Lee Harrison

2,306
21
32

score 0 · Answer 8 · answered Oct 27 '22 at 10:12

0

Go to vs code settings. Search Prettier: Tab Width then add a number of spaces, it should use per tab, like 2/4, etc.

see image

answered Oct 27 '22 at 10:12

Ali Raza

1
1
5

score 0 · Answer 9 · answered Jan 27 '23 at 00:17

This takes in order to control of the formatting for prettier:

1. Project Level Prettier Config

If you have something like .prettierrc.js or .prettierrc.json in your project. Then this will be treated from prettier

Note: this will replace your code editor setting like vscode default setting (the No.2 below)

you can add something like

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false
}

2. Vscode Editor Level Prettier Config

If you do not have these files in No.1, then the editor level settings will be applied, e.g. vscode settings, you can edit something like below:

// --- other content
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
}

Prettier is not indenting as specified

9 Answers9

Linked