如何禁用 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] The 'value' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'. I'm using the vetur extension for VSCode.

我在 this 示例后添加了前行代码，但 eslint 仍然警告下一行。

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

Answer 1

参见Vetur's documentation：

Install ESLint plugin for the best linting experience. Vetur's template linting is only for quick start and does not support rule configuration.

所以，你必须：

安装ESLint plugin

启用 vue 插件并禁用 Vetur 的 linting（添加到 VS 代码配置）：

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

如果您还没有安装 eslint and/or 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 文件或 eslintConfig 名称下的 package.json。

而且，它有效：

Answer 2

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

Answer 3

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

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

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

How disable eslint warning for a specific line in a template in a .vue file in VS Code

eslint

vue.js

visual-studio-code

vetur