如何禁用 VS Code 中 .vue 文件中模板中特定行的 eslint 警告 [英] How disable eslint warning for a specific line in a template in a .vue file in VS Code

问题描述

我想在我的 vue 文件中忽略这个错误

I would like to dismiss this error on my vue file

我正在尝试添加此处理器线

I am trying to add this processor line

<!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->

和

<!-- eslint-disable-next-line vue/no-confusing-v-for-v-if  -->

但都不是

也没有

关闭 eslint 警告

dismiss the eslint warning

[eslint-plugin-vue] [vue/no-use-v-if-with-v-for]'v-for' 指令中的 'value' 变量应替换为返回过滤数组的计算属性.您不应将v-for"与v-if"混用.我正在为 VSCode 使用 vetur 扩展.

[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仍然警告下一行.

I added the precessor line fallowing this sample but eslint still warns about the next line.

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

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

推荐答案

参见 Vetur 的文档:

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

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

所以，你必须:

1. 安装ESLint 插件

启用 vue 插件并禁用 Vetur 的 linting(添加到 VS Code 配置):

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

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

如果你没有 eslint 和/或 eslint-plugin-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

ESLint 的简单配置:

Simple config for ESLint:

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

您应该将其保存到 .eslintrc 文件或 package.json 下 eslintConfig 名称.

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

而且，它有效:

这篇关于如何禁用 VS Code 中 .vue 文件中模板中特定行的 eslint 警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！