From ff5bfdc3e5197ffd67d51ea4a545606d893007ed Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 2 Jan 2018 22:52:52 +0900
Subject: [PATCH 1/2] New: directive comments (fixes #260)

---
 README.md                            |   1 +
 docs/rules/comment-directive.md      |  24 ++++
 lib/base-rules.js                    |   1 +
 lib/essential-rules.js               |   1 +
 lib/index.js                         |   4 +-
 lib/processor.js                     |  60 +++++++++
 lib/recommended-rules.js             |   1 +
 lib/rules/comment-directive.js       | 132 ++++++++++++++++++
 lib/strongly-recommended-rules.js    |   1 +
 tests/lib/rules/comment-directive.js | 195 +++++++++++++++++++++++++++
 10 files changed, 419 insertions(+), 1 deletion(-)
 create mode 100644 docs/rules/comment-directive.md
 create mode 100644 lib/processor.js
 create mode 100644 lib/rules/comment-directive.js
 create mode 100644 tests/lib/rules/comment-directive.js

diff --git a/README.md b/README.md
index 4ef106767..4c83beebf 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 
 |    | Rule ID | Description |
 |:---|:--------|:------------|
+|  | [comment-directive](./docs/rules/comment-directive.md) | support comment-directives in `<template>` |
 |  | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
 
 
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
new file mode 100644
index 000000000..c37705d4b
--- /dev/null
+++ b/docs/rules/comment-directive.md
@@ -0,0 +1,24 @@
+# support comment-directives in `<template>` (comment-directive)
+
+This rule supports the following comment directives in `<template>`:
+
+- `eslint-disable`
+- `eslint-enable`
+- `eslint-disable-line`
+- `eslint-disable-next-line`
+
+For example:
+
+```html
+<template>
+  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
+  <div a="1" b="2" c="3" d="4">
+  </div>
+</template>
+```
+
+This rule doesn't make any warning.
+
+## Further reading
+
+- [Disabling rules with inline comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)
diff --git a/lib/base-rules.js b/lib/base-rules.js
index 338b9c97b..53cde306e 100644
--- a/lib/base-rules.js
+++ b/lib/base-rules.js
@@ -4,5 +4,6 @@
 * in order to update it's content execute "npm run update"
 */
 module.exports = {
+  "vue/comment-directive": "error",
   "vue/jsx-uses-vars": "error"
 }
\ No newline at end of file
diff --git a/lib/essential-rules.js b/lib/essential-rules.js
index e918cb366..0d94c171e 100644
--- a/lib/essential-rules.js
+++ b/lib/essential-rules.js
@@ -4,6 +4,7 @@
 * in order to update it's content execute "npm run update"
 */
 module.exports = {
+  "vue/comment-directive": "error",
   "vue/jsx-uses-vars": "error",
   "vue/no-async-in-computed-properties": "error",
   "vue/no-dupe-keys": "error",
diff --git a/lib/index.js b/lib/index.js
index 08eac9a0a..ba9eebe61 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -11,8 +11,10 @@ const configs = requireAll({
   dirname: resolve(__dirname, 'config'),
   filter: /^([\w\-]+)\.js$/
 })
+const processor = require('./processor')
 
 module.exports = {
   rules,
-  configs
+  configs,
+  processors: { '.vue': processor }
 }
diff --git a/lib/processor.js b/lib/processor.js
new file mode 100644
index 000000000..785276df1
--- /dev/null
+++ b/lib/processor.js
@@ -0,0 +1,60 @@
+/**
+ * @author Toru Nagashima <https://github.com/mysticatea>
+ */
+'use strict'
+
+module.exports = {
+  preprocess (code) {
+    return [code]
+  },
+
+  postprocess (messages) {
+    const state = {
+      block: {
+        disableAll: false,
+        disableRules: new Set()
+      },
+      line: {
+        disableAll: false,
+        disableRules: new Set()
+      }
+    }
+
+    // Filter messages which are in disabled area.
+    return messages[0].filter(message => {
+      if (message.ruleId === 'vue/comment-directive') {
+        const rules = message.message.split(' ')
+        const type = rules.shift()
+        const group = rules.shift()
+        switch (type) {
+          case '--':
+            state[group].disableAll = true
+            break
+          case '++':
+            state[group].disableAll = false
+            break
+          case '-':
+            for (const rule of rules) {
+              state[group].disableRules.add(rule)
+            }
+            break
+          case '+':
+            for (const rule of rules) {
+              state[group].disableRules.delete(rule)
+            }
+            break
+        }
+        return false
+      } else {
+        return !(
+          state.block.disableAll ||
+          state.line.disableAll ||
+          state.block.disableRules.has(message.ruleId) ||
+          state.line.disableRules.has(message.ruleId)
+        )
+      }
+    })
+  },
+
+  supportsAutofix: true
+}
diff --git a/lib/recommended-rules.js b/lib/recommended-rules.js
index b11f218a5..2ce4178c0 100644
--- a/lib/recommended-rules.js
+++ b/lib/recommended-rules.js
@@ -5,6 +5,7 @@
 */
 module.exports = {
   "vue/attribute-hyphenation": "error",
+  "vue/comment-directive": "error",
   "vue/html-end-tags": "error",
   "vue/html-indent": "error",
   "vue/html-quotes": "error",
diff --git a/lib/rules/comment-directive.js b/lib/rules/comment-directive.js
new file mode 100644
index 000000000..4afe81095
--- /dev/null
+++ b/lib/rules/comment-directive.js
@@ -0,0 +1,132 @@
+/**
+ * @author Toru Nagashima <https://github.com/mysticatea>
+ */
+
+'use strict'
+
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+
+const COMMENT_DIRECTIVE_B = /^\s*(eslint-(?:en|dis)able)\s*(?:(\S|\S[\s\S]*\S)\s*)?$/
+const COMMENT_DIRECTIVE_L = /^\s*(eslint-disable(?:-next)?-line)\s*(?:(\S|\S[\s\S]*\S)\s*)?$/
+
+/**
+ * Parse a given comment.
+ * @param {RegExp} pattern The RegExp pattern to parse.
+ * @param {string} comment The comment value to parse.
+ * @returns {({type:string,rules:string[]})|null} The parsing result.
+ */
+function parse (pattern, comment) {
+  const match = pattern.exec(comment)
+  if (match == null) {
+    return null
+  }
+
+  const type = match[1]
+  const rules = (match[2] || '')
+    .split(',')
+    .map(s => s.trim())
+    .filter(Boolean)
+
+  return { type, rules }
+}
+
+/**
+ * Enable rules.
+ * @param {RuleContext} context The rule context.
+ * @param {{line:number,column:number}} loc The location information to enable.
+ * @param {string} group The group to enable.
+ * @param {string[]} rules The rule IDs to enable.
+ * @returns {void}
+ */
+function enable (context, loc, group, rules) {
+  if (rules.length === 0) {
+    context.report({ loc, message: '++ {{group}}', data: { group }})
+  } else {
+    context.report({ loc, message: '+ {{group}} {{rules}}', data: { group, rules: rules.join(' ') }})
+  }
+}
+
+/**
+ * Disable rules.
+ * @param {RuleContext} context The rule context.
+ * @param {{line:number,column:number}} loc The location information to disable.
+ * @param {string} group The group to disable.
+ * @param {string[]} rules The rule IDs to disable.
+ * @returns {void}
+ */
+function disable (context, loc, group, rules) {
+  if (rules.length === 0) {
+    context.report({ loc, message: '-- {{group}}', data: { group }})
+  } else {
+    context.report({ loc, message: '- {{group}} {{rules}}', data: { group, rules: rules.join(' ') }})
+  }
+}
+
+/**
+ * Process a given comment token.
+ * If the comment is `eslint-disable` or `eslint-enable` then it reports the comment.
+ * @param {RuleContext} context The rule context.
+ * @param {Token} comment The comment token to process.
+ * @returns {void}
+ */
+function processBlock (context, comment) {
+  const parsed = parse(COMMENT_DIRECTIVE_B, comment.value)
+  if (parsed != null) {
+    if (parsed.type === 'eslint-disable') {
+      disable(context, comment.loc.start, 'block', parsed.rules)
+    } else {
+      enable(context, comment.loc.start, 'block', parsed.rules)
+    }
+  }
+}
+
+/**
+ * Process a given comment token.
+ * If the comment is `eslint-disable-line` or `eslint-disable-next-line` then it reports the comment.
+ * @param {RuleContext} context The rule context.
+ * @param {Token} comment The comment token to process.
+ * @returns {void}
+ */
+function processLine (context, comment) {
+  const parsed = parse(COMMENT_DIRECTIVE_L, comment.value)
+  if (parsed != null && comment.loc.start.line === comment.loc.end.line) {
+    const line = comment.loc.start.line + (parsed.type === 'eslint-disable-line' ? 0 : 1)
+    const column = -1
+    disable(context, { line, column }, 'line', parsed.rules)
+    enable(context, { line: line + 1, column }, 'line', parsed.rules)
+  }
+}
+
+/**
+ * The implementation of `vue/comment-directive` rule.
+ * @param {Program} node The program node to parse.
+ * @returns {Object} The visitor of this rule.
+ */
+function create (context) {
+  return {
+    Program (node) {
+      const comments = (node.templateBody && node.templateBody.comments) || []
+      for (const comment of comments) {
+        processBlock(context, comment)
+        processLine(context, comment)
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Rule Definition
+// -----------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'support comment-directives in `<template>`', // eslint-disable-line consistent-docs-description
+      category: 'base'
+    },
+    schema: []
+  },
+  create
+}
diff --git a/lib/strongly-recommended-rules.js b/lib/strongly-recommended-rules.js
index 881814f61..55a451cfe 100644
--- a/lib/strongly-recommended-rules.js
+++ b/lib/strongly-recommended-rules.js
@@ -5,6 +5,7 @@
 */
 module.exports = {
   "vue/attribute-hyphenation": "error",
+  "vue/comment-directive": "error",
   "vue/html-end-tags": "error",
   "vue/html-indent": "error",
   "vue/html-self-closing": "error",
diff --git a/tests/lib/rules/comment-directive.js b/tests/lib/rules/comment-directive.js
new file mode 100644
index 000000000..32de76a68
--- /dev/null
+++ b/tests/lib/rules/comment-directive.js
@@ -0,0 +1,195 @@
+/**
+ * @fileoverview Tests for comment-directive rule.
+ * @author Toru Nagashima
+ */
+
+'use strict'
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+const assert = require('assert')
+const path = require('path')
+const Module = require('module')
+const eslint = require('eslint')
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+// Initialize linter.
+const linter = new eslint.CLIEngine({
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2015
+  },
+  plugins: ['vue'],
+  rules: {
+    'vue/comment-directive': 'error',
+    'vue/no-parsing-error': 'error',
+    'vue/no-duplicate-attributes': 'error'
+  },
+  useEslintrc: false
+})
+
+describe('comment-directive', () => {
+  // Preparation.
+  // Make `require("eslint-plugin-vue")` loading this plugin while this test.
+  const resolveFilename = Module._resolveFilename
+  before(() => {
+    Module._resolveFilename = function (id) {
+      if (id === 'eslint-plugin-vue') {
+        return path.resolve(__dirname, '../../../lib/index.js')
+      }
+      return resolveFilename.apply(this, arguments)
+    }
+  })
+  after(() => {
+    Module._resolveFilename = resolveFilename
+  })
+
+  describe('eslint-disable/eslint-enable', () => {
+    it('disable all rules if <!-- eslint-disable -->', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable -->
+          <div id id="a">Hello</div>
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 0)
+    })
+
+    it('disable specific rules if <!-- eslint-disable vue/no-duplicate-attributes -->', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable vue/no-duplicate-attributes -->
+          <div id id="a">Hello</div>
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 1)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+    })
+
+    it('enable all rules if <!-- eslint-enable -->', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable -->
+          <div id id="a">Hello</div>
+          <!-- eslint-enable -->
+          <div id id="a">Hello</div>
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 2)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+      assert.deepEqual(messages[0].line, 6)
+      assert.deepEqual(messages[1].ruleId, 'vue/no-duplicate-attributes')
+      assert.deepEqual(messages[1].line, 6)
+    })
+
+    it('enable specific rules if <!-- eslint-enable vue/no-duplicate-attributes -->', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable vue/no-parsing-error, vue/no-duplicate-attributes -->
+          <div id id="a">Hello</div>
+          <!-- eslint-enable vue/no-duplicate-attributes -->
+          <div id id="a">Hello</div>
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 1)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-duplicate-attributes')
+      assert.deepEqual(messages[0].line, 6)
+    })
+  })
+
+  describe('eslint-disable-line', () => {
+    it('disable all rules if <!-- eslint-disable-line -->', () => {
+      const code = `
+        <template>
+          <div id id="a">Hello</div> <!-- eslint-disable-line -->
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 0)
+    })
+
+    it('disable specific rules if <!-- eslint-disable-line vue/no-duplicate-attributes -->', () => {
+      const code = `
+        <template>
+          <div id id="a">Hello</div> <!-- eslint-disable-line vue/no-duplicate-attributes -->
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 1)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+    })
+
+    it('don\'t disable rules if <!-- eslint-disable-line --> is on another line', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable-line -->
+          <div id id="a">Hello</div>
+          <!-- eslint-disable-line -->
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 2)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+      assert.deepEqual(messages[1].ruleId, 'vue/no-duplicate-attributes')
+    })
+  })
+
+  describe('eslint-disable-next-line', () => {
+    it('disable all rules if <!-- eslint-disable-next-line -->', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable-next-line -->
+          <div id id="a">Hello</div>
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 0)
+    })
+
+    it('disable specific rules if <!-- eslint-disable-next-line vue/no-duplicate-attributes -->', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable-next-line vue/no-duplicate-attributes -->
+          <div id id="a">Hello</div>
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 1)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+    })
+
+    it('don\'t disable rules if <!-- eslint-disable-next-line --> is on another line', () => {
+      const code = `
+        <template>
+          <!-- eslint-disable-next-line -->
+
+          <div id id="a">Hello</div> <!-- eslint-disable-next-line -->
+          <!-- eslint-disable-next-line -->
+        </template>
+      `
+      const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+      assert.deepEqual(messages.length, 2)
+      assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+      assert.deepEqual(messages[1].ruleId, 'vue/no-duplicate-attributes')
+    })
+  })
+})

From 3afe9ceb489f1744a03e9cb1ad48795bde2fa61c Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 6 Jan 2018 15:47:29 +0900
Subject: [PATCH 2/2] Docs: update docs

---
 README.md                       | 14 ++++++++++++++
 docs/rules/comment-directive.md | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4c83beebf..9320875a6 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,20 @@ Vue.component('AsyncComponent', (resolve, reject) => {
 })
 ```
 
+### `eslint-disable` functionality in `<template>`
+
+You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files. For example:
+
+```html
+<template>
+  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
+  <div a="1" b="2" c="3" d="4">
+  </div>
+</template>
+```
+
+If you want to disallow `eslint-disable` functionality, please disable [vue/comment-directive](./docs/rules/comment-directive.md) rule.
+
 ## :gear: Configs
 
 This plugin provides two predefined configs:
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index c37705d4b..fd03e101f 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -1,6 +1,7 @@
 # support comment-directives in `<template>` (comment-directive)
 
-This rule supports the following comment directives in `<template>`:
+Sole purpose of this rule is to provide `eslint-disable` functionality in `<template>`.
+It supports usage of the following comments:
 
 - `eslint-disable`
 - `eslint-enable`
@@ -17,8 +18,16 @@ For example:
 </template>
 ```
 
-This rule doesn't make any warning.
+> Note: we can't write HTML comments in tags.
 
-## Further reading
+This rule doesn't throw any warning.
+
+## :book: Rule Details
+
+ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESLint rules cannot affect other rules. But ESLint provides [processors API](https://eslint.org/docs/developer-guide/working-with-plugins#processors-in-plugins).
+
+This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
+
+## :books: Further reading
 
 - [Disabling rules with inline comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)