Prettier-vscode: Different indent for different languages is important!

Created on 13 Oct 2017 · 4Comments · Source: prettier/prettier-vscode

Hi all,

I am copying this issue from general prettier issue tracking:

as far as I know, Prettier still doesn't support different indenting for different languages. Case in point:

This is my setup for JS:

"[javascriptreact]": {
    "editor.tabSize": 2
},
"[javascript]": {
        "editor.tabSize": 2
}

And this should be setting for CSS

"[css]": {
    "editor.tabSize": 4
 },
"[postcss]": {
    "editor.tabSize": 4
 }

But the CSS settings keep getting ignored, and CSS gets two spaces indent. It would be awesome if we could get this to work. Or am I doing something wrong? Thanks all!

P.S. on the original question prettier/prettier#3019 - I got an answer but that doesn't seem to be working. Any help?

Edit @cigit: link fixed

locked

Source

sebastijandumancic

Most helpful comment

We don't read for "editor.tabSize" but "prettier.tabWidth". Du to a limitation in VSCode, you can't put "prettier.*" settings inside language specific settings. (Actually we could but that would feel like a hack)

What you can do however is create a .prettierrc file with the following content. Tweek it to your likings

{
    "tabWidth": 2,
    "overrides": [
        {
            "files": "*.css",
            "options": {
                "tabWidth": 4
            }
        }
    ]
}

This means:
format with a tabWidth of 2.
files ending in .css should have a tabWith of 4.

CiGit on 13 Oct 2017

👍13 🎉4 ❤1

All 4 comments

What you can do however is create a .prettierrc file with the following content. Tweek it to your likings

{
    "tabWidth": 2,
    "overrides": [
        {
            "files": "*.css",
            "options": {
                "tabWidth": 4
            }
        }
    ]
}

This means:
format with a tabWidth of 2.
files ending in .css should have a tabWith of 4.

CiGit on 13 Oct 2017

👍13 🎉4 ❤1

That's it, thanks @CiGit!

sebastijandumancic on 16 Oct 2017

Thanks you @CiGit