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

丹尼尔·桑托斯

我想消除我的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”混合使用。我正在为VSCode使用vetur扩展。

我添加了该示例的前任代码行，但eslint仍然警告下一行。

PS. This solution is not the best one, but I needed it like this due the transition animation.

Styx

Disputable using v-if with v-for aside, the solution is simple and actually described in 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.

So, you have to:

Install ESLint plugin

Enable vue plugin and disable Vetur's linting (add to VS Code config):

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

If you don't have eslint and/or eslint-plugin-vue already installed, you should do that:

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

Simple config for ESLint:

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

You should save it either to .eslintrc file or to package.json under eslintConfig name.

And, it works: