disable eslint in vue template

[siavashkavousi]

Hi,

Is there anyway to disable lint in template like in js (e.g. eslint-disable-line)?

[mysticatea]

Thank you for this issue.

There is no way, currently.
We should investigate the way to implement directive comments such as eslint-disable.

[maxmilton]

It's particularly frustrating with the max-len eslint rule. I often have paragraphs or long elements and so I've had to disable the rule. A shame because it's useful for JS linting.

[asifm]

Any way to disable eslint in pug templates? The solution given apparently doesn't work with pug.

[1c7]

2018 June 13,
this annoying me, so I just search and remove js-lint

Before

After

[Julia-Lavrova]

You need to add ':key="t"', it needs for circle's item.

[1c7]

@Julia-Lavrova Thanks!

[maximusblade]

@Julia-Lavrova thanks.

[willin]

@mysticatea how about now???

    <!-- eslint-disable-next-line vue/no-v-html -->
    <p class="post-excerpt" v-html="post.excerpt || post.frontmatter.description || '' " />

[benjaminpwarren]

The above vue/no-v-html example works for me, but <!-- eslint-disable vue/valid-v-on --> doesn't, the error still shows. Using 5.0.0-beta.3.

[KITSMoeNashashibi]

try <!-- eslint-disable -->
this will disable linting for everything below it
you can use <!-- eslint-enable --> to re-enable it back

[aniude]

@willin It seems that it can't resolved this situation

<p class="post-excerpt"
     v-html="post.excerpt || post.frontmatter.description || '' " />

[EdwinBetanc0urt]

your_project/config/index.js

change the value of useEslint from true to false, from line 26, inside:

module.exports: {
    dev: {
        useEslint: false
    }
}

note: I use the vue webpack template, the version of the template is 1.3.1

[blowsie]

@aniude you can use it like so;

        <!-- eslint-disable vue/no-v-html -->
        <div
          v-if="!manageOptions"
          class="content"
          v-html="$t('gdpr.marketingConsent.body')"
        />
        <!--eslint-enable-->

[gluons]

<!-- eslint-disable --> and <!-- eslint-enable --> won't work.
Template linting is unable to disable. 😨

[blowsie]

@gluons you need to use it inside the <template> tag, this works on webstorm at least

[gluons]

@blowsie It still won't work. Not only VSCode. Vue CLI throws the errors.

[michalsnik]

We don't support pug templates @gluons Depending on version of vue-eslint-parser you have installed templates other than html should be ignored. Can you provide informations about versions of eslint-plugin-vue and vue-eslint-parsers you use?

[gluons]

@michalsnik I've removed yarn.lock and node_modules and reinstall modules to get fresh packages. Here is it.

eslint-plugin-vue:

> yarn list --pattern eslint-plugin-vue
yarn list v1.12.3
├─ @vue/[email protected]
│  └─ [email protected]
└─ [email protected]

vue-eslint-parser:

> yarn list --pattern vue-eslint-parser
yarn list v1.12.3
├─ @vue/[email protected]
│  └─ [email protected]
└─ [email protected]

---

Errors still exist.

[PayteR]

Is there a way to ignore someone specific rule globally in the .eslintrc file? I tried this, but it doesn't work

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: [
    'prettier'
  ],
  // add your custom rules here
  rules: {
    "vue/no-v-html": "off"
  }
};

I want this, because i want to use v-html everywhere and don't need to set ignore on every occurence.

[bigsee]

@PayteR I think this rule expects an int rather than a string. I have it working like this:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {
    'nuxt/no-cjs-in-config': 'off',
    'vue/no-v-html': 0,
    'no-console': 0
  }
}

[iigmir]

The error exists in VSCode even I try to ignore it:

<div>
    <!--eslint-disable vue/valid-v-for-->
    <component v-for="(item, index) in lists" v-bind="component_binding(item, index)" v-on:event_com="event_binding"></component>
    <!--eslint-enable-->
</div>

Software version:

1. VSCode v.1.42
2. eslint-plugin-html v.6.0.0
3. eslint-plugin-vue v.5.2.3

[Guley]

try <!-- eslint-disable -->
this will disable linting for everything below it
you can use <!-- eslint-enable --> to re-enable it back

Add in App.vue

<script> /* eslint-disable */ </script>

[sirlancelot]

I'm using [email protected] and I'm still experiencing this bug:

Interestingly, without the flag on line 75, VSCode actually emits TWO warnings, one from ESLint, and the other somehow from this plugin...

I need to ignore it for this line only (not the whole file) as my cellData variable contains a key.

[KITSMoeNashashibi]

why not just pass :key="cellData.key"?

[sirlancelot]

why not just pass :key="cellData.key"?

That is what I've done as a workaround, but it doesn't make this not a bug.

[rajeshwarpatlolla]

It's not working for me. I tried to disable in template and also tried with eslint config in package.json. Nothing is working for me.

The error is irritating. Please let me know if anyone has a solution for this.

[iigmir]

why not just pass :key="cellData.key"?

Because you can't do this:

<div>
    <component :="{ key: cellData.key, class: cellData.class }"></component>
</div>

In this situation, you must do something like this:

<div>
    <component v-bind="{ key: cellData.key, class: cellData.class }"></component>
</div>

[chasedougherty4628]

It's not working for me. I tried to disable in template and also tried with eslint config in package.json. Nothing is working for me.

The error is irritating. Please let me know if anyone has a solution for this.

@rajeshwarpatlolla let me know if you find a solution. I have the exact same problem

[Hijiri-K]

@chasedougherty4628

I had the same problem.
But I could solve with adding a line bellow into .vscode/setting.json.

"vetur.validation.template": false

reference: https://gitmemory.com/issue/vuejs/eslint-plugin-vue/1269/668921391

If you are using eslint with vscode and vetur, it may help you.

[yubaoquan]

Same issue

[exbotanical]

Edit: For Pug templates

All of the suggestions thus far weren't working for me either until I tried enclosing an actual C-style comment block within the html comment. This works for me:

<template lang="pug">
<!-- /* eslint-disable */ -->
...

Hopefully this works for others. Let us know!

[woai3c]

/* eslint-disable max-len */ -> <!-- eslint-disable max-len --> , this is work for me.

[blowsie]

@Plutonan this solution appears to work, for a handful of people at least.
#260 (comment)

[xcchcaptain]

try <!-- eslint-disable --> this will disable linting for everything below it you can use <!-- eslint-enable --> to re-enable it back

thanks! this worked for me.
template of sfc use <!-- eslint-disable -->
script of sfc use /* eslint-disable */

[jez9999]

The only problem is, these comments will show up in the DOM:

<!-- eslint-disable vue/require-v-for-key, vue/valid-v-for -->
...
<!-- eslint-enable vue/require-v-for-key, vue/valid-v-for -->

We need a way to hide them from the DOM!

[tjbp]

The only problem is, these comments will show up in the DOM:

<!-- eslint-disable vue/require-v-for-key, vue/valid-v-for -->
...
<!-- eslint-enable vue/require-v-for-key, vue/valid-v-for -->

We need a way to hide them from the DOM!

Do this:

<!-- eslint-disable vue/require-v-for-key, vue/valid-v-for -->
<template>
  <div v-for="..." />
</template>

not this:

<template>
  <!-- eslint-disable vue/require-v-for-key, vue/valid-v-for -->
  <div v-for="..." />
</template>

[jez9999]

I guess that works, but only if you want to disable the rule for the entire template.

[Vlasterx]

There is a problem with vue/valid-v-on rule when adding custom modifiers.

Let's say that I have created these modifiers for keydown:

export const Keycodes = {
	multiply: 106,
	minus: 109,
	plus: 107,
	divide: 111,
}

If I initialize these custom keycodes with

Vue.config.keyCodes = Keycodes

and add them to eslint.js config like this:

const { Keycodes } = require('./Keycodes')
const customKeycodes = Object.keys(Keycodes)

module.exports = {
  //rest of the eslint settings
  'rules': {
    // Rest of eslint rules
    'vue/valid-v-on': ['warn', {'modifiers': customKeycodes }],
  }
}

It doesn't work in VSCode, but the webpack is compiling without errors.

Problem is that I cannot report this error, since it is in a private repository. :-/

So the only way is to completely turn off this specific rule in a template.

<template>
  <!-- eslint-disable vue/valid-v-on -->