vuejs/vue-eslint-parser

Enhancement: Support parsing plain HTML

michalsnik opened this issue · 9 comments

michalsnik commented

I see that some people are using external files with vue templates only. We have an open issue regarding this topic here: vuejs/eslint-plugin-vue#490

Would it be possible to support parsing plain HTML in addition to SFC?

mysticatea commented

Thank you for this issue.

Hmm, I'm thinking. This parser doesn't support whole HTML spec. For example, this doesn't parse <script> tags in the template properly as different from eslint-plugin-html. It's hard to distinguish between a normal HTML file and a Vue.js template HTML file. eslint-plugin-vue needs a preprocessor, so I have a concern that HTML supports will break if someone is checking normal HTML files with another plugin because ESLint cannot use multiple preprocessors for each extension.

michalsnik commented

We could make it an optional rule, and let's say require templates to have .vue.html suffix in order to be parsed and checked against. Also we already mention that our plugin doesn't work with eslint-plugin-html, so it shouldn't be a problem in my opinion.

We have plenty of useful rules, and there is also a great eslint-plugin-vue-a11y, that people could also take advantage of if this parser would support parsing html files :)

It doesn't have to support whole HTML spec. What it supports at this moment should be perfect. I wouldn't bother about <script> tags in plain HTML. JS is to be used outside of the .html templates anyway :)

zfeher commented

Adding a <!-- @vue/component --> in the template.html isn't on option here? Similar to how the components handled in separate js files.

mysticatea commented

We could make it an optional rule

We cannot make plugin preprocessors optional.

let's say require templates to have .vue.html suffix in order to be parsed and checked against.

I guess that this solution cannot avoid the confliction between eslint-plugin-vue and eslint-plugin-html. Because .vue.html ends with .html, so eslint-plugin-html should unwrap script tags in .vue.html files.

Also we already mention that our plugin doesn't work with eslint-plugin-html, so it shouldn't be a problem in my opinion.

We can use those together. I can check .vue files with eslint-plugin-vue and the script tags of .html files with eslint-plugin-html. I'm not glad if this use case is broken.

Adding a in the template.html isn't on option here? Similar to how the components handled in separate js files.

We cannot check the HTML comment because this is a parsing matter. We have to distinguish it before parsing files.

tfoxy commented

eslint-plugin-html should unwrap script tags in .vue.html files.

There shouldn't be a reason to add <script> tags to the .vue.html files. It would be like adding <script> tags inside <template>.
So eslint-plugin-html would parse the .vue.html, but it wouldn't lint anything.

mysticatea commented

@tfoxy It's a confliction matter. Both vue and html plugins handle the same file, then both plugins will get unexpected results.

yulianovdey commented

Is there really no way to get this to work? I'm not using eslint-plugin-html, which doesn't seem necessary for a Vue project. For a moment I thought src imports were just a hack, but they appear to be part of the SFC Spec. It would be really nice if everything behaved the same way if someone moved from a regular SFC to using imports.

  • 👍1
PerpetualWar commented

Any idea how I could lint .html files if they are just sourced by .vue files ?

Inzeppelin commented

Any idea how I could lint .html files if they are just sourced by .vue files ?

Well, looks like I have kinda hacky idea. Here is my-component.vue file:

<script lang="js" src="./my-component.js" />
<template lang="html" src="./my-component.html.vue" />

As you can see, template extension is .vue now. So lint works fine. This doesn't affect compiling process since loader doesn't care about files extensions.

Can confirm that most of rules work as expected, e.g. vue/attributes-order, vue/multiline-html-element-content-newline, etc.

Important note: your template should be wrapped into <template> tag.

<template>
  <div>
     ...
  </div>
</template>

Still not sure if it can be recommended to use safely, hope @mysticatea can leave a comment like an expert.

  • 👍3