Prettier-vscode: Ignores Indentation in Vue Templates

[FlorianWendelborn]

Prettier Config

{
    "arrowParens": "always",
    "semi": false,
    "singleQuote": true,
    "trailingComma": "es5",
    "useTabs": true
}

Observed Behavior

Vue templates always format with 2 space indentation.

Expected Behavior

Vue templates should respect useTabs: true.

Versions

prettier-vscode: 1.7.2
prettier: 1.15.2

EDIT: Fix

See my comment below. It’s caused by https://github.com/vuejs/vetur/issues/950.

[richardtallent]

Confirmed, I'm suddenly having this issue as well. My prettier config has useTabs: true and eslint config has "rules": { "vue/html-indent": ["error","tab"], }, yet once Prettier formats, my template's tabs disappear and I have a sea of red waves. :(

I poked into Prettier's printer code, and it seems to be using a shared indent() function, I'm not really following why it's working for script and not for templates.

[FlorianWendelborn]

I’m closing this as it seems to be caused by https://github.com/vuejs/vetur/issues/950 instead of prettier-vscode. Here’s how to make vetur stop messing with your formatting:

settings.json:

{
    "prettier.disableLanguages": [],
    "vetur.format.defaultFormatter.css": "none",
    "vetur.format.defaultFormatter.html": "none",
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.less": "none",
    "vetur.format.defaultFormatter.postcss": "none",
    "vetur.format.defaultFormatter.scss": "none",
    "vetur.format.defaultFormatter.stylus": "none",
    "vetur.format.defaultFormatter.ts": "none"
}

[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.