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

Lint .html templates #490

Closed
viktor-ku opened this issue Jun 5, 2018 · 10 comments
Closed

Lint .html templates #490

viktor-ku opened this issue Jun 5, 2018 · 10 comments

Comments

@viktor-ku
Copy link

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
Copy link

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

@zfeher
Copy link

zfeher commented Jun 13, 2018

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
Copy link
Author

@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
Copy link

zfeher commented Jun 13, 2018

Nice trick, thanks.

@michalsnik
Copy link
Member

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
Copy link

zfeher commented Jul 17, 2018

Thank you for the update.

@michalsnik
Copy link
Member

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
Copy link

zfeher commented Oct 20, 2018

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
Copy link

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

<v-app-bar color="light-blue darken-4" dense fixed>
  <v-btn color="white" text @click="toTasks">Tasks</v-btn>
  <v-spacer></v-spacer>
  <v-icon large color="white">account_box</v-icon>
</v-app-bar>

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

{
  "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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants