Atom-beautify: Add Pug (formerly Jade) support

[jerone]

Would be great if atom-beautify supported Jade template language. :+1:

:x: Unsupported language for grammar 'Jade'.

[jonadeline]

+1

[scarnago]

I love this atom plugin, but I need Jade template language support

+1

[mez]

I was just going to suggest this!

[Glavin001]

@prettydiff is this something Prettydiff could support? I have not found another yet.

[prettydiff]

No, this one will not be supported by Pretty Diff. I used Jade before and it is a fantastic idea to write HTML faster, but unfortunately it is white-space and grammar based instead of syntax based. There is nothing in Pretty Diff to accommodate this language without writing a new parser from scratch.

[Glavin001]

Makes sense. I believe there was a “pretty” option in Node.js’ Jade package, I’ll look into that later. Thanks.

On Mar 16, 2015, at 2:07 PM, Austin Cheney [email protected] wrote:

No, this one will not be supported by Pretty Diff. I used Jade before and it is a fantastic idea to write HTML faster, but unfortunately it is white-space and grammar based instead of syntax based. There is nothing in Pretty Diff to accommodate this language without writing a new parser from scratch.

—
Reply to this email directly or view it on GitHub https://github.com/Glavin001/atom-beautify/issues/199#issuecomment-81813117.

[jerone]

@Glavin001 commented on 16 mrt. 2015 18:08 CET:

Makes sense. I believe there was a “pretty” option in Node.js’ Jade package, I’ll look into that later. Thanks.

The pretty option from Jade is only to prettify the generated HTML (newlines & indentation), not the jade files themselves.

[josh-egan]

+1 for adding Jade support :smiley:

[Evrei]

+1 plz need Jade support!

[Glavin001]

I currently do not know of any beautifiers that handle Jade. If you know of one let me know. Thanks.

[GuidoS]

+1 plz

[Glavin001]

Could users provide with some small examples of input and expected beautifier outputs? I cannot find a beautifier to support Jade however maybe one could be made for the specific usage that each of you users needs. A lot of posts I am finding about Jade beautification / formatter state simply that since it is a whitespace based language it should implicitly be formatted correctly, by the user. So providing some clear examples to me would help me fine tune exactly what needs to be done. Thanks!

[pjbrow]

+1 from me too, and good point @Glavin001 - I've been waiting for someone to say this. I think what everyone has in mind would do a lot less than a beautifier for JS or HTML. Here's an example I come across quite often that I'd use it for.

Input: Excess tabs - you might have deleted something in between.

div.first-div
        div.first-sub-div
            p First paragraph
        div.second-sub-div

Output: Excess tabs gone.

div.first-div
    div.first-sub-div
        p First paragraph
    div.second-sub-div

[jerone]

I can think of the following actions a beautifier could solve (maybe some are more linters):

• As @pjbrow mentions, indention alignment is one that a beautifier could solve.
• As JetBrains mentions, tabs to spaces and visa versa.
• Omit the div element when it has a class or id.
• Force/remove comma's , between attributes.
• Force/remove spaces between attributes.
• For negated conditions use unless.
• Use basic pattern for clean escaped string interpolation, e.g. div= value instead of div #{value}.
• Force space after basic escaped string interpolation, e.g. div= value instead of div=value.
• Use block expansion for simple nested tags.
• Self closing tags.
• Format multiple places where normal JS is allowed.
• Trailing whitespaces.

_{_Edited 15 January 2016_}

[prettydiff]

@jerone could you provide an example of negated condition syntax, self closing tags?

You likely would not get the 4th and 5th bullet points from a beautifier. Software would not be intelligent enough to know where a code author makes mistakes in opposition to their intentions. At that point the code should be allowed to be broken and the code author should test it and fix it accordingly. A beautifier attempting to make this decision will always be wrong at some point.

[myrtleTree33]

+1

[vingorius]

+1

[vingorius]

Another Jade Beautify

I made a tiny 'jade beautify' for myself.
Everyone can install it, just search 'jade beautify'.
and welcome feedback.

Source: https://github.com/vingorius/jade-beautify

Enjoy jade.

[Glavin001]

@vingorius: Awesome! Would you be interested in:

• creating / publishing a modular Node.js package, such that jade-beautify could be a reusable package for Node.js that others could use and contribute to.
• submitting a Pull Request to Atom Beautify to add your Jade Beautify as the Jade beautifier. See docs: https://github.com/Glavin001/atom-beautify/blob/master/docs/add-languages-and-beautifiers.md#how-to-add-a-beautifier-for-a-language

Great work! Thanks.

[vingorius]

@Glavin001 Thanks for your suggest. I'll check.

[ryanpcmcquen]

+1, @vingorius let me know if I can help in any way!

[vingorius]

Thanks @ryanpcmcquen .
I had checked atom-beautify. it was too huge to understand as a beginner of coffeescript.

If you can help me, it's very appreciated.

[jaseeey]

+1, I would love to see this integrated into this package, then it would be complete for me!

[pauljakobwhite]

+1

[danielbayley]

+1.

[ThorstenHans]

keep me posted (or short +1)

[jonreader]

+1

[Glavin001]

If someone could publish to npm a jade beautify package that Atom Beautify could use then I could quickly add support for this by following the instructions found at https://github.com/Glavin001/atom-beautify/blob/master/docs/add-languages-and-beautifiers.md#how-to-add-a-beautifier-for-a-language .
/cc @vingorius

[Glavin001]

Jade is changing its name to Pug: https://github.com/pugjs/jade/issues/2184

[ErikBoesen]

+1

[Glavin001]

I will be adding Jade support this weekend, thanks to @vingorius! If someone would like to create a Pull Request adding support, the package can be found at https://github.com/vingorius/pug-beautify and let me know if you need any help. Thanks!

[cgdeboer]

@Glavin001 is there an update on this. I would be a huge fan of atom-beautify supporting pug(jade).

[Glavin001]

I haven't had a chance to finish adding Jade support. However, I have moved this back to v0.29.0 milestone, so I want it to be in the next release. :+1:

[Glavin001]

Published to v0.28.28

[cgdeboer]

Thanks. This is great !