How to Disable Eslint Rule Max Line Length for Paragraph in <Template> of Vue.Js

How to disable eslint rule max line length for paragraph in <template> of vue.js?

For eslint-plugin-vue >= 4.1.0 you can use directive comments to disable eslint.

https://github.com/vuejs/eslint-plugin-vue/commit/ad84e0ba6d81f24583e65fc70b1d9803d73d3ed9

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>

es lint max length rule disabling is not working

Not sure, your method should be working but can you give this a try by wrapping it?

/* eslint-disable max-len */ 
   export const URI_REGEX = "" // something which is very long
/* eslint-enable max-len */

How to meet eslint max line length rules with long svg path?

"max-len": ["error", {"ignoreTemplateLiterals": true, "ignoreStrings": true}]

or

ESLint-plugin-React

How to disable rule [plugin:vite:vue] Duplicate attribute

In vue.js, you can't have two v-bind for the same attributes on one element.

In your case you are putting twice the classes elements wich results in the Duplicate attribute. error.

To solve your problem, I would recommand mergind your classes attributes using a computed properties with the other classes you are trying to add.

export default {
   computed: {
      mergedClasses(){
         return {...this.classes,
            'bg-gray-100': disabled,
            'cursor-not-allowed': disabled,
            'inline-block': block,
            'w-full': block,
        }
      }
   }
}

And use it in the template :

<button 
        :id="id"
        :type="type"
        @click="onClick"
        :class="mergedClasses"
        :class="{
            'bg-gray-100': disabled,
            'cursor-not-allowed': disabled,
            'inline-block': block,
            'w-full': block,
        }" 
        :disabled="disabled">{{ text }}<slot/></button>

---

Related Topics