Support text/plain template literals (dedent, outdent, etc)

[mfulton26]

I'm not sure how to deal with the various names this could be under (outdent is more recently updated but dedent has more weekly npm downloads, etc. while a better name might be txt similar to gql or plain as text/plain to accompany text/plain text/html, text/css, and text/javascript`) but I would like to be able to paste a block of text into my code within a tagged template and it be auto-indented prettily with the rest of my code.

Prettier 2.0.5 Playground link

--parser babel

Input:

{outdent`Hello

Goodbye`;}

{dedent`Hello

Goodbye`;}

{txt`Hello

Goodbye`;}

{plain`Hello

Goodbye`;}

Output:

{
  outdent`Hello

Goodbye`;
}

{
  dedent`Hello

Goodbye`;
}

{
  txt`Hello

Goodbye`;
}

{
  plain`Hello

Goodbye`;
}

Expected behavior:

{
  outdent`
    Hello

    Goodbye
  `;
}

{
  dedent`
    Hello

    Goodbye
  `;
}

{
  txt`
    Hello

    Goodbye
  `;
}

{
  plain`
    Hello

    Goodbye
  `;
}

Note: The best alternatives I've found is intentionally not having indentation (which I don't find pretty) or by transforming my text into arrays with things like join("\n") but neither of those are ideal:

{
  txt`\
Hello

Goodbye\
`;
}

{
  [
    "Hello",
    "",
    "Goodbye"
  ].join("\n")
}

I would be happy to author a text-tag (like graphql-tag) or a plain-literal (like html-literal) npm package to support a txt or plain tagged template if it would help (unless there's already one out there that I just haven't found yet).

[bakkot]

I don't think it would make sense to build this into Prettier, but we've been talking (https://github.com/prettier/prettier/issues/4424) for a long time about adding a plugin API for embedded language formatting, which you could implement this on top of.

[mfulton26]

I can understand not wanting to add everything to prettier core but txt seems as basic (if not more basic) than html and css so I was hoping to not need to go a plugin route but that does sound promising (once available)

[Skalman]

If String.dedent becomes a reality, this should definitely be implemented!

[fregante]

I would be happy to author a text-tag (like graphql-tag) or a plain-literal (like html-literal) npm package to support a txt or plain tagged template if it would help (unless there's already one out there that I just haven't found yet).

Prettier doesn't format this yet, but such package exists (I just published it)

import {any as plain} from "code-tag";

plain`
	Hello
	Goodbye
`

[dword-design]

Just found this ESLint plugin which seems to do the trick 😀 https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/template-indent.md

[Pyrolistical]

We already can get prettier for format HTML template string using /* HTML */ prefix https://prettier.io/blog/2018/11/07/1.15.0.html#html-template-literal-in-javascript

We could extend that with /* TEXT */ or heck maybe the mime-type? /* text/plain */