Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Range Ignore Support in HTML #5508

Open
donaldpipowitch opened this issue Nov 20, 2018 · 6 comments · May be fixed by #6693
Open

Range Ignore Support in HTML #5508

donaldpipowitch opened this issue Nov 20, 2018 · 6 comments · May be fixed by #6693
Labels
area:ignore .prettierignore file, --ignore-path CLI option, /* prettier-ignore */ comments and so on area:ranges Issues about formatting/ignoring/etc segments of files help wanted We're a small group who can't get to every issue promptly. We’d appreciate help fixing this issue! lang:html Issues affecting HTML (and SVG but not JSX) type:enhancement A potential new feature to be added, or an improvement to how we print something

Comments

@donaldpipowitch
Copy link

Prettier 1.15.2
Playground link

--parser html

Input:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <!-- prettier-ignore-start -->
  <%
    // - copies _all_ stage-specific configs from `./config/*.js` into the bundle,
    //   but only `./config/config.js` will be loaded
    // - by default we rename `config.local.js` to `config.js` for development,
    //   but on deployment to a specific stage the corresponding config will be renamed to `config.js`
    // - if you want to use a different config for local development pass `-e STAGE={stage-name}` to `yarn build`/`yarn watch`
    require.context('!copy-loader!./config/', true, /^\.\/.*\.js$/);
    require('!file-loader?name=./config/config.js!./config/config.local.js')
  %>
  <!-- prettier-ignore-end -->
  <script src="/v2/config/config<%= process.env.STAGE ? '.' + process.env.STAGE : '' %>.js"></script>
</body>
</html>

Output:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <!-- prettier-ignore-start -->
    <% // - copies _all_ stage-specific configs from `./config/*.js` into the
    bundle, // but only `./config/config.js` will be loaded // - by default we
    rename `config.local.js` to `config.js` for development, // but on
    deployment to a specific stage the corresponding config will be renamed to
    `config.js` // - if you want to use a different config for local development
    pass `-e STAGE={stage-name}` to `yarn build`/`yarn watch`
    require.context('!copy-loader!./config/', true, /^\.\/.*\.js$/);
    require('!file-loader?name=./config/config.js!./config/config.local.js') %>
    <!-- prettier-ignore-end -->
    <script src="/v2/config/config<%= process.env.STAGE ? '.' + process.env.STAGE : '' %>.js"></script>
  </body>
</html>

Expected behavior:

Keep Input.

Now that HTML support has landed in Prettier it would be nice, if we could use range ignore for the same reasons it is supported in Markdown.

💡 The best solution for the example above would be, if underscore templates could be treated as JavaScript, but range ignore would be a great start to mix HTML with several other templating flavors.
@j-f1 j-f1 added help wanted We're a small group who can't get to every issue promptly. We’d appreciate help fixing this issue! lang:html Issues affecting HTML (and SVG but not JSX) type:enhancement A potential new feature to be added, or an improvement to how we print something labels Nov 20, 2018
@jimmyhoran
Copy link

Anyone currently working on this? If not I'm happy to pick this up.

@lydell
Copy link
Member

lydell commented Jan 28, 2019

@jimmyhoran It's up for grabs, go ahead! 👍

voithos added a commit to voithos/prettier that referenced this issue Oct 22, 2019
@voithos
Add range ignore support for html languages.
4a773cb 
This adds support for the prettier-ignore-start and prettier-ignore-end
comment markers in html based languages, allowing prettier to preserve
existing formatting of multi-element sections of code.

Fixes prettier#5508.
@voithos voithos linked a pull request Oct 22, 2019 that will close this issue
Open
4 tasks
voithos added a commit to voithos/prettier that referenced this issue Oct 22, 2019
@voithos
Add range ignore support for html languages.
04e73bf 
This adds support for the prettier-ignore-start and prettier-ignore-end
comment markers in html based languages, allowing prettier to preserve
existing formatting of multi-element sections of code.

Fixes prettier#5508.
voithos added a commit to voithos/prettier that referenced this issue Oct 23, 2019
@voithos
Add range ignore support for html languages.
ba7821b 
This adds support for the prettier-ignore-start and prettier-ignore-end
comment markers in html based languages, allowing prettier to preserve
existing formatting of multi-element sections of code.

Fixes prettier#5508.
@Walther Walther mentioned this issue Nov 9, 2019
Closed
@thorn0 thorn0 added the area:ranges Issues about formatting/ignoring/etc segments of files label Nov 23, 2019
@alexander-akait alexander-akait mentioned this issue Mar 3, 2020
Closed
@alanorozco alanorozco mentioned this issue Mar 12, 2020
Open
@alanorozco
Copy link

👋

Alan here from ampproject/amphtml.

We'd like to use prettier for HTML. This feature would allow us to use it in our repository, like we already do for most file types.

I've made a comment on the attached pull request for context. We'd love to help.

@thorn0 thorn0 added the area:ignore .prettierignore file, --ignore-path CLI option, /* prettier-ignore */ comments and so on label May 6, 2020
@philiprenich
Copy link

Would love to see this implemented. HTML gets used in various places and templating tools where formatting everything may not be appropriate.

One use case I have is Eleventy's HTML templates. They use YAML frontmatter to set up data for the engine. That YAML formatting will be broken by the HTML formatter. While the best solution here is probably a plugin specific to Eleventy's style, this sort of thing isn't too uncommon in a generalised way so being able to throw in a range ignore where no plugin exists would be great.

Hopefully someone with Prettier knowledge can pick up #6693 ! Wish I had the knowledge to finish that PR :/

@rootwork
Copy link

rootwork commented Sep 2, 2021

YAML frontmatter and HTML is an issue for other static site generators as well: Jekyll, Middleman, Assemble, and probably others.

Prettier supports range-ignore in Markdown files, which is great for SSGs like VuePress, Hugo, etc. But for the same reason it should support range-ignore in HTML files.

@thorn0 thorn0 mentioned this issue Jun 15, 2022
Closed
@fhughes90
Copy link

any updates on this feature?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area:ignore .prettierignore file, --ignore-path CLI option, /* prettier-ignore */ comments and so on area:ranges Issues about formatting/ignoring/etc segments of files help wanted We're a small group who can't get to every issue promptly. We’d appreciate help fixing this issue! lang:html Issues affecting HTML (and SVG but not JSX) type:enhancement A potential new feature to be added, or an improvement to how we print something
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add range ignore support for html languages. voithos/prettier
9 participants
@rootwork @thorn0 @alanorozco @philiprenich @donaldpipowitch @lydell @jimmyhoran @j-f1 @fhughes90