[SOLVED] How to use ESLint for vue template placed in separate html file

How to use ESLint for vue template placed in separate html file

Imagine you have "SFC" with template like this:

<template src="./my-separate.html"></template>
<script>/* whatever */</script>
<style>/* whatever */</style>

And imagine you have working prettier/eslint setup and you can lint any of your files with such command:

eslint --ext "*.html, *.js, *.vue, *.ts" $FilePath$ --fix --no-ignore

Which formats .vue, .js or even .ts file pretty fine, but if you use it against your separated vue-template - which is a file with .html extension, but it's actually vue template with all v-ifs and other stuff... This won't work because prettier probably trying to parse .html with incorrect parser (?) or maybe there is should be a way to suggest which parser to use for my tricky .html files?

My current configs looks like this:

// .prettier.rc

{
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true
}

// .eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'typescript-eslint-parser',
    sourceType: 'module',
    jsx: true
  },
  env: {
    browser: true
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
    'prettier/vue',
    'plugin:vue/recommended'
  ],

  plugins: [
    'typescript',
    // required to lint *.vue files
    'vue',
    'prettier'
  ]
}

And versions of some libraries used:

"babel-eslint": "8.2.6",
"eslint": "5.11.1",
"eslint-config-prettier": "3.3.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.1.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-node": "8.0.0",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-typescript": "0.14.0",
"eslint-plugin-vue": "5.0.0",

Maybe someone can give me the cue how to format with prettier/eslint .html files with vue-specific templates inside?

Currently for .html I have neither IDE errors nor autoformatting, but for everything else (.vue, .js, .ts files) it works fine.

For the command I mentioned I can see eslint uses parser-babylon and reasonably complains against the first vue-related thing, e.g. :prop binding.

UPD: from my experience if you're trying to extract vue-template to HTML you're already doing something wrong. It's a way to avoid template copy-pasting, but you actually will create N identical components with that approach (if you reuse that HTML chunk in N SFCs). So you better embrace SFC and try to make a reusable component instead of having a reusable HTML file. In that way, you won't have any issues with linting too.

Solution

The thing is that prettier goes after eslint plugin vue. Which is, according to docs This plugin allows us to check the and of .vue files with ESLint.

So linting of html not quite possible. Also please read this https://github.com/vuejs/eslint-plugin-vue/issues/490