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.
