Disable embedded language formatting by default and make it configurable

Prettier 1.15.2 Playground link

--parser babylon

Input:

const foo = html`<p>test
</p>`;

Output:

const foo = html`
  <p>test</p>
`;

Expected behavior: I would like a way to disable HTML template string formatting for a js/ts file, but I still want to format the file using Prettier (I just want the template strings to be treated as regular template strings rather than being formatted as HTML). In other words, I would like a way to disable the function here:

https://github.com/prettier/prettier/blob/2247ce1aab604bf1b95b3d010c08d48b003286c7/src/language-js/embed.js#L548-L565

Other than using // prettier-ignore for every single template string, I do not think there is currently any way to do this.

My use case is creating test cases for an editor extension that provides autocomplete for HTML; so I want the tests themselves to be formatted as TypeScript, but I don’t want to have Prettier format the HTML inside the template strings. Basically, something like htmlWhitespaceSensitivity: "ignore" but that only applies for template strings (I also have Vue files that I want to format).

[thorn0]

The plan is to extend the --embedded-language-formatting option and implement support for something like this:

{
  overrides: [
    {
      file: "*.js",
      options: {
        "embedded-language-formatting": [
          { comment: "js", parser: "babel" },
          { callee: "html", parser: "html" },
        ],
      },
    },
  ];
}

Also a way to specify whether these definitions are an addition to the auto behavior or a replacement for it will be needed.

First we need to decide on the format of this configuration. If anybody wants to write a proposal, it’ll be really appreciated.

[YarnSphere]

I don’t know if this has been mentioned before, but how about a generic config such as formatTaggedTemplates which receives an object mapping the tag name to the parser to use.

The default could be something like:

{
  "formatTaggedTemplates": {
    "gql": "graphql"
  }
}

This would not only allow users to disable unintended formatting but also to configure Prettier to format tagged templates with arbitrary tags, for example:

{
  "formatTaggedTemplates": {
    "ng": "angular"
  }
}

would make Prettier format a template with tag ng as Angular-specific HTML.

To disable all template formatting we would use {"formatTaggedTemplates": {}} or maybe also {"formatTaggedTemplates": false}.

As a CLI option it could be specified with prettier --formatTaggedTemplates gql=graphql,ng=angular, prettier --formatTaggedTemplates none, or something similar.

This seems like a more generic solution than the others mentioned in this thread. Thoughts?