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

Posted 2023-03-27

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

【英文标题】：How disable eslint warning for a specific line in a template in a .vue file in VS Code

【发布时间】：2019-06-21 01:11:14

【问题描述】：

我想消除我的 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 扩展名。

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

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

【问题讨论】：

您使用的是最新版本的工具吗？我读到here，该规则最近被引入以替代已弃用的vue/no-confusing-v-for-v-if。

为什么不按照警告提示使用计算属性来过滤列表？您还可以拆分指令并将v-if 放在template 标记中以将两者分开。

请出示您的.eslintrc

【参考方案1】：

见Vetur's documentation:

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

所以，你必须：

安装ESLint plugin

启用 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 名称。

而且，它有效：

【讨论】：

我已经做好了这一切，发现我没有启用给 vscode 使用我的 eslint/eslint 配置的权限。

@MichaelCole 单独提出您的问题。对于 OP 来说，它确实有效。

【参考方案2】：

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

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

【参考方案3】：

试试! template-lint-disable