v1.0.61

Enforce multiline props

index.js

@@ -36,6 +36,7 @@ module.exports = {
     "vue-header-check": require("./rules/vue-header-check"),
     "vue-html-quotes": require("./rules/vue-html-quotes"),
     "vue-no-regex-data": require("./rules/vue-no-regex-data"),
-    "vue-props-declaration-order": require("./rules/vue-props-declaration-order")
+    "vue-props-declaration-order": require("./rules/vue-props-declaration-order"),
+    "vue-props-declaration-multiline": require("./rules/vue-props-declaration-multiline")
   }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-crisp",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Custom ESLint Rules for Crisp",
   "author": "Crisp IM SAS",
   "main": "index.js",

recommended-vue.js

@@ -238,6 +238,7 @@ module.exports = {
     "vue/html-quotes": "off",
     "vue/no-v-html": "off",
     "vue/prefer-true-attribute-shorthand": "error",
+    "vue/require-name-property": "error",
     "vue/comma-dangle": "error",
     "vue/eqeqeq": "error",
     "vue/key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
@@ -321,6 +322,7 @@ module.exports = {
     "crisp/vue-header-check": "error",
     "crisp/vue-html-quotes": "error",
     "crisp/vue-no-regex-data": "error",
+    "crisp/vue-props-declaration-multiline": "error",
     "crisp/vue-props-declaration-order": "error"
   }
 }

rules/vue-props-declaration-multiline.js

@@ -0,0 +1,46 @@
+module.exports = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "enforce multi-line declaration for Vue props",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [], // no options
+  },
+
+  create(context) {
+    return {
+      'ExportDefaultDeclaration Property[key.name="props"] ObjectExpression'(node) {
+        node.properties.forEach(prop => {
+          // Ensuring we only target the top-level prop definitions
+          if (prop.value.type === "ObjectExpression") {
+            const propDefinition = prop.value;
+
+            // Check if the prop definition is on a single line
+            if (propDefinition.loc.start.line === propDefinition.loc.end.line) {
+              context.report({
+                node: prop,
+                message: "Props should be declared in multiple lines.",
+
+                fix(fixer) {
+                  const sourceCode = context.getSourceCode();
+                  const propText = sourceCode.getText(propDefinition);
+
+                  // Construct the multi-line version of the prop
+                  const expandedProp = propText
+                    .replace("{", "{\n")
+                    .replace("}", "\n}")
+                    .replace(/, /g, ",\n");
+
+                  return fixer.replaceText(propDefinition, expandedProp);
+                }
+              });
+            }
+          }
+        });
+      }
+    };
+  }
+};