diff --git a/docs/rules/README.md b/docs/rules/README.md
index 397841d4e..b23b0535c 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -153,6 +153,7 @@ For example:
 | [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
 | [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/max-len](./max-len.md) | enforce a maximum line length |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
 | [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
diff --git a/docs/rules/max-len.md b/docs/rules/max-len.md
new file mode 100644
index 000000000..4dc5ba8d5
--- /dev/null
+++ b/docs/rules/max-len.md
@@ -0,0 +1,329 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-len
+description: enforce a maximum line length
+---
+# vue/max-len
+> enforce a maximum line length
+
+## :book: 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] rule but it applies to the source code in `.vue`.
+
+<eslint-code-block :rules="{'vue/max-len': ['error']}">
+
+```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>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```js
+{
+    "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`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {code: 40}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+
+### `"template": 120`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {template: 120}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"comments": 65`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {comments: 65}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreComments": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreComments: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreTrailingComments": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreTrailingComments: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreUrls": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreUrls: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreStrings": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreStrings: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreTemplateLiterals": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreTemplateLiterals: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreRegExpLiterals": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreRegExpLiterals: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreHTMLAttributeValues": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreHTMLAttributeValues: true}]}">
+
+```vue
+<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>
+```
+
+</eslint-code-block>
+
+### `"ignoreHTMLTextContents": true`
+
+<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreHTMLTextContents: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div>this is a really really really really really really really long text content!</div>
+</template>
+```
+
+</eslint-code-block>
+
+## :books: Further reading
+
+- [max-len]
+
+[max-len]: https://eslint.org/docs/rules/max-len
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-len.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-len.js)
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index 1dcab2317..3bf2fec4e 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -19,6 +19,7 @@ module.exports = {
     'vue/key-spacing': 'off',
     'vue/keyword-spacing': 'off',
     'vue/max-attributes-per-line': 'off',
+    'vue/max-len': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/mustache-interpolation-spacing': 'off',
     'vue/no-multi-spaces': 'off',
diff --git a/lib/index.js b/lib/index.js
index d446d2ca3..e31140ade 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -32,6 +32,7 @@ module.exports = {
     'keyword-spacing': require('./rules/keyword-spacing'),
     'match-component-file-name': require('./rules/match-component-file-name'),
     'max-attributes-per-line': require('./rules/max-attributes-per-line'),
+    'max-len': require('./rules/max-len'),
     'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
     'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
     'name-property-casing': require('./rules/name-property-casing'),
diff --git a/lib/rules/max-len.js b/lib/rules/max-len.js
new file mode 100644
index 000000000..ccc3efba7
--- /dev/null
+++ b/lib/rules/max-len.js
@@ -0,0 +1,494 @@
+/**
+ * @author Yosuke Ota
+ * @fileoverview Rule to check for max length on a line of Vue file.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+const OPTIONS_SCHEMA = {
+  type: 'object',
+  properties: {
+    code: {
+      type: 'integer',
+      minimum: 0
+    },
+    template: {
+      type: 'integer',
+      minimum: 0
+    },
+    comments: {
+      type: 'integer',
+      minimum: 0
+    },
+    tabWidth: {
+      type: 'integer',
+      minimum: 0
+    },
+    ignorePattern: {
+      type: 'string'
+    },
+    ignoreComments: {
+      type: 'boolean'
+    },
+    ignoreTrailingComments: {
+      type: 'boolean'
+    },
+    ignoreUrls: {
+      type: 'boolean'
+    },
+    ignoreStrings: {
+      type: 'boolean'
+    },
+    ignoreTemplateLiterals: {
+      type: 'boolean'
+    },
+    ignoreRegExpLiterals: {
+      type: 'boolean'
+    },
+    ignoreHTMLAttributeValues: {
+      type: 'boolean'
+    },
+    ignoreHTMLTextContents: {
+      type: 'boolean'
+    }
+  },
+  additionalProperties: false
+}
+
+const OPTIONS_OR_INTEGER_SCHEMA = {
+  anyOf: [
+    OPTIONS_SCHEMA,
+    {
+      type: 'integer',
+      minimum: 0
+    }
+  ]
+}
+
+// --------------------------------------------------------------------------
+// Helpers
+// --------------------------------------------------------------------------
+
+/**
+ * Computes the length of a line that may contain tabs. The width of each
+ * tab will be the number of spaces to the next tab stop.
+ * @param {string} line The line.
+ * @param {int} tabWidth The width of each tab stop in spaces.
+ * @returns {int} The computed line length.
+ * @private
+ */
+function computeLineLength (line, tabWidth) {
+  let extraCharacterCount = 0
+
+  line.replace(/\t/gu, (match, offset) => {
+    const totalOffset = offset + extraCharacterCount
+    const previousTabStopOffset = tabWidth ? totalOffset % tabWidth : 0
+    const spaceCount = tabWidth - previousTabStopOffset
+
+    extraCharacterCount += spaceCount - 1 // -1 for the replaced tab
+  })
+  return Array.from(line).length + extraCharacterCount
+}
+
+/**
+ * Tells if a given comment is trailing: it starts on the current line and
+ * extends to or past the end of the current line.
+ * @param {string} line The source line we want to check for a trailing comment on
+ * @param {number} lineNumber The one-indexed line number for line
+ * @param {ASTNode} comment The comment to inspect
+ * @returns {boolean} If the comment is trailing on the given line
+ */
+function isTrailingComment (line, lineNumber, comment) {
+  return comment &&
+              (comment.loc.start.line === lineNumber && lineNumber <= comment.loc.end.line) &&
+              (comment.loc.end.line > lineNumber || comment.loc.end.column === line.length)
+}
+
+/**
+ * Tells if a comment encompasses the entire line.
+ * @param {string} line The source line with a trailing comment
+ * @param {number} lineNumber The one-indexed line number this is on
+ * @param {ASTNode} comment The comment to remove
+ * @returns {boolean} If the comment covers the entire line
+ */
+function isFullLineComment (line, lineNumber, comment) {
+  const start = comment.loc.start
+  const end = comment.loc.end
+  const isFirstTokenOnLine = !line.slice(0, comment.loc.start.column).trim()
+
+  return comment &&
+              (start.line < lineNumber || (start.line === lineNumber && isFirstTokenOnLine)) &&
+              (end.line > lineNumber || (end.line === lineNumber && end.column === line.length))
+}
+
+/**
+ * Gets the line after the comment and any remaining trailing whitespace is
+ * stripped.
+ * @param {string} line The source line with a trailing comment
+ * @param {ASTNode} comment The comment to remove
+ * @returns {string} Line without comment and trailing whitepace
+ */
+function stripTrailingComment (line, comment) {
+  // loc.column is zero-indexed
+  return line.slice(0, comment.loc.start.column).replace(/\s+$/u, '')
+}
+
+/**
+ * Ensure that an array exists at [key] on `object`, and add `value` to it.
+ *
+ * @param {Object} object the object to mutate
+ * @param {string} key the object's key
+ * @param {*} value the value to add
+ * @returns {void}
+ * @private
+ */
+function ensureArrayAndPush (object, key, value) {
+  if (!Array.isArray(object[key])) {
+    object[key] = []
+  }
+  object[key].push(value)
+}
+
+/**
+ * A reducer to group an AST node by line number, both start and end.
+ *
+ * @param {Object} acc the accumulator
+ * @param {ASTNode} node the AST node in question
+ * @returns {Object} the modified accumulator
+ * @private
+ */
+function groupByLineNumber (acc, node) {
+  for (let i = node.loc.start.line; i <= node.loc.end.line; ++i) {
+    ensureArrayAndPush(acc, i, node)
+  }
+  return acc
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'layout',
+
+    docs: {
+      description: 'enforce a maximum line length',
+      category: undefined,
+      url: 'https://eslint.vuejs.org/rules/max-len.html'
+    },
+
+    schema: [
+      OPTIONS_OR_INTEGER_SCHEMA,
+      OPTIONS_OR_INTEGER_SCHEMA,
+      OPTIONS_SCHEMA
+    ],
+    messages: {
+      max: 'This line has a length of {{lineLength}}. Maximum allowed is {{maxLength}}.',
+      maxComment: 'This line has a comment length of {{lineLength}}. Maximum allowed is {{maxCommentLength}}.'
+    }
+  },
+
+  create (context) {
+    /*
+     * Inspired by http://tools.ietf.org/html/rfc3986#appendix-B, however:
+     * - They're matching an entire string that we know is a URI
+     * - We're matching part of a string where we think there *might* be a URL
+     * - We're only concerned about URLs, as picking out any URI would cause
+     *   too many false positives
+     * - We don't care about matching the entire URL, any small segment is fine
+     */
+    const URL_REGEXP = /[^:/?#]:\/\/[^?#]/u
+
+    const sourceCode = context.getSourceCode()
+    const tokens = []
+    const comments = []
+    const htmlAttributeValues = []
+
+    // The options object must be the last option specified…
+    const options = Object.assign({}, context.options[context.options.length - 1])
+
+    // …but max code length…
+    if (typeof context.options[0] === 'number') {
+      options.code = context.options[0]
+    }
+
+    // …and tabWidth can be optionally specified directly as integers.
+    if (typeof context.options[1] === 'number') {
+      options.tabWidth = context.options[1]
+    }
+
+    const scriptMaxLength = typeof options.code === 'number' ? options.code : 80
+    const tabWidth = typeof options.tabWidth === 'number' ? options.tabWidth : 2// default value of `vue/html-indent`
+    const templateMaxLength = typeof options.template === 'number' ? options.template : scriptMaxLength
+    const ignoreComments = !!options.ignoreComments
+    const ignoreStrings = !!options.ignoreStrings
+    const ignoreTemplateLiterals = !!options.ignoreTemplateLiterals
+    const ignoreRegExpLiterals = !!options.ignoreRegExpLiterals
+    const ignoreTrailingComments = !!options.ignoreTrailingComments || !!options.ignoreComments
+    const ignoreUrls = !!options.ignoreUrls
+    const ignoreHTMLAttributeValues = !!options.ignoreHTMLAttributeValues
+    const ignoreHTMLTextContents = !!options.ignoreHTMLTextContents
+    const maxCommentLength = options.comments
+    let ignorePattern = options.ignorePattern || null
+
+    if (ignorePattern) {
+      ignorePattern = new RegExp(ignorePattern, 'u')
+    }
+
+    // --------------------------------------------------------------------------
+    // Helpers
+    // --------------------------------------------------------------------------
+
+    /**
+     * Retrieves an array containing all strings (" or ') in the source code.
+     *
+     * @returns {ASTNode[]} An array of string nodes.
+     */
+    function getAllStrings () {
+      return tokens.filter(token => (token.type === 'String' ||
+              (token.type === 'JSXText' && sourceCode.getNodeByRangeIndex(token.range[0] - 1).type === 'JSXAttribute')))
+    }
+
+    /**
+     * Retrieves an array containing all template literals in the source code.
+     *
+     * @returns {ASTNode[]} An array of template literal nodes.
+     */
+    function getAllTemplateLiterals () {
+      return tokens.filter(token => token.type === 'Template')
+    }
+
+    /**
+     * Retrieves an array containing all RegExp literals in the source code.
+     *
+     * @returns {ASTNode[]} An array of RegExp literal nodes.
+     */
+    function getAllRegExpLiterals () {
+      return tokens.filter(token => token.type === 'RegularExpression')
+    }
+
+    /**
+     * Retrieves an array containing all HTML texts in the source code.
+     *
+     * @returns {ASTNode[]} An array of HTML text nodes.
+     */
+    function getAllHTMLTextContents () {
+      return tokens.filter(token => token.type === 'HTMLText')
+    }
+
+    /**
+     * Check the program for max length
+     * @param {ASTNode} node Node to examine
+     * @returns {void}
+     * @private
+     */
+    function checkProgramForMaxLength (node) {
+      const programNode = node
+      const templateBody = node.templateBody
+
+      // setup tokens
+      const scriptTokens = sourceCode.ast.tokens
+      const scriptComments = sourceCode.getAllComments()
+
+      if (context.parserServices.getTemplateBodyTokenStore && templateBody) {
+        const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+
+        const templateTokens = tokenStore.getTokens(templateBody, { includeComments: true })
+
+        if (templateBody.range[0] < programNode.range[0]) {
+          tokens.push(...templateTokens, ...scriptTokens)
+        } else {
+          tokens.push(...scriptTokens, ...templateTokens)
+        }
+      } else {
+        tokens.push(...scriptTokens)
+      }
+
+      if (ignoreComments || maxCommentLength || ignoreTrailingComments) {
+        // list of comments to ignore
+        if (templateBody) {
+          if (templateBody.range[0] < programNode.range[0]) {
+            comments.push(...templateBody.comments, ...scriptComments)
+          } else {
+            comments.push(...scriptComments, ...templateBody.comments)
+          }
+        } else {
+          comments.push(...scriptComments)
+        }
+      }
+
+      let scriptLinesRange
+      if (scriptTokens.length) {
+        if (scriptComments.length) {
+          scriptLinesRange = [
+            Math.min(scriptTokens[0].loc.start.line, scriptComments[0].loc.start.line),
+            Math.max(scriptTokens[scriptTokens.length - 1].loc.end.line, scriptComments[scriptComments.length - 1].loc.end.line)
+          ]
+        } else {
+          scriptLinesRange = [
+            scriptTokens[0].loc.start.line,
+            scriptTokens[scriptTokens.length - 1].loc.end.line
+          ]
+        }
+      } else if (scriptComments.length) {
+        scriptLinesRange = [
+          scriptComments[0].loc.start.line,
+          scriptComments[scriptComments.length - 1].loc.end.line
+        ]
+      }
+      const templateLinesRange = templateBody && [templateBody.loc.start.line, templateBody.loc.end.line]
+
+      // split (honors line-ending)
+      const lines = sourceCode.lines
+
+      const strings = getAllStrings()
+      const stringsByLine = strings.reduce(groupByLineNumber, {})
+
+      const templateLiterals = getAllTemplateLiterals()
+      const templateLiteralsByLine = templateLiterals.reduce(groupByLineNumber, {})
+
+      const regExpLiterals = getAllRegExpLiterals()
+      const regExpLiteralsByLine = regExpLiterals.reduce(groupByLineNumber, {})
+
+      const htmlAttributeValuesByLine = htmlAttributeValues.reduce(groupByLineNumber, {})
+
+      const htmlTextContents = getAllHTMLTextContents()
+      const htmlTextContentsByLine = htmlTextContents.reduce(groupByLineNumber, {})
+
+      const commentsByLine = comments.reduce(groupByLineNumber, {})
+
+      lines.forEach((line, i) => {
+        // i is zero-indexed, line numbers are one-indexed
+        const lineNumber = i + 1
+
+        const inScript = (scriptLinesRange && scriptLinesRange[0] <= lineNumber && lineNumber <= scriptLinesRange[1])
+        const inTemplate = (templateLinesRange && templateLinesRange[0] <= lineNumber && lineNumber <= templateLinesRange[1])
+        // check if line is inside a script or template.
+        if (!inScript && !inTemplate) {
+          // out of range.
+          return
+        }
+        const maxLength = inScript && inTemplate
+          ? Math.max(scriptMaxLength, templateMaxLength)
+          : inScript
+            ? scriptMaxLength
+            : templateMaxLength
+
+        if (
+          (ignoreStrings && stringsByLine[lineNumber]) ||
+          (ignoreTemplateLiterals && templateLiteralsByLine[lineNumber]) ||
+          (ignoreRegExpLiterals && regExpLiteralsByLine[lineNumber]) ||
+          (ignoreHTMLAttributeValues && htmlAttributeValuesByLine[lineNumber]) ||
+          (ignoreHTMLTextContents && htmlTextContentsByLine[lineNumber])
+        ) {
+          // ignore this line
+          return
+        }
+
+        /*
+         * if we're checking comment length; we need to know whether this
+         * line is a comment
+         */
+        let lineIsComment = false
+        let textToMeasure
+
+        /*
+         * comments to check.
+         */
+        if (commentsByLine[lineNumber]) {
+          const commentList = [...commentsByLine[lineNumber]]
+
+          let comment = commentList.pop()
+
+          if (isFullLineComment(line, lineNumber, comment)) {
+            lineIsComment = true
+            textToMeasure = line
+          } else if (ignoreTrailingComments && isTrailingComment(line, lineNumber, comment)) {
+            textToMeasure = stripTrailingComment(line, comment)
+
+            // ignore multiple trailing comments in the same line
+            comment = commentList.pop()
+
+            while (isTrailingComment(textToMeasure, lineNumber, comment)) {
+              textToMeasure = stripTrailingComment(textToMeasure, comment)
+            }
+          } else {
+            textToMeasure = line
+          }
+        } else {
+          textToMeasure = line
+        }
+
+        if ((ignorePattern && ignorePattern.test(textToMeasure)) ||
+            (ignoreUrls && URL_REGEXP.test(textToMeasure))) {
+          // ignore this line
+          return
+        }
+
+        const lineLength = computeLineLength(textToMeasure, tabWidth)
+        const commentLengthApplies = lineIsComment && maxCommentLength
+
+        if (lineIsComment && ignoreComments) {
+          return
+        }
+
+        if (commentLengthApplies) {
+          if (lineLength > maxCommentLength) {
+            context.report({
+              node,
+              loc: { line: lineNumber, column: 0 },
+              messageId: 'maxComment',
+              data: {
+                lineLength,
+                maxCommentLength
+              }
+            })
+          }
+        } else if (lineLength > maxLength) {
+          context.report({
+            node,
+            loc: { line: lineNumber, column: 0 },
+            messageId: 'max',
+            data: {
+              lineLength,
+              maxLength
+            }
+          })
+        }
+      })
+    }
+
+    // --------------------------------------------------------------------------
+    // Public API
+    // --------------------------------------------------------------------------
+
+    const bodyVisitor = utils.defineTemplateBodyVisitor(context,
+      {
+        'VAttribute[directive=false] > VLiteral' (node) {
+          htmlAttributeValues.push(node)
+        }
+      }
+    )
+
+    return Object.assign({}, bodyVisitor,
+      {
+        'Program:exit' (node) {
+          if (bodyVisitor['Program:exit']) {
+            bodyVisitor['Program:exit'](node)
+          }
+          checkProgramForMaxLength(node)
+        }
+      }
+    )
+  }
+}
diff --git a/tests/lib/rules/max-len.js b/tests/lib/rules/max-len.js
new file mode 100644
index 000000000..404348866
--- /dev/null
+++ b/tests/lib/rules/max-len.js
@@ -0,0 +1,1241 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/max-len')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2017, sourceType: 'module' }
+})
+
+tester.run('max-len', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div></div></template>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<script></script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="foo">
+    TEXT1
+    TEXT2
+    <!-- html comment
+      html comment
+      html comment -->
+  </div>
+</template>
+<script>
+// inline comment
+export default {name:'A'}
+/* multiline comment
+  multiline comment
+  multiline comment */
+</script>
+`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">TEXT1     TEXT2<!-- html comment --></div></template>
+<script>export default { name:'A' } /*     comment */ // inline comment</script>
+`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">120 columns ............................................................... </div></template>
+<script>export default { name:'A' } /* 120 columns ......................................................... */</script>
+`,
+      options: [{ code: 120 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">120 columns ............................................................... </div></template>
+<script>export default { name:'A' } /* 80 columns .................. */</script>
+`,
+      options: [{ template: 120 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">120 columns - The script and template are on the same line </div></template><script></script>
+`,
+      options: [{ template: 120 }]
+    },
+    // ignores
+    // - ignorePattern
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"
+       :class="{
+         'foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo': bbbb
+       }">
+  </div>
+</template>
+<script>
+export default { name: 'foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo' }
+</script>
+`,
+      options: [{ ignorePattern: 'foooooooooooooooooo' }]
+    },
+    // - ignoreComments
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+`,
+      options: [{ ignoreComments: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+`,
+      options: [{ ignoreComments: true }]
+    },
+    // - ignoreUrls: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div style="background-image: url('https://www.example.com/long/long/long/long/long')">
+  </div>
+</template>
+<script>
+var a = 'https://www.example.com/long/long/long/long/long/long/long/long/long/long'
+</script>
+`,
+      options: [{ ignoreUrls: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'https://www.example.com/long/long/long/long/long/long/long/long/long/long'
+</script>
+<template>
+  <div style="background-image: url('https://www.example.com/long/long/long/long/long')">
+  </div>
+</template>
+`,
+      options: [{ ignoreUrls: true }]
+    },
+    // - ignoreStrings: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div :class="[
+         {
+           'expr-loooooooooooooooooooooooooooooooooooooooooooooooooooooong': foo,
+         },
+         'str-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+       ]">
+  </div>
+</template>
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+</script>
+`,
+      options: [{ ignoreStrings: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+</script>
+<template>
+  <div :class="[
+         {
+           'expr-loooooooooooooooooooooooooooooooooooooooooooooooooooooong': foo,
+         },
+         'str-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+       ]">
+  </div>
+</template>
+`,
+      options: [{ ignoreStrings: true }]
+    },
+    // - ignoreTemplateLiterals: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div :class="[
+         \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`,
+       ]">
+  </div>
+</template>
+<script>
+var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`
+</script>
+`,
+      options: [{ ignoreTemplateLiterals: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`
+</script>
+<template>
+  <div :class="[
+         \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`,
+       ]">
+  </div>
+</template>
+`,
+      options: [{ ignoreTemplateLiterals: true }]
+    },
+    // - ignoreRegExpLiterals: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div :class="{
+         'foo': /regexploooooooooooooooooooooooooooooooooooooooooooong/.test(bar)
+       }">
+  </div>
+</template>
+<script>
+var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b)
+</script>
+`,
+      options: [{ ignoreRegExpLiterals: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b)
+</script>
+<template>
+  <div :class="{
+         'foo': /regexploooooooooooooooooooooooooooooooooooooooooooong/.test(bar)
+       }">
+  </div>
+</template>
+`,
+      options: [{ ignoreRegExpLiterals: true }]
+    },
+    // - ignoreHTMLAttributeValues: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo">
+  </div>
+</template>
+`,
+      options: [{ ignoreHTMLAttributeValues: true }]
+    },
+    // - ignoreHTMLTextContents: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div>
+    foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
+    foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<input>
+  </div>
+</template>
+`,
+      options: [{ ignoreHTMLTextContents: true }]
+    },
+    // ignore `<style>` and custom block
+    {
+      filename: 'test.vue',
+      code: `
+<docs>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</docs>
+<template><div /></template>
+<script>export default {}</script>
+<style>.looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong{}</style>
+`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">TEXT1      TEXT2<!-- html comment --></div></template>
+<script>export default { name:'A' } /* multiline    */ // inline comment</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 2
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>export default { name:'A' } /* multiline    */ // inline comment</script>
+<template><div class="foo">TEXT1      TEXT2<!-- html comment --></div></template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 2
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">121 columns ................................................................ </div></template>
+<script>export default { name:'A' } /* 121 columns .......................................................... */</script>
+`,
+      options: [{ code: 120 }],
+      errors: [
+        {
+          message: 'This line has a length of 121. Maximum allowed is 120.',
+          line: 2
+        },
+        {
+          message: 'This line has a length of 121. Maximum allowed is 120.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">121 columns ................................................................ </div></template>
+<script>export default { name:'A' } /* 81 columns ................... */</script>
+`,
+      options: [{ template: 120 }],
+      errors: [
+        {
+          message: 'This line has a length of 121. Maximum allowed is 120.',
+          line: 2
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">121 columns - The script and template are on the same line. </div></template><script></script>
+`,
+      options: [{ template: 120 }],
+      errors: [
+        {
+          message: 'This line has a length of 121. Maximum allowed is 120.',
+          line: 2
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<template><div class="foo">121 columns - The script and template are on the same line. </div></template><script></script>
+`,
+      options: [{ code: 120, template: 80 }],
+      errors: [
+        {
+          message: 'This line has a length of 121. Maximum allowed is 120.',
+          line: 2
+        }
+      ]
+    },
+    // ignores
+    // - ignorePattern: off
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"
+       :class="{
+         'foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo': bbbb
+       }">
+  </div>
+</template>
+<script>
+export default { name: 'foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo' }
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 82. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 84. Maximum allowed is 80.',
+          line: 5
+        },
+        {
+          message: 'This line has a length of 94. Maximum allowed is 80.',
+          line: 10
+        }
+      ]
+    },
+    // - ignoreComments: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+    <!-- leading comment ............................................. --><input>
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 6
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 7
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 9
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 10
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 11
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 14
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 15
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+    <!-- leading comment ............................................. --><input>
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 5
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 11
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 12
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 13
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 14
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 15
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 16
+        }
+      ]
+    },
+    // - ignoreComments: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+    <!-- leading comment ............................................. --><input>
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+`,
+      options: [{ ignoreComments: true }],
+      errors: [{
+        message: 'This line has a length of 81. Maximum allowed is 80.',
+        line: 10
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+    <!-- leading comment ............................................. --><input>
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+`,
+      options: [{ ignoreComments: true }],
+      errors: [{
+        message: 'This line has a length of 81. Maximum allowed is 80.',
+        line: 15
+      }]
+    },
+    // - ignoreTrailingComments: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+    <!-- leading comment ............................................. --><input>
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+`,
+      options: [{ ignoreTrailingComments: true }],
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 10
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a // trailing comment .......................................................
+var b /* comment */ // trailing comments ........................................
+/* full line comment ......................................................... */
+</script>
+<template>
+  <!-- HTML full line comment ............................................... -->
+  <div class="foo"
+       :class="{
+         'foo': foo, // trailing comment ........................................
+         'bar': bar, /* comment */ // trailing comments .........................
+         /* full line comment ................................................ */
+       }"> <!-- HTML trailing comment ....................................... -->
+    <!-- leading comment ............................................. --><input>
+  </div> <!-- comment --><!-- HTML trailing comments ........................ -->
+</template>
+`,
+      options: [{ ignoreTrailingComments: true }],
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 5
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 13
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 15
+        }
+      ]
+    },
+    // - ignoreUrls: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div style="background-image: url('https://www.example.com/long/long/long/long/long')">
+  </div>
+</template>
+<script>
+var a = 'https://www.example.com/long/long/long/long/long/long/long/long/long/long'
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 89. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 83. Maximum allowed is 80.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'https://www.example.com/long/long/long/long/long/long/long/long/long/long'
+</script>
+<template>
+  <div style="background-image: url('https://www.example.com/long/long/long/long/long')">
+  </div>
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 83. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 89. Maximum allowed is 80.',
+          line: 6
+        }
+      ]
+    },
+    // - ignoreStrings: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="attr-value-loooooooooooooooooooooooooooooooooooooooooooooooooooong"
+       :class="[
+         {
+           'expr-loooooooooooooooooooooooooooooooooooooooooooooooooooooong': foo,
+         },
+         'str-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+       ]">
+  </div>
+</template>
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 6
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+</script>
+<template>
+  <div class="attr-value-loooooooooooooooooooooooooooooooooooooooooooooooooooong"
+       :class="[
+         {
+           'expr-loooooooooooooooooooooooooooooooooooooooooooooooooooooong': foo,
+         },
+         'str-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+       ]">
+  </div>
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 6
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 9
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 11
+        }
+      ]
+    },
+    // - ignoreStrings: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="attr-value-loooooooooooooooooooooooooooooooooooooooooooooooooooong"
+       :class="[
+         {
+           'expr-loooooooooooooooooooooooooooooooooooooooooooooooooooooong': foo,
+         },
+         'str-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+       ]">
+  </div>
+</template>
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+</script>
+`,
+      options: [{ ignoreStrings: true }],
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+</script>
+<template>
+  <div class="attr-value-loooooooooooooooooooooooooooooooooooooooooooooooooooong"
+       :class="[
+         {
+           'expr-loooooooooooooooooooooooooooooooooooooooooooooooooooooong': foo,
+         },
+         'str-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+       ]">
+  </div>
+</template>
+`,
+      options: [{ ignoreStrings: true }],
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 6
+        }
+      ]
+    },
+    // - ignoreTemplateLiterals: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div :class="[
+         'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+         \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`,
+       ]">
+  </div>
+</template>
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 5
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 10
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`
+</script>
+<template>
+  <div :class="[
+         'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+         \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`,
+       ]">
+  </div>
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 9
+        }
+      ]
+    },
+    // - ignoreTemplateLiterals: true
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div :class="[
+         'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+         \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`,
+       ]">
+  </div>
+</template>
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`
+</script>
+`,
+      options: [{ ignoreTemplateLiterals: true }],
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong'
+var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`
+</script>
+<template>
+  <div :class="[
+         'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+         \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooong\`,
+       ]">
+  </div>
+</template>
+`,
+      options: [{ ignoreTemplateLiterals: true }],
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 8
+        }
+      ]
+    },
+    // - ignoreRegExpLiterals: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div :class="{
+         'foo': /regexploooooooooooooooooooooooooooooooooooooooooooong/.test(bar)
+       }">
+  </div>
+</template>
+<script>
+var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b)
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b)
+</script>
+<template>
+  <div :class="{
+         'foo': /regexploooooooooooooooooooooooooooooooooooooooooooong/.test(bar)
+       }">
+  </div>
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 7
+        }
+      ]
+    },
+    // - ignoreHTMLAttributeValues: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div class="foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo">
+  </div>
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        }
+      ]
+    },
+    // - ignoreHTMLTextContents: false
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+  <div>
+    foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
+    foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<input>
+  </div>
+</template>
+`,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        },
+        {
+          message: 'This line has a length of 88. Maximum allowed is 80.',
+          line: 5
+        }
+      ]
+    },
+    // code
+    {
+      filename: 'test.vue',
+      code: `<template><div> 41 cols </div></template>`,
+      errors: ['This line has a length of 41. Maximum allowed is 40.'],
+      options: [40]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div> 41 cols </div></template>`,
+      errors: ['This line has a length of 41. Maximum allowed is 40.'],
+      options: [{ code: 40 }]
+    },
+    // tabWidth
+    {
+      filename: 'test.vue',
+      code: `<template><div>\t41\tcols\t</div></template>`,
+      errors: ['This line has a length of 45. Maximum allowed is 40.'],
+      options: [40, 4]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div>\t41\tcols\t</div></template>`,
+      errors: ['This line has a length of 45. Maximum allowed is 40.'],
+      options: [{ code: 40, tabWidth: 4 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div>\t41\tcols\t</div></template>`,
+      errors: ['This line has a length of 44. Maximum allowed is 40.'],
+      options: [{ code: 40, tabWidth: 3 }]
+    },
+    // comments
+    {
+      filename: 'test.vue',
+      code: `
+<template>
+<!-- 41 cols                            *
+41 cols                                 *
+-->
+<div /> <!-- 41 cols comment                  -->
+</template>
+<script>
+// 41 cols                              *
+var a;  // 41 cols comment                      *
+
+/* 41 cols                              *
+41 cols                                 *
+*/
+</script>
+`,
+      errors: [
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 3
+        },
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 4
+        },
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 9
+        },
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 12
+        },
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 13
+        }
+      ],
+      options: [{ comments: 40 }]
+    },
+    // .js
+    {
+      filename: 'test.js',
+      code: `
+var a = '81 columns                                                            ';
+var b = \`81 columns                                                            \`;
+/* 81 columns                                                                  */
+      `,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 2
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        }
+      ],
+      options: []
+    },
+    {
+      filename: 'test.js',
+      code: `
+var a = '81 columns          ignoreStrings                                     ';
+var b = \`81 columns                                                            \`;
+/* 81 columns                                                                  */
+      `,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 4
+        }
+      ],
+      options: [{ ignoreStrings: true }]
+    },
+    {
+      filename: 'test.js',
+      code: `
+var a = '81 columns                                                            ';
+var b = \`81 columns                                                            \`;
+/* 81 columns                                                                  */
+      `,
+      errors: [
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 2
+        },
+        {
+          message: 'This line has a length of 81. Maximum allowed is 80.',
+          line: 3
+        }
+      ],
+      options: [{ ignoreComments: true }]
+    },
+    // only script comment
+    {
+      filename: 'test.js',
+      code: `
+// 41 cols                              *
+/* 41 cols                              *
+41 cols                                 *
+*/
+`,
+      errors: [
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 2
+        },
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 3
+        },
+        {
+          message: 'This line has a comment length of 41. Maximum allowed is 40.',
+          line: 4
+        }
+      ],
+      options: [{ comments: 40 }]
+    }
+  ]
+})