Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams .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?

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! – Erty Seidohl Jul 27, 2018 at 17:45

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 }]
                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
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
                You can follow with <!-- eslint-enable max-len --> to re-enable the rule after the offending line
– Tofandel
                Jan 31, 2022 at 11:00
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">
</template>
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.
the correct eslint config is this:
rules: {
  'prettier/prettier': ['error', { printWidth: 120 }],
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}],
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]
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.