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

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:

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