74

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?

2
  • Looks like there's an open issue for this with eslint github.com/vuejs/eslint-plugin-vue/issues/260. Edit: It's actually a closed issue -- you can use directive comments! Jul 27, 2018 at 17:45
  • Also, there is nothing stoping you from wrapping the paragraph so it's more readable
    – Tofandel
    Feb 1, 2022 at 11:30

8 Answers 8

111

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 }]
  }
}
4
  • 2
    The same solution works also for npm package.json, esLintConfig section.
    – velis
    Jul 23, 2021 at 5:47
  • There is a way to disable rules for a set of lines with html comments as demonstrated in another answer
    – Tofandel
    Jan 31, 2022 at 10:57
  • @Tofandel yes, that wasn't the case at the time of writing,. I've updated the answer to reflect the changes.
    – Daniel
    Feb 1, 2022 at 4:45
  • 1
    For whole file you can use like /* eslint-disable max-len */
    – Rahimuddin
    Aug 16, 2022 at 11:32
37

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
      }
    }
  ]
};
1
  • You can follow with <!-- eslint-enable max-len --> to re-enable the rule after the offending line
    – Tofandel
    Jan 31, 2022 at 11:00
23

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>
1
  • 3
    any idea why this doesn't work if I use <template lang="pug">?
    – Syed
    Dec 28, 2018 at 10:40
12

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.

10

the correct eslint config is this:

rules: {
  'prettier/prettier': ['error', { printWidth: 120 }],
},
6

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.

4

I am using Vue3, the structure has been changed, .eslintrc.js is being merged into package.json so that methods mentioned before is not work for me.

First.

This is the way it works to me Commented the line in .editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
# max_line_length = 100

Seconds.

Add the line in eslintConfig object in package.json

"rules": {
  "max-len": ["error", 120]
},
3

what was missing for me is the location of configuration file. in my angular project it is .eslintrc.js

and the part of the configuration code looks like this:

  rules: {
    "quotes": ["error", "double"],
    "import/no-unresolved": 0,
    "max-len": ["error", {"code": 120}],
  },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.