如何在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'混合使用.我正在使用VSCode的vetur扩展.

我添加了这个样本的前驱线,但是eslint仍警告下一行.

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

Answer 1

有争议的使用v-if与v-for不谈,解决方法很简单,并在实际中描述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 -->