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
}
}
]
}
Currently it's only possible to override Prettier options based on a glob pattern, for example:
However, there are cases where multiple languages "live" in the same file, namely
.vuefiles and Angular components (found in.tsfiles).For brevity, I'll focus on Angular components, but the same holds true for Vue, as mentioned above.
For the above file, there can only be one
printWidthsetting, even though it actually encapsulates (up to) 3 different types of files: typescript, css and html (with theangularparser). Similarly to how.vuefiles 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
filesone, 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 } } ] }