Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

enter image description here

Nor

enter image description here

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.

like image 327
Daniel Santos Avatar asked Jan 28 '19 03:01

Daniel Santos


People also ask

How do I disable ESLint for a specific line?

To temporarily turn off ESLint, you should add a block comment /* eslint-disable */ before the lines that you're interested in: /* eslint-disable */ console.

How do I ignore warning on ESLint?

disable warnings eslintUse /* eslint-disable */ to ignore all warnings in a file. You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file.

How do I remove ESLint from Vue command line?

To disable ESLint in Vue CLI, we just remove the @vue/cli-plugin-eslint package from the Vue CLI project. to remove the @vue/cli-plugin-eslint package, which will disable ESLint in the Vue CLI project.


2 Answers

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:

like image 105
Styx Avatar answered Oct 17 '22 04:10

Styx


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 -->
like image 17
Picard Avatar answered Oct 17 '22 02:10

Picard