prettier / prettier/prettier

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

Open
#8,207 6 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:multiparser area:template literals lang:javascript status:needs discussion
Dominant language
JavaScript
Stars
52.3k
Forks
5k
Avg merge
19h 2m
Merged PRs (30d)
117

Description

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).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Prettier Playground example using the Babel parser and compare the current output with the requested indentation for tagged template literals. Clarify which tag name or text/plain syntax is in scope, then use the example cases as the completion check for the chosen behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.