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

Disputable using v-if with v-for aside, the solution is simple and actually described in 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: