Is it possible to configure the HTML/JS/CSS sections of a .vue file differently?

[fenomas]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: macOS
• Vetur version: 0.30.2
• VS Code version: 1.51.1

Problem

The use case here is when you want (for example) smaller tab widths in HTML than in CSS/JS. In prettier, apparently the only way to do this is by specifying overrides according to file type, but this doesn't work when done in vetur's prettier config.

Is there any way of achieving this?

Reproducible Case

Below is a sample /.vscode/settings.json, that tries to set tabWidth to 4 generally, but to 2 for HTML files. When used with vetur, the overrides appear to be ignored (even if one specifies *.vue, though of course that wouldn't be particularly useful here).

{
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "tabWidth": 4,
            "overrides": [
                {
                    "files": "*.html",
                    "options": {
                        "tabWidth": 2
                    }
                },
            ]
        },
    }
}

[yoyo930021]

It's not work now, but It's possible to do it.