# vue/max-len

enforce a maximum line length

# 📖 Rule Details

This rule enforces a maximum line length to increase code readability and maintainability. This rule is the similar rule as core max-len (opens new window) rule but it applies to the source code in .vue.

<template>
  <!-- ✓ GOOD -->
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <!-- ✗ BAD -->
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</template>

<script>
/* ✓ GOOD */
var foo = {
  "bar": "This is a bar.",
  "baz": { "qux": "This is a qux" },
  "easier": "to read"
};

/* ✗ BAD */
var foo = { "bar": "This is a bar.", "baz": { "qux": "This is a qux" }, "difficult": "to read" };
</script>

<style>
/* ignore */
.ignore-stylesheet .blocks-other-than-script-and-template-are-ignored .this-line-has-a-length-of-100
{}
</style>

Now loading...

# 🔧 Options

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

code ... enforces a maximum line length. default 80
template ... enforces a maximum line length for <template>. defaults to value of code
tabWidth ... specifies the character width for tab characters. default 2
comments ... enforces a maximum line length for comments. defaults to value of code
ignorePattern ... ignores lines matching a regular expression. can only match a single line and need to be double escaped when written in YAML or JSON
ignoreComments ... if true, ignores all trailing comments and comments on their own line. default false
ignoreTrailingComments ... if true, ignores only trailing comments. default false
ignoreUrls ... if true, ignores lines that contain a URL. default false
ignoreStrings ... if true, ignores lines that contain a double-quoted or single-quoted string. default false
ignoreTemplateLiterals ... if true, ignores lines that contain a template literal. default false
ignoreRegExpLiterals ... if true, ignores lines that contain a RegExp literal. default false
ignoreHTMLAttributeValues ... if true, ignores lines that contain a HTML attribute value. default false
ignoreHTMLTextContents ... if true, ignores lines that contain a HTML text content. default false

# `"code": 40`

<template>
  <!-- ✓ GOOD -->
  <div>line length is 40 ........ </div>

  <!-- ✗ BAD -->
  <div>line length is 50 .................. </div>
</template>

<script>
/* ✓ GOOD */
var foo = ['line', 'length', 'is', '40']

/* ✗ BAD */
var foo = ['line', 'length', 'is', '50', '......']
</script>

Now loading...

# `"template": 120`

<template>
  <!-- ✓ GOOD -->
  <div>line length is 120 ....................................................................................... </div>

  <!-- ✗ BAD -->
  <div>line length is 121 ........................................................................................ </div>
</template>

<script>
/* ✗ BAD */
var foo = ['line', 'length', 'is', '81', '......', '......', '......', '......'];
</script>

Now loading...

# `"comments": 65`

<template>
<!-- ✓ GOOD -->
<!--
  This is a comment that does not violates
  the maximum line length we have specified
-->

<!-- ✗ BAD -->
<!--
  This is a comment that violates the maximum line length we have specified
-->
</template>

<script>
/* ✓ GOOD */
/**
 * This is a comment that does not violates
 * the maximum line length we have specified
 */

/* ✗ BAD */
/**
 * This is a comment that violates the maximum line length we have specified
 */
</script>

Now loading...

# `"ignoreComments": true`

<template>
  <!-- ✓ GOOD -->
  <!-- This is a really really really really really really really really really long comment -->
</template>

<script>
/* ✓ GOOD */
/**
 * This is a really really really really really really really really really long comment
 */
</script>

Now loading...

# `"ignoreTrailingComments": true`

<template>
  <!-- ✓ GOOD -->
  <div /><!-- This is a really really really really really really really really long comment -->

  <!-- ✗ BAD -->
  <!-- This is a really really really really really really really really long comment -->
</template>

<script>
/* ✓ GOOD */
var foo = 'bar'; // This is a really really really really really really really really long comment

/* ✗ BAD */
// This is a really really really really really really really really long comment
</script>

Now loading...

# `"ignoreUrls": true`

<template>
  <!-- ✓ GOOD -->
  <div style="background-image: url('https://www.example.com/really/really/really/really/really/really/really/long')" />
</template>

<script>
/* ✓ GOOD */
var url = 'https://www.example.com/really/really/really/really/really/really/really/long';
</script>

Now loading...

# `"ignoreStrings": true`

<template>
  <!-- ✓ GOOD -->
  <div :title="'this is a really really really really really really long string!'" />

  <!-- ✗ BAD -->
  <div title="this is a really really really really really really long attribute value!" />
  <div>this is a really really really really really really really long text content!</div>
</template>

<script>
/* ✓ GOOD */
var longString = 'this is a really really really really really really long string!';
</script>

Now loading...

# `"ignoreTemplateLiterals": true`

<template>
  <!-- ✓ GOOD -->
  <div :title="`this is a really really really really really long template literal!`" />
</template>

<script>
/* ✓ GOOD */
var longTemplateLiteral = `this is a really really really really really long template literal!`;
</script>

Now loading...

# `"ignoreRegExpLiterals": true`

<template>
  <!-- ✓ GOOD -->
  <div :class="{
    foo: /this is a really really really really really long regular expression!/.test(bar)
  }" />
</template>

<script>
/* ✓ GOOD */
var longRegExpLiteral = /this is a really really really really really long regular expression!/;
</script>

Now loading...

# `"ignoreHTMLAttributeValues": true`

<template>
  <!-- ✓ GOOD -->
  <div title="this is a really really really really really really long attribute value!" />

  <!-- ✗ BAD -->
  <div :title="'this is a really really really really really really long string!'" />
</template>

Now loading...

# `"ignoreHTMLTextContents": true`

<template>
  <!-- ✓ GOOD -->
  <div>this is a really really really really really really really long text content!</div>
</template>

Now loading...

# 📚 Further Reading

max-len (opens new window)

# 🚀 Version

This rule was introduced in eslint-plugin-vue v6.1.0

# 🔍 Implementation

^{Taken with ❤️ from ESLint core (opens new window)}

← vue/keyword-spacing vue/no-constant-condition →

# vue/max-len

# 📖 Rule Details

# 🔧 Options

# "code": 40

# "template": 120

# "comments": 65

# "ignoreComments": true

# "ignoreTrailingComments": true

# "ignoreUrls": true

# "ignoreStrings": true

# "ignoreTemplateLiterals": true

# "ignoreRegExpLiterals": true

# "ignoreHTMLAttributeValues": true

# "ignoreHTMLTextContents": true

# 📚 Further Reading

# 🚀 Version

# 🔍 Implementation

# `"code": 40`

# `"template": 120`

# `"comments": 65`

# `"ignoreComments": true`

# `"ignoreTrailingComments": true`

# `"ignoreUrls": true`

# `"ignoreStrings": true`

# `"ignoreTemplateLiterals": true`

# `"ignoreRegExpLiterals": true`

# `"ignoreHTMLAttributeValues": true`

# `"ignoreHTMLTextContents": true`