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

Question

I am using airbnb eslint and currently I am getting error:

error: Line 6 exceeds the maximum line length of 100 (max-len) at path/to/file.vue:6:1:

<template lang="pug">
  div
    .container
      .row
        .col-xl-10.mx-auto
          p Please let us know how you got here, and use the header buttons to navigate back to safe harbor.
</template>

Is there a way to disable lint for paragraph text like above?
Also, how to increase the line length from 100 to 120?

Solution 1

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>

Solution 2

Update

There has been some updates to eslint-plugin-vue in the past 4 years. The comments in templates can now be used to override eslint settings.

For next line only

<!-- eslint-disable-next-line max-len -->
<my-reasonably-long-component>...</my-reasonably-long-component>

For multi-line purpose

<!-- eslint-disable max-len -->
<my-reasonably-long-component>
  ...
</my-reasonably-long-component>
<!-- eslint-enable max-len -->

In addition, as of eslint-plugin-vue v6.1.0 the vue/max-len rule was added, which ads more control about how the length rules

{
    "vue/max-len": ["error", {
        "code": 80,
        "template": 80,
        "tabWidth": 2,
        "comments": 80,
        "ignorePattern": "",
        "ignoreComments": false,
        "ignoreTrailingComments": false,
        "ignoreUrls": false,
        "ignoreStrings": false,
        "ignoreTemplateLiterals": false,
        "ignoreRegExpLiterals": false,
        "ignoreHTMLAttributeValues": false,
        "ignoreHTMLTextContents": false,
    }]
}

If you have more than a couple outliers, tweaking the globals for templates-specifically might work better.

---

Original Answer

AFAIK, there is no way to apply eslint rules to the template, and specifically to one line in a template. I hope to be proven wrong though.

anyway, because I have a file with lots of text, to get around it, I've added this rule 'max-len': ["error", { "code": 120 }], in my .eslintrc.js file.

here is the structure (with other settings removed)

module.exports {
  rules: {
    'max-len': ["error", { "code": 120 }]
  }
}

Solution 3

This will disable the rule for the entire template tag. Official ES Lint docs on disabling rules

<template>
  <!-- eslint-disable max-len -->
  ...

EDIT: If you want to instead disable line length rule for all .vue files, then add this to .eslintrc.js (this will also disable the rule for <script> and <style> tags):

module.exports = {
  ...
  overrides: [
    {
      files: ["*.vue"],
      rules: {
        ...
        'max-len': 'off' // disables line length check
      }
    }
  ]
};

Solution 4

You can disable max-len and use vue/max-len with something like "template": 9000. An example:

"overrides": [
    {
      "files": [
        "*.vue"
      ],
      "rules": {
        "max-len": "off",
        "vue/max-len": [
          "error",
          {
            "code": 120,
            "template": 9000,
            "ignoreTemplateLiterals": true,
            "ignoreUrls": true,
            "ignoreStrings": true
          }
        ]
      }
    }
  ]

This way you disable the rule only for the <template></template> part of a component.

Solution 5

You can add this to your ESLint rules:

rules: {
  "vue/max-attributes-per-line": "off"
}

This worked for me (even if I rather set it on for my projects).
You can find more information here if you want.

View more solutions

Comments

[Syed]

any idea why this doesn't work if I use <template lang="pug">?

[velis]

The same solution works also for npm package.json, esLintConfig section.

[Tofandel]

There is a way to disable rules for a set of lines with html comments as demonstrated in another answer

[Tofandel]

You can follow with <!-- eslint-enable max-len --> to re-enable the rule after the offending line

[Daniel]

@Tofandel yes, that wasn't the case at the time of writing,. I've updated the answer to reflect the changes.