Skip to content

Allow overriding options based on a language #5378

@bengry

Description

@bengry

Currently it's only possible to override Prettier options based on a glob pattern, for example:

// .prettierrc
"overrides": [
  {
	"files": ["*.{component,widget}.html"],
	"options": {
	  "parser": "angular",
	  "printWidth": 80
	}
  }
]

However, there are cases where multiple languages "live" in the same file, namely .vue files and Angular components (found in .ts files).

For brevity, I'll focus on Angular components, but the same holds true for Vue, as mentioned above.

// hero-app.component.ts
@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

For the above file, there can only be one printWidth setting, even though it actually encapsulates (up to) 3 different types of files: typescript, css and html (with the angular parser). Similarly to how .vue files are constructed.

It sometimes makes sense to have different printWidths for different file type (for example, it would make sense to have HTML files shorter in width to force each attribute to its own line, in most cases - though this is another issue on its own, that Prettier doesn't currently address in HTML/Angular/Vue templates/files). This can be done today, based on a glob pattern:

{
	"semi": true,
	"singleQuote": true,
	"trailingComma": "es5",
	"printWidth": 110,
	"useTabs": true,
	"tabWidth": 4,
	"overrides": [
		{
			"files": ["*.{component,widget}.html"],
			"options": {
				"parser": "angular",
				"printWidth": 80
			}
		}
	]
}

I suggest adding another option to the "overrides", similar to the files one, to allow specifying the "type" (for lack of a better name), for which the options would apply. e.g.:

{
	"semi": true,
	"singleQuote": true,
	"trailingComma": "es5",
	"printWidth": 110,
	"useTabs": true,
	"tabWidth": 4,
	"overrides": [
		{
			"files": "*.component.html",
			"types": "angular-template",
			"options": {
				"parser": "angular",
				"printWidth": 80
			}
		}
	]
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:multiparserIssues with printing one language inside another, like CSS-in-JSstatus:needs discussionIssues needing discussion and a decision to be made before action can be taken

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions