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.

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:

1. Install ESLint plugin

2. 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: