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.

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

Add pug support for vue templates #29

Open
Alendorff opened this issue Jul 15, 2018 · 10 comments

Comments

@Alendorff
Copy link

commented Jul 15, 2018

Hello, it is very desired feature to have in eslint-plugin-vue, but they relay on this lib to parse things. So I just wanted to ask if there are any plans to add pug support?

Original issue: vuejs/eslint-plugin-vue#310

@mysticatea

This comment has been minimized.

Copy link
Owner

commented Jul 16, 2018

Thank you for this issue.

Yes, it will be good if this parser can parse pug.

But I don't have knowledge about pug syntax and semantics, so I don't have enough time to implement it for now.

PR is welcome.
It should parse pug and generate this AST.

@lehni

This comment has been minimized.

Copy link

commented Oct 10, 2018

@mysticatea I've started looking into this, and have found https://github.com/pugjs/pug-lint which could be a good starting point:

Internally it uses pug-lexer, which does all the parsing, and already outputs a type of AST. Maybe it won't be all that hard to translate this AST into the form that vue-eslint-parser requires?

@mysticatea

This comment has been minimized.

Copy link
Owner

commented Oct 10, 2018

@lehni Thank you!

You are right. That pug-lexer looks good starting point.
I image the steps are below:

  1. Parse the inside of <template lang="pug"> with pug-lexer.
  2. Convert the result of the parse to our AST. Note some parts such as expression containers, directives, etc, should be re-parsed as JavaScript.
  3. Extract tokens from the result of the parse. For example, div(data-foo="bar") may be the sequence of div ( data-foo = "bar" ). (Tokens are separated at the places we can add spaces freely without semantic changes.) Store the tokens to ast.templateBody.tokens.
  4. Extract comments from the result of the parse. Store the comments to ast.templateBody.comments.
@lehni

This comment has been minimized.

Copy link

commented Oct 12, 2018

@mysticatea thank you for the detailed description! Could you point me to the part in the parser code that does this for HTML?

@mysticatea

This comment has been minimized.

Copy link
Owner

commented Oct 15, 2018

@ppsirius

This comment has been minimized.

Copy link

commented Dec 13, 2018

Anyone working on it maybe?

@lehni

This comment has been minimized.

Copy link

commented Dec 13, 2018

Unfortunately I don't have the time to do so at the moment

@armano2

This comment has been minimized.

Copy link
Contributor

commented Dec 13, 2018

@ppsirius @lehni some time ago there was some work on it by @leo-buneev
leo-buneev/vue-eslint-parser@de3fe7f...master

@leo-buneev

This comment has been minimized.

Copy link

commented Dec 14, 2018

I have abandoned this project.

If anyone will continue, beware, pug-lexer returns a little bit different format of tokens, and doesn't provide all necessary data - some hacking done by me here is useful to return consistent data from pug-lexer.

My idea was to return HTML syntax tree that is equivalent to PUG source code (so existing vue-eslint-plugin rules do not need reimplementation), but with different character indexes (corresponding to pug code). It was coming along nicely, but still far from finishing.

We've moved our projects to html since (https://github.com/leo-buneev/pug-to-html). Curiously, it increased character count only by 3.8% - much less than I expected. Pug has more drawbacks than benefits, imho -

Benefits:

  • 3.8% less characters
  • Less syntax noise

Drawbacks:

  • Pug creates problems for junior team members (they have hard time understanding why it's not html, and even harder time putting correct amount of spaces to nest elements)
  • You need to switch mentally between coding (Pug) and inspecting in devtools (HTML)
  • Worse IDE support
  • vue-eslint-plugin doesn't work yet
@tats-u

This comment has been minimized.

Copy link

commented Aug 18, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.