vue.js - 如何在 VS Code 的 .vue 文件中禁用模板中特定行的 eslint 警告

Question

我想在我的 vue 文件中消除这个错误

我正在尝试添加此处理器线

<!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->

和

<!-- eslint-disable-next-line vue/no-confusing-v-for-v-if  -->

但两者都不是

也不

解除 eslint 警告

[eslint-plugin-vue] [vue/no-use-v-if-with-v-for] 'v-for' 指令中的 'value' 变量应该替换为返回过滤数组的计算属性。您不应将“v-for”与“v-if”混用。我正在使用 VSCode 的vetur扩展。

我在这个示例后面添加了前行，但 eslint 仍然警告下一行。

PS。这个解决方案不是最好的，但由于过渡动画，我需要这样的解决方案。

Answer 1

请参阅Vetur 的文档：

安装ESLint 插件以获得最佳的 linting 体验。Vetur 的模板 linting 仅用于快速入门，不支持规则配置。

所以，你必须：

1. 安装ESLint 插件

2. 启用vue插件并禁用 Vetur 的 linting（添加到 VS Code 配置）：

   "vetur.validation.template": false,
   "eslint.validate": [
     "javascript",
     "javascriptreact",
     "vue"
   ]
   

如果您没有eslint和/或eslint-plugin-vue已经安装，您应该这样做：

npm i eslint babel-eslint eslint-plugin-vue --save-dev

ESLint 的简单配置：

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": ["plugin:vue/essential", "eslint:recommended"],
  "rules": {
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

您应该将其保存到.eslintrc文件中或以package.json名称eslintConfig保存。

而且，它有效：

Answer 2

如果您真的想禁用它，请尝试以下解决方案（它适用于我）。由于您具体了解该规则，因此它不会禁用其他警告：

<!-- eslint-disable vue/no-v-html -->
<textarea
  type="email"
  name="message"
  required
  aria-required="true"
  v-html="form.inputs.name.placeholder"
/>
<!-- eslint-enable -->

Answer 3

尝试{{! template-lint-disable }}