⭐️New: Add vue/no-spaces-around-equal-signs-in-attribute

README.md

@@ -232,6 +232,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 | :wrench: | [vue/component-name-in-template-casing](./docs/rules/component-name-in-template-casing.md) | enforce specific casing for the component naming style in template |
+| :wrench: | [vue/no-spaces-around-equal-signs-in-attribute](./docs/rules/no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute |
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
 
 ### Deprecated

docs/rules/no-spaces-around-equal-signs-in-attribute.md

@@ -0,0 +1,25 @@
+# disallow spaces around equal signs in attribute (vue/no-spaces-around-equal-signs-in-attribute)
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+This rule disallow spaces around equal signs in attribute.
+
+HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together.
+
+## :book: Rule Details
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<div class = "item">
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<div class="item">
+```
+
+## Further Reading
+
+* [HTML5 Style Guide - W3Schools *Spaces and Equal Signs*](https://www.w3schools.com/html/html5_syntax.asp)

lib/index.js

@@ -30,6 +30,7 @@ module.exports = {
     'no-reserved-keys': require('./rules/no-reserved-keys'),
     'no-shared-component-data': require('./rules/no-shared-component-data'),
     'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
+    'no-spaces-around-equal-signs-in-attribute': require('./rules/no-spaces-around-equal-signs-in-attribute'),
     'no-template-key': require('./rules/no-template-key'),
     'no-template-shadow': require('./rules/no-template-shadow'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),

lib/rules/no-spaces-around-equal-signs-in-attribute.js

@@ -0,0 +1,54 @@
+/**
+ * @author Yosuke Ota
+ * issue https://github.com/vuejs/eslint-plugin-vue/issues/460
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'disallow spaces around equal signs in attribute',
+      category: undefined,
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.2/docs/rules/no-spaces-around-equal-signs-in-attribute.md'
+    },
+    fixable: 'whitespace',
+    schema: []
+  },
+
+  create (context) {
+    const sourceCode = context.getSourceCode()
+    return utils.defineTemplateBodyVisitor(context, {
+      'VAttribute' (node) {
+        if (!node.value) {
+          return
+        }
+        const range = [node.key.range[1], node.value.range[0]]
+        const eqText = sourceCode.text.slice(range[0], range[1])
+        const expect = eqText.trim()
+
+        if (eqText !== expect) {
+          context.report({
+            node: node.key,
+            loc: {
+              start: node.key.loc.end,
+              end: node.value.loc.start
+            },
+            message: 'Unexpected spaces found around equal signs.',
+            data: {},
+            fix: fixer => fixer.replaceTextRange(range, expect)
+          })
+        }
+      }
+    })
+  }
+}

tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js

@@ -0,0 +1,234 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-spaces-around-equal-signs-in-attribute')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: 'vue-eslint-parser'
+})
+
+tester.run('no-spaces-around-equal-signs-in-attribute', rule, {
+  valid: [
+    '<template><div attr="value" /></template>',
+    '<template><div attr="" /></template>',
+    '<template><div attr=\'value\' /></template>',
+    '<template><div attr=value /></template>',
+    '<template><div attr /></template>',
+    '<template><div/></template>',
+    `<template>
+      <div
+        is="header"
+        v-for="item in items"
+        v-if="!visible"
+        v-once
+        id="uniqueID"
+        ref="header"
+        v-model="headerData"
+        myProp="prop"
+        @click="functionCall"
+        v-text="textContent">
+      </div>
+    </template>`
+  ],
+  invalid: [
+    {
+      code: '<template><div attr = "value" /></template>',
+      output: '<template><div attr="value" /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      code: '<template><div attr = "" /></template>',
+      output: '<template><div attr="" /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      code: '<template><div attr = \'value\' /></template>',
+      output: '<template><div attr=\'value\' /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      code: '<template><div attr = value /></template>',
+      output: '<template><div attr=value /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      code: '<template><div attr \t\n   =   \t\n "value" /></template>',
+      output: '<template><div attr="value" /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 3,
+          endColumn: 2
+        }
+      ]
+    },
+    {
+      code: '<template><div attr ="value" /></template>',
+      output: '<template><div attr="value" /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      code: '<template><div attr= "value" /></template>',
+      output: '<template><div attr="value" /></template>',
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      code:
+        `<template>
+          <div
+            is = "header"
+            v-for = "item in items"
+            v-if = "!visible"
+            v-once
+            id = "uniqueID"
+            ref = "header"
+            v-model = "headerData"
+            myProp = "prop"
+            @click = "functionCall"
+            v-text = "textContent">
+          </div>
+        </template>`,
+      output:
+        `<template>
+          <div
+            is="header"
+            v-for="item in items"
+            v-if="!visible"
+            v-once
+            id="uniqueID"
+            ref="header"
+            v-model="headerData"
+            myProp="prop"
+            @click="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`,
+      errors: [
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 3,
+          column: 15,
+          endLine: 3,
+          endColumn: 18
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 21
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 20
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 18
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 8,
+          column: 16,
+          endLine: 8,
+          endColumn: 19
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 9,
+          column: 20,
+          endLine: 9,
+          endColumn: 23
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 10,
+          column: 19,
+          endLine: 10,
+          endColumn: 22
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 11,
+          column: 19,
+          endLine: 11,
+          endColumn: 22
+        },
+        {
+          message: 'Unexpected spaces found around equal signs.',
+          line: 12,
+          column: 19,
+          endLine: 12,
+          endColumn: 22
+        }
+      ]
+    }
+  ]
+})