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?

Answer 1

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 }]
  }
}

Answer 2

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
      }
    }
  ]
};

Answer 3

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.

Answer 4

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.

Answer 5

the correct eslint config is this:

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

Answer 6

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]
},