Как использовать ESLint для шаблона VUE, помещенного в отдельный HTML-файл

Question

Представьте, что у вас есть "SFC" с таким шаблоном:

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

И представьте, что у вас есть рабочая установка prettier / eslint, и вы можете скопировать любой из ваших файлов с помощью следующей команды:

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

Какие форматы.vue, .js или даже.ts файл довольно хорошо, но если вы используете его против вашего отдельного шаблона vue - который является файлом с расширением.html, но на самом деле это шаблон vue со всеми v-ifs и другие вещи... Это не сработает, потому что, вероятно, красивее, вероятно, пытается разобрать.html с неправильным парсером (?) или, может быть, должен быть способ предложить какой парсер использовать для моих хитрых файлов.html?

Мои текущие конфиги выглядят так:

// .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'
  ]
}

И использовались версии некоторых библиотек:

"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",

Может быть, кто-то может дать мне подсказку, как форматировать файлы prettier / eslint.html с помощью шаблонов vue внутри?

В настоящее время для.html у меня нет ни ошибок IDE, ни автоформатирования, но для всего остального (файлы.vue, .js, .ts) он работает нормально.

Для команды, которую я упомянул, я вижу, что использует eslint parser-babylon и обоснованно жалуется на первую вещь, связанную с VUE, например, :prop связывание.

Answer 1

Дело в том, что красивее идет после того, как плагин eslint vue. Что, согласно документации Этот плагин позволяет нам проверять и.vue файлы с ESLint.

Так что подкладка html не совсем возможна. Также, пожалуйста, прочитайте это https://github.com/vuejs/eslint-plugin-vue/issues/490