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

Feature request: Ability to disable XML/HTML/vue template formatting. #5661

Open
Xotic750 opened this issue Dec 19, 2018 · 13 comments
Open

Feature request: Ability to disable XML/HTML/vue template formatting. #5661

Xotic750 opened this issue Dec 19, 2018 · 13 comments
Labels
lang:vue Issues affecting Vue status:needs discussion Issues needing discussion and a decision to be made before action can be taken

Comments

@Xotic750
Copy link

We have been very happy with Prettier and have accepted the formatting of our Javascript and Less, with a little friction at first. We are using 1.14.3. As of 1.15 and the introduction of the Vue formatting, we have been unable to keep up with the current releases of Prettier due to white space changes and attribute formatting, to mention a couple. We would like to continue with Prettier, and keep up to date with the releases that bring fixes. So I would like to make a request to have an option to disable just the newest template formatting (we would prefer not to add ignore comments in hundreds of production files), so we could continue with the results we have achieved with 1.14. Hopefully we can accept some of the changes (indenting) and implement them, and for others I hope that a solution will become available to allow us to follow the recommendations of the Vue styling guide (e.g. component attributes). Thank you for your time and consideration.
@lydell
Copy link
Member

lydell commented Dec 19, 2018

Hi! Why don't you want to format the template parts of Vue? I assume that something didn't look good to you? Wouldn't you be more interested in fixing those bad cases instead?

@lydell lydell added the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Dec 19, 2018
@Xotic750
Copy link
Author

Xotic750 commented Dec 20, 2018 •
edited

Hi!

Yes, I hope we can fix/improve the "bad" cases, or cases our team feel most friction towards. (attributes)
#5467
#3101 (comment)
#5501

Then there are some cases that our team will accept and implement in due process. (indenting)
#5574

And we have a need to keep up with fixes to the core (meaning js and less as per 1.14, prior to Vue formatting). (bug)
#5653

We do need a way to be able to control changes within our product, it is not acceptable for us to flip back and forth and so would prefer to wait until things are stabilised (w.r.t. Vue formatting).

I would have suggested more targeted end user options, but I know that being opinionated means that options are not highly desirable or accepted (from a Prettier perspective). This single option seemed as though it would be the most acceptable (prettier) and least disturbing (end usage).

I'm open to other ideas as to how we can accomplish things.

@no-response no-response bot removed the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Dec 20, 2018
@lydell lydell added status:needs discussion Issues needing discussion and a decision to be made before action can be taken lang:vue Issues affecting Vue labels Dec 20, 2018
@lepture
Copy link

lepture commented Apr 2, 2019

This is the reason I'm still using @vue/cli-service 3.3.1

@aparajita
Copy link

@lydell We're in the same boat, stuck on 1.14 until #5467 -> #3101 is fixed.

@meteorlxy
Copy link

demo

I just made a demo plugin to make prettier only process the <script> block of .vue files.

See eslint-plugin-prettier-vue.

@aparajita
Copy link

@meteorlxy You rule! 🚀🔥

@Xotic750
Copy link
Author

Xotic750 commented Aug 21, 2019 •
edited

Great effort there @meteorlxy but that's more change than is desired in our projects. If I understand the code correctly, what I am asking for is an option to do the equivalent of commenting out template in the following code. I believe that is all that is needed?

src/language-html/utils.js

  // top-level elements (excluding <template>, <style> and <script>) in Vue SFC are considered custom block
  // custom blocks can be written in other languages so we should preserve them to not break the code
  if (
    options.parser === "vue" &&
    node.type === "element" &&
    node.parent.type === "root" &&
    [
      // "template",
      "style",
      "script",
      // vue parser can be used for vue dom template as well, so we should still format top-level <html>
      "html"
    ].indexOf(node.fullName) === -1
  ) {
    return true;
  }

@towry
Copy link

towry commented Mar 25, 2020 •
edited

@lydell Here is a case that prettier shouldn't format the html part of Vue.

Screen Shot 2020-03-25 at 2 06 23 PM

The issue: new line can cause a different/broken style !

The css:

white-space: pre-wrap;

If I use prettier to change some old code, such bug happens.

@lydell
Copy link
Member

lydell commented Mar 25, 2020

@towry I think you’re looking for the HTML Whitespace Sensitivity option.

@towry
Copy link

towry commented Mar 25, 2020

@lydell You are right! Thanks.

@InsightAdimn
Copy link

I have been really stressing over prettier and vue. It has taken me hours and hours to try and fix this issue. It was not easy until I found Jon Gallant's method here

@ffxsam
Copy link

ffxsam commented Aug 12, 2020

Another vote to have the option for Prettier to ignore Vue <template> blocks. Prettier doesn't understand the Vue style guide rules (in eslint-plugin-vue) and messes up the formatting.

@aparajita
Copy link

@ffxsam Use eslint-plugin-prettier-vue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
lang:vue Issues affecting Vue status:needs discussion Issues needing discussion and a decision to be made before action can be taken
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@aparajita @Xotic750 @lepture @lydell @towry @ffxsam @meteorlxy @InsightAdimn