Unable to set tab width to 4 in prettier

visual-studio-code prettier
javanoob picture javanoob · Oct 27, 2019 · Viewed 9.5k times · Source

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" }
    }
  ]
}

Answer

Akshay Vijay Jain picture Akshay Vijay Jain · Jan 5, 2021

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!

https://prettier.io/docs/en/options.html#tab-width

Related questions

Why do I keep getting Delete 'cr' [prettier/prettier]?

I am using vscode with Prettier 1.7.2 and Eslint 1.7.0. After every newline I get: [eslint] Delete 'cr' [prettier/prettier] This is the .eslintrc.json: { "extends": ["airbnb", "plugin:prettier/recommended"], "env": { "jest": true, "browser": true }, "rules": { "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", "…

Read More
Why Prettier does not format code in VSCODE?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code editor. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted …

Read More
prettier settings for vscode

I recently switched to a new computer, and am having difficulty with a prettier setting. (I think it's prettier, could be eslint). This gif illustrates what's happening: http://g.recordit.co/H871hfT9Sv.gif Anyone know what this setting …

Read More