如何将 ESLint 用于放置在单独 html 文件中的 vue 模板

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绑定。

UPD： 根据我的经验，如果你试图将 vue-template 提取到 HTML 你已经做错了。这是一种避免模板复制粘贴的方法，但实际上您将使用该方法创建 N 个相同的组件（如果您在 N 个 SFC 中重用 HTML 块）。所以你最好拥抱 SFC 并尝试制作一个可重用的组件，而不是拥有一个可重用的 HTML 文件。这样，您也不会有任何 linting 问题。

Answer 1

问题是 prettier 是在 eslint 插件 vue 之后。也就是说，根据文档这个插件允许我们使用 ESLint 检查 .vue 文件的和。

所以 html 的 linting 不太可能。另请阅读此 https://github.com/vuejs/eslint-plugin-vue/issues/490

如何将 ESLint 用于放置在单独 html 文件中的 vue 模板

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

tooling

eslint

vue.js

prettier