Add pug support for vue templates

[maksnester]

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]

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]

@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]

@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]

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

[mysticatea]

• Making AST nodes and tokens is in https://github.com/mysticatea/vue-eslint-parser/tree/da877ec63b2314e6ee0e9f7df9b4e4aa3b359bc5/src/html.
• Re-parsing for Vue.js directives is in https://github.com/mysticatea/vue-eslint-parser/blob/da877ec63b2314e6ee0e9f7df9b4e4aa3b359bc5/src/html/parser.ts#L386-L398
• Re-parsing for mustaches (e.g. {{foo}}) is https://github.com/mysticatea/vue-eslint-parser/blob/da877ec63b2314e6ee0e9f7df9b4e4aa3b359bc5/src/html/parser.ts#L555

[ppsirius]

Anyone working on it maybe?

[lehni]

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

[armano2]

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

[leo-buneev]

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]

Why don't you use https://github.com/myfreeweb/eslint-plugin-pug ?