[Update] Make vue/html-quotes fixable (#275)

* Fix: incorrect errors in invalid EOF cases (fixes #268)

* Update: make vue/html-quotes fixable

Author: mysticatea

lib/rules/html-quotes.js

@@ -26,20 +26,38 @@ function create (context) {
   const double = context.options[0] !== 'single'
   const quoteChar = double ? '"' : "'"
   const quoteName = double ? 'double quotes' : 'single quotes'
+  const quotePattern = double ? /"/g : /'/g
+  const quoteEscaped = double ? '"' : '''
+  let hasInvalidEOF
 
   return utils.defineTemplateBodyVisitor(context, {
     'VAttribute[value!=null]' (node) {
+      if (hasInvalidEOF) {
+        return
+      }
+
       const text = sourceCode.getText(node.value)
       const firstChar = text[0]
+
       if (firstChar !== quoteChar) {
         context.report({
           node: node.value,
           loc: node.value.loc,
           message: 'Expected to be enclosed by {{kind}}.',
-          data: { kind: quoteName }
+          data: { kind: quoteName },
+          fix (fixer) {
+            const contentText = (firstChar === "'" || firstChar === '"') ? text.slice(1, -1) : text
+            const replacement = quoteChar + contentText.replace(quotePattern, quoteEscaped) + quoteChar
+
+            return fixer.replaceText(node.value, replacement)
+          }
         })
       }
     }
+  }, {
+    Program (node) {
+      hasInvalidEOF = utils.hasInvalidEOF(node)
+    }
   })
 }
 
@@ -54,7 +72,7 @@ module.exports = {
       description: 'enforce quotes style of HTML attributes',
       category: 'recommended'
     },
-    fixable: false,
+    fixable: 'code',
     schema: [
       { enum: ['double', 'single'] }
     ]

tests/lib/rules/html-quotes.js

@@ -54,91 +54,116 @@ tester.run('html-quotes', rule, {
       filename: 'test.vue',
       code: "<template><div :class='foo'></div></template>",
       options: ['single']
+    },
+
+    // Invalid EOF
+    {
+      code: '<template><div class="foo></div></template>',
+      options: ['single']
+    },
+    {
+      code: '<template><div class=\'foo></div></template>',
+      options: ['double']
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template><div class=foo></div></template>',
+      output: '<template><div class="foo"></div></template>',
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: "<template><div class='foo'></div></template>",
+      output: '<template><div class="foo"></div></template>',
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo></div></template>',
+      output: '<template><div :class="foo"></div></template>',
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: "<template><div :class='foo'></div></template>",
+      output: '<template><div :class="foo"></div></template>',
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo+"bar"></div></template>',
+      output: '<template><div :class="foo+&quot;bar&quot;"></div></template>',
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div class=foo></div></template>',
+      output: '<template><div class="foo"></div></template>',
       options: ['double'],
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: "<template><div class='foo'></div></template>",
+      output: '<template><div class="foo"></div></template>',
       options: ['double'],
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo></div></template>',
+      output: '<template><div :class="foo"></div></template>',
       options: ['double'],
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: "<template><div :class='foo'></div></template>",
+      output: '<template><div :class="foo"></div></template>',
       options: ['double'],
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo+"bar"></div></template>',
+      output: '<template><div :class="foo+&quot;bar&quot;"></div></template>',
       options: ['double'],
       errors: ['Expected to be enclosed by double quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div class=foo></div></template>',
+      output: '<template><div class=\'foo\'></div></template>',
       options: ['single'],
       errors: ['Expected to be enclosed by single quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div class="foo"></div></template>',
+      output: '<template><div class=\'foo\'></div></template>',
       options: ['single'],
       errors: ['Expected to be enclosed by single quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo></div></template>',
+      output: '<template><div :class=\'foo\'></div></template>',
       options: ['single'],
       errors: ['Expected to be enclosed by single quotes.']
     },
     {
       filename: 'test.vue',
       code: '<template><div :class="foo"></div></template>',
+      output: '<template><div :class=\'foo\'></div></template>',
       options: ['single'],
       errors: ['Expected to be enclosed by single quotes.']
     },
     {
       filename: 'test.vue',
       code: "<template><div :class=foo+'bar'></div></template>",
+      output: "<template><div :class='foo+&apos;bar&apos;'></div></template>",
       options: ['single'],
       errors: ['Expected to be enclosed by single quotes.']
     }