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

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.

Answer 1

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:

Answer 2

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

Answer 3

Try {{! template-lint-disable }}