Allow overriding options based on a language

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

[andrewnicols]

Another one to throw into the mix - we want to be able to have Prettier treat our codeblocks as their formatted langauge in markdown.

For example, I’d like to be able to have Prettier set a tabWidth of 2 for all content, except for PHP codeblocks where we use a tabWidth of 4.

Any code examples in separate files and included into the markdown are fine, because we can set a file-name based override, but any inline code block is formatted with the default tabWidth instead of the php-specific variant, despite the langauge being set in the code block.

[michaeljota]

I would prefer something like this instead:

{
  "singleQuote": true,
  "printWidth": 100,
  "overrides": [
    {
      "languages": ["angular", "html"],
      "options": {
        "printWidth": 80
      }
    }
  ]
}

A property languages that allow an array of languages to override the options declared.

What do you think?