Prettier-vscode: Prettier indentation not working/overrides.

[CHBaker]

Hello, I use the John Papa Angular essentials package. I like my editor to have indentations of 4 spaces. My editor was set at 4 spaces, and when I downloaded angular essentials (I believe) Prettier overrides that.

My settings:

{
    "editor.fontSize": 14,
    "editor.insertSpaces": true,
    "window.zoomLevel": 1,
    "editor.detectIndentation": false,
    "workbench.iconTheme": "material-icon-theme",
    "editor.tabSize": 4
}

I tried adding the prettier settings to keep up with the tabSize:

{
    "editor.fontSize": 14,
    "editor.insertSpaces": true,
    "window.zoomLevel": 1,
    "editor.detectIndentation": false,
    "workbench.iconTheme": "material-icon-theme",
    "editor.tabSize": 4,
    "prettier.tabWidth": 4,
    "prettier.singleQuote": true,
}

After this, my editor still specifies a tab size of 2

and when I click the spaces icon, it says configured tab size is 4. If configured is 4, why is 2 selected everywhere? I can manually click 4, on each file, but if I quit/reload the editor everything is back at 2. How can I fix my formatting?

[jmls]

I have the same problem - everything is set at 4, yet when I save it's set to 2 spaces. Extremely frustrating :(

[jmls]

oh, ok .. I seem to have fixed it ..

I created a .prettierrc file in the root of my project with the following content

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

and now I get 4 spaces for indentation

[CiGit]

The right setting to have prettier indent with 4 spaces is prettier.tabWidth: 4

@CHBaker We do not read from editor.tabSize. It may be written 2 due to editor.detectIndentation

@jmls editor.formatOnSave is useless in a .prettierrc file. (you may also have a warning about that)

[jmls]

@CiGit : true - didn't see that. However, the fact is that atm I need to have a .prettierrc file for format on save to respect the tabwidth. If I don't it always is set to 2

[CiGit]

Do you have an .editorconfig?

[jmls]

dear god. yes. I do.

indent_size = 2

blushes

[CHBaker]

So I don't have detect indentation on, but let me try and create a .prettierrc file in my root when I get home. Do I need to include it somewhere? or will prettier auto-detect it

[CiGit]

As long as it is upper in the file hierarchy.
You should also check for a .editorconfig file

[CHBaker]

Editor configuration, see http://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Found the issue, thanks!

[alberpad]

Sometimes there are problems if you have activated more than one formatter. Check if you have others like Beautify or JS-CSS-HTML Formatter.

[devTomek]

"prettier.tabWidth": 4
works but remember to save file every time you are making changes!

[abelikov5]

Hi, you can try like this:

[saedyousef]

oh, ok .. I seem to have fixed it ..

I created a .prettierrc file in the root of my project with the following content

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

and now I get 4 spaces for indentation

This is great, thanks

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.