如何在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 仍然警告下一行。

附注：这个解决方案并不是最佳的，但是由于转换动画的原因，我需要它是这样的。

- Daniel Santos

---

你是否在使用最新版本的工具？我在这里阅读到，这个规则最近被引入，作为被废弃的vue/no-confusing-v-for-v-if的替代。链接地址为：https://eslint.vuejs.org/rules/no-confusing-v-for-v-if.html。 - P3trur0

为什么不像警告建议的那样使用计算属性来过滤列表呢？您还可以拆分指令，并将v-if放在template标记中以分离这两个部分。 - Husam Ibrahim

请展示你的.eslintrc文件。 - Styx

Answer 1

请参考 Vetur文档：

为了获得最佳的代码检测体验，请安装ESLint插件。 Vetur的模板检测仅适用于快速开始，不支持规则配置。

所以，您需要执行以下操作：

1. 安装ESLint插件

2. 启用vue插件并禁用Vetur的检测（添加到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名称下。

同时，它也是有效的：

- Styx

---

我已经准备好了所有这些，并发现我没有授权给VSCode使用我的ESLint/ESLint配置。 - Jeff Bluemel

@MichaelCole 请单独提出您的问题。对于OP的情况，它确实起作用了。 - Styx

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

- Picard

Answer 3

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

- Kunwar Babu