StackOverflow - technical

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

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

Was this helpful?

Have a different question?

Can't find the answer you're looking for? Submit your own question to our community.

🛎️ Get Weekly OTA Fixes

New answers, vendor issues, and updates — straight to your inbox.