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.

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

Already on GitHub? Sign in to your account

New html formatter #561

Closed
lbogdan opened this Issue Nov 27, 2017 · 25 comments

Comments

Projects
None yet
@lbogdan

lbogdan commented Nov 27, 2017

Hey guys!

Because js-beautify-html was driving me nuts 馃槵, I started working on a html formatter based on reshape parser. I just wanted to let you know, so that we don't duplicate our efforts.

I currently have a proof of concept, I'll setup a page shortly in which we can test it by live formatting entered html.

@octref

This comment has been minimized.

Member

octref commented Nov 27, 2017

Sounds good -- I was thinking about starting to work on it too but haven't got time.
Let's join efforts and make #491 happen 馃嵒

@lbogdan

This comment has been minimized.

lbogdan commented Nov 28, 2017

Ok, I have a version up & running here (it's on a PR build of CodeSandbox where I fixed a bug).

Let me know what you think.

@lbogdan

This comment has been minimized.

lbogdan commented Nov 29, 2017

The bug fixes were just deployed, you can play around with it here.

@octref

This comment has been minimized.

Member

octref commented Nov 29, 2017

Initial impressions:

  • You seem to be having a printWidth -- nice work!

  • I'm hoping that we use this format for long attributes

    <div
      attr="foo"
      attr="foo"
      attr="foo"
      attr="foo"
    >bar</div>
  • I hope we are more strict about formatting multiline comments. Currently only first line of the comment is formatted / indented. We can follow the same logic of formatting html tags.

    • If it can be put in the same line without exceeding printWidth, make it a one line comment
    • If it can't, format it in this way:
      <!--
        comment here all the way until `printWidth`
        next line for comment
      -->
  • We should embed a mini formatter for multi-line interpolations, such as the value of :class. We can look into using some bits from prettier (can't take it as is since vue interpolation is JS values, not JS statements)

@lbogdan

This comment has been minimized.

lbogdan commented Nov 29, 2017

Hey, @octref, thank you for your feedback!

As I said, this is just a proof of concept, to see how reshape works (fortunately, it turns out it's very simple). Before I start writing something more involved, we first need to decide on some specifications, even if very crude. I'll try to make a draft tomorrow.

Now answers to your remarks:

You seem to be having a printWidth -- nice work!

It's not really printWidth - how it works is that if an element has more than two attributes, they're arranged on subsequent lines, so it's

<div id="app"></div>

but

<div id="app"
     style="width: 100%;"
></div>

I'm hoping that we use this format for long attributes

I guess you're referring to the indentation of attributes. Right now the first one is on the same line with the element, they're all aligned, and the subsequent ones are each on a new line, and aligned with that first one. There are many variations here - first attribute on a new line, indented by one unit (like in your example) etc. Specifications should help with that.

I hope we are more strict about formatting multiline comments.

That's a bit more complicated. What if the commented text is html? We can't really reformat the lines, as we'll end up with something like

<!--
  <div><select><option value="foo">foo</option></select></div>
-->

instead of

<!--
  <div>
    <select>
      <option value="foo">foo</option>
    </select>
  </div>
-->

(and reformatting whitespace also doesn't work well)

<!--
  <div>
  <select>
  <option value="foo">foo</option>
  </select>
  </div>
-->

We should embed a mini formatter for multi-line interpolations, such as the value of :class.

We can probably use prettier, adjusting it's printWidth accordingly. The first <div :class="... in my example is a good start to explore this - notice that right now the indentation is wrong by one unit, in my opinion, it should be

<div :class="[
  type === 'textarea' ? 'el-textarea' : 'el-input',
  inputSize ? 'el-input--' + inputSize : '',
  {
    'is-disabled': disabled,
    ...
  }
]">

instead of

<div :class="[
    type === 'textarea' ? 'el-textarea' : 'el-input',
    inputSize ? 'el-input--' + inputSize : '',
    {
      'is-disabled': disabled,
      ...
    }
  ]">

I'll come back with the specifications draft and a lot more good / bad examples.

@octref

This comment has been minimized.

Member

octref commented Nov 30, 2017

I'd want to use prettier for each part of Vue, so I think a printWidth makes sense. This way it also aligns with existing prettier config.

I'd say for multi-line comments, all I care is

  • <!-- and --> have same indentation
  • The body of the comment starts at one more indentation than the <!--.

We should not try to do any formatting for the content. It can be html or any other thing.
Forget about the multi-line comment -> single-line comment idea.

@lbogdan

This comment has been minimized.

lbogdan commented Nov 30, 2017

I created a new repo and started drafting some specifications (more like a brain dump, really, so don't expect much). You can find them here:

@octref

This comment has been minimized.

Member

octref commented Dec 8, 2017

I'd suggest not to bogged down by with spec. If you want to put the code somewhere I can help. Otherwise I'll jus take a look at Reshape and do it myself as I originally planned.

My thought is simple -- making it work for this single use-case (template in Vue), and making it good, opinionated and embeddable.

@lbogdan

This comment has been minimized.

lbogdan commented Dec 8, 2017

Agreed, I'll update the CodeSandbox shortly with what I have so far, and let you know.

@lbogdan

This comment has been minimized.

lbogdan commented Dec 10, 2017

New version: https://codesandbox.io/s/qzvxvmk6v6?view=preview . Play around with it and let me know what you think.

@octref

This comment has been minimized.

Member

octref commented Dec 11, 2017

Instead of putting it on codesandbox, I'd prefer if we can have a repo with unit tests set up so we can keep working together on it.

@lbogdan

This comment has been minimized.

lbogdan commented Dec 11, 2017

Yes, of course, that was only a proof-of-concept to be able to test different inputs. It needs a major refactor and unit tests, of course. I'll try to set this up in a day or two.

@octref

This comment has been minimized.

Member

octref commented Dec 11, 2017

Was playing around with it -- it's pretty good! There are a few edge cases that should be handled, but once you have the unit-tests setup we can go from there.

@octref

This comment has been minimized.

Member

octref commented Dec 11, 2017

And once we have the repo we can host it on codesandbox, so people can try it and report bugs.

@johnpyp

This comment has been minimized.

johnpyp commented Feb 3, 2018

Any report on the progress with this? Html formatting will be awesome!

@wolfstark

This comment has been minimized.

wolfstark commented Feb 6, 2018

I can't wait. When will it be released?

@onelifenyc

This comment has been minimized.

onelifenyc commented Feb 6, 2018

Just for the record - I was able to get a decent html formatting in .vue SFC with the current ( to be retired js-beautify-html ?) and to avoid the conflict with prettier extension I've disabled it for .vue files and enabled js-beautify-html for vetur:

"prettier.disableLanguages": ["vue"], "vetur.format.defaultFormatter.html": "js-beautify-html", // Options for all default formatters "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }

However, I wanted to report that the formatter breaks as soon as a Diff is opened in vscode - forcing me to restart the app to get the formatting to work. I don't know if it is vetur or js-beautify at fault here but just wanted to bring it to your attention.

@octref octref added the help wanted label Feb 6, 2018

@octref

This comment has been minimized.

Member

octref commented Feb 6, 2018

@onelifenyc Can you use https://www.cockos.com/licecap/ to record a gif and open a new issue? Thanks.

@Hal-pan

This comment has been minimized.

Hal-pan commented Feb 8, 2018

35550112-f538b816-05c3-11e8-96b8-e69a18a1b055
html No formatting

config

 "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },

@onelifenyc onelifenyc referenced this issue Feb 14, 2018

Open

Formatting fails after diff #694

3 of 3 tasks complete
@adi518

This comment has been minimized.

adi518 commented Apr 15, 2018

How is it going? you need help? I got fed up with js-beautify, which I'm still forced to use just to have a least of coherency in my html. It's about time.

@mmusket

This comment has been minimized.

mmusket commented May 24, 2018

Bumping this thread. What is the current state of the issue. Would love to help if possible.

@StefanFeederle

This comment has been minimized.

StefanFeederle commented May 24, 2018

I think everyone is waiting for prettier to support HTML formatting.
If you want to help you might check this out:
prettier/prettier#1882

@qiming-kooboo

This comment has been minimized.

qiming-kooboo commented Jun 22, 2018

any update for this?
everyone needs this.

This was referenced Aug 13, 2018

@StarpTech

This comment has been minimized.

Contributor

StarpTech commented Sep 9, 2018

@adi518 @mmusket @StefanFeederle @qiming-kooboo there is progress in #491. I proposed my project https://github.com/Prettyhtml/prettyhtml which works really great and @octref has plans to integrate it into vetur. @StefanFeederle prettier is far ahead e.g they only support strict HTML5 (without custom self-closing elements, browser attribute encoding which breaks most template languages etc..)

It would be great if you could test https://github.com/Prettyhtml/prettyhtml and provide some feedback. Please consider prettyhtml at first as a general formatter. We will deal with framework specific things later. Thanks.

octref added a commit that referenced this issue Sep 25, 2018

@octref octref closed this in 6e87828 Oct 3, 2018

octref added a commit that referenced this issue Oct 3, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment