如何在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-plugin-vue] [vue / no-use-v-if-with-v-for]'v-for'指令中的'value'变量应替换为返回已过滤数组的计算属性。你不应该将'v-for'与'v-if'混合使用。我正在使用vetur扩展VSCode。

我在qazxsw poi样本之后添加了处理器行，但是eslint仍然警告下一行。

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

Answer 1

使用this与v-if一起讨论有争议，解决方案很简单，实际上在v-for中描述：

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

所以，你必须：

1. 安装Vetur's documentation
2. 启用ESLint plugin插件并禁用Vetur的linting（添加到VS Code配置）： vue

如果你没有安装

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

和/或eslint，你应该这样做：

eslint-plugin-vue

ESLint的简单配置：

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

您应该将它保存到

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

文件或.eslintrc名称下的package.json。

而且，它有效：