How disable eslint warning for a specific line in a template in a .vue file in VS Code

Question

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 -->

and

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

but neither

Nor

dismiss the eslint warning

[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.

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.

Are you using the latest versions of the tools? I read [here](https://eslint.vuejs.org/rules/no-confusing-v-for-v-if.html) that this rule has been recently introduced as a replacement of the deprecated `vue/no-confusing-v-for-v-if`. — P3trur0, Jan 28 '19 at 08:44
Why don't you use a computed property to filter your list as the warning suggests? You could also split your directives and put `v-if` in a `template` tag to separate the two. — Husam Ibrahim, Feb 05 '19 at 05:18

score 29 · Accepted Answer · edited Mar 10 '21 at 16:35

See 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:

I had all this in place already and found that I had not enabled given vscode permission to use my eslint/eslint configuration. — Jeff Bluemel, Nov 06 '20 at 16:25
@MichaelCole Ask your question separately. For OP's case it did work. — Styx, Mar 10 '21 at 19:41

score 20 · Answer 2 · answered Feb 19 '21 at 11:00

If you really want to disable it, try the solution below (it works for me). Since you are specific about the rule it doesn't disable other warnings:

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

score -5 · Answer 3 · answered Jun 24 '20 at 05:28

-5

Try {{! template-lint-disable }}

answered Jun 24 '20 at 05:28

Kunwar Babu

45
3

How disable eslint warning for a specific line in a template in a .vue file in VS Code

3 Answers3

Linked