Eslint-plugin-vue: Lint .html templates

[viktor-ku]

Hi,

How can I help to make this plugin support .html files that I am using for templates. That is possible with vue-template-loader.

Very similar issue #489 was created recently and maybe it is the same but I don't know for sure since I don't want to have .vue file at all.

Thanks

[abeMedia]

I have the feeling this needs to happen upstream on https://github.com/mysticatea/vue-eslint-parser

[zfeher]

Hi'

We also need support for this scenario. We are recently migrated our code base from Vue 1 to Vue 2 and we created simple vue files like this for now:

<!-- component.vue -->

<template src="./template.html"></template>
<style src="./style.scss"></style>
<script src="./index.js"></script>

This works well. But eslint vue plugin won't check the referenced template.html nor the index.js.
The latter can be fixed though via adding the // @vue/component comment above the component definition. Maybe the same can be done with templates as well eg:

<!-- template.html -->

<!-- @vue/component -->
<div>
  your template
</div>

If this could be supported that would be really helpful.

The best option would be (if possible) to check vue files _as is_ no matter if it uses references or the content defined there.

[viktor-ku]

@zfeher you can change .js to .jsx for your components and then you won't need to add // @vue/component. I am using it.

[zfeher]

Nice trick, thanks.

[michalsnik]

Hey! Unfortunately currently we don't support it, I opened issue in vue-eslint-parser however to see if we can allow parsing plain HTML in addition to SFC

[zfeher]

Thank you for the update.

[michalsnik]

Sorry guys, but due to technological concerns and potential problems discovered in here we have to postpone this request indefinitely, thus I'm going to close this issue for now.

[zfeher]

No problem, thanks for considering it in the first place.

Hopefully we will be able to upgrade to .vue files this year and new stuff could be written in .vue files. Old stuff will be wired via links into .vue files at first then they will be refactored later incrementally as we need to touch them. And hopefully one day we will have full linting in our codebase.

[RyochanUedasan]

I'm using vue-cli-service and able to lint .html (like below) templates.

```index.html

Tasks

account_box

To add parser options for `.html` files in prettier configuration, you can format `.html` files.

```.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

if you use vue-cli-service lint, add --ext option like vue-cli-service lint --ext .js,.jsx,.ts,.tsx,.vue,.html and you can lint them.

Is this a good way to do that?

[goatandsheep]

@RyochanUedasan this is misleading. I get the error Property options is not allowed.