vuejs/vetur

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

Open

#2,493 opened on Nov 21, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (594 forks)github user discovery
feature-requestgood first issueinteg:prettier

Repository metrics

Stars
 (5,752 stars)
PR merge metrics
 (PR metrics pending)

Description

  • 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
                    }
                },
            ]
        },
    }
}

Contributor guide