auto-fix

Author: jay-es

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "mocha tests/",
-    "test:watch": "mocha --watch tests/"
+    "test:watch": "mocha --watch --reporter min tests/"
   },
   "repository": {
     "type": "git",

rules/vue-sort-components.js

@@ -1,6 +1,8 @@
 // @ts-check
 "use strict";
 
+const naturalCompare = require("natural-compare");
+
 /**
  * @param {import('estree').Property} node
  * @returns {string}
@@ -12,6 +14,7 @@ const getKeyName = (node) =>
 module.exports = {
   meta: {
     type: "layout",
+    fixable: "code",
     messages: {
       sortComponents: "Component names must be sorted.",
     },
@@ -27,21 +30,27 @@ module.exports = {
           return;
         }
 
-        const keys = value.properties
-          .filter(
-            /** @returns {node is import('estree').Property} */
-            (node) => node.type === "Property"
-          )
-          .map((node) => getKeyName(node));
-
-        const sortedKeys = [...keys].sort();
-        const sameOrder = sortedKeys.every((v, i) => v === keys[i]);
+        const properties = value.properties.filter(
+          /** @returns {node is import('estree').Property} */
+          (node) => node.type === "Property"
+        );
+        const sorted = [...properties].sort((a, b) =>
+          naturalCompare(getKeyName(a), getKeyName(b))
+        );
+        const sameOrder = properties.every((v, i) => v === sorted[i]);
 
         if (sameOrder) return;
 
         context.report({
           node,
           messageId: "sortComponents",
+          fix(fixer) {
+            const sourceCode = context.getSourceCode();
+            const sortedCodes = sorted.map((node) => sourceCode.getText(node));
+            return properties.map((node, i) =>
+              fixer.replaceText(node, sortedCodes[i])
+            );
+          },
         });
       },
     };

tests/vue-sort-components.spec.js

@@ -8,35 +8,56 @@ const ruleTester = new RuleTester();
 
 ruleTester.run("vue-sort-components", rule, {
   valid: [
+    // single
     {
       code: "const obj = { components: { foo } }",
       parserOptions: { ecmaVersion: 6 },
     },
+    // multiple
     {
       code: "const obj = { components: { bar, baz, foo } }",
       parserOptions: { ecmaVersion: 6 },
     },
+    // multiple, not shorthand
+    {
+      code: "const obj = { components: { bar: 0, baz: 1, foo: 2 } }",
+      parserOptions: { ecmaVersion: 6 },
+    },
+    // nested
     {
       code: "const obj = { nested: { components: { bar, baz, foo } } }",
       parserOptions: { ecmaVersion: 6 },
     },
+    // not components
     {
-      code: "const obj = { foo, bar }",
+      code: "const obj = { nested: { foo, bar } }",
       parserOptions: { ecmaVersion: 6 },
     },
+    // array
     {
       code: "const obj = { components: [ foo, bar, baz ] }",
       parserOptions: { ecmaVersion: 6 },
     },
   ],
   invalid: [
+    // multiple
     {
       code: "const obj = { components: { foo, bar, baz } }",
+      output: "const obj = { components: { bar, baz, foo } }",
+      parserOptions: { ecmaVersion: 6 },
+      errors: [{ messageId: "sortComponents" }],
+    },
+    // multiple, not shorthand
+    {
+      code: "const obj = { components: { foo: 0, bar: 1, baz: 2 } }",
+      output: "const obj = { components: { bar: 1, baz: 2, foo: 0 } }",
       parserOptions: { ecmaVersion: 6 },
       errors: [{ messageId: "sortComponents" }],
     },
+    // nested
     {
       code: "const obj = { nested: { components: { foo, bar, baz } } }",
+      output: "const obj = { nested: { components: { bar, baz, foo } } }",
       parserOptions: { ecmaVersion: 6 },
       errors: [{ messageId: "sortComponents" }],
     },