eslint-plugin-crisp 1.7.0 → 1.7.1

package/index.js

@@ -57,6 +57,7 @@ import ruleVueMethodsSeparator from "./rules/vue-methods-separator.js";
 import ruleVueNameProp from "./rules/vue-name-prop.js";
 import ruleVueNoComponentClassShorthand from "./rules/vue-no-component-class-shorthand.js";
 import ruleVueNoMixedClass from "./rules/vue-no-mixed-class.js";
+import ruleVueNoMixedClassShorthand from "./rules/vue-no-mixed-class-shorthand.js";
 import ruleVueNoNameOption from "./rules/vue-no-name-option.js";
 import ruleVueNoRegexData from "./rules/vue-no-regex-data.js";
 import ruleVuePiniaActionSingleParameter from "./rules/vue-pinia-action-single-parameter.js";
@@ -135,6 +136,7 @@ const plugin = {
     "vue-name-prop": ruleVueNameProp,
     "vue-no-component-class-shorthand": ruleVueNoComponentClassShorthand,
     "vue-no-mixed-class": ruleVueNoMixedClass,
+    "vue-no-mixed-class-shorthand": ruleVueNoMixedClassShorthand,
     "vue-no-name-option": ruleVueNoNameOption,
     "vue-no-regex-data": ruleVueNoRegexData,
     "vue-pinia-action-single-parameter": ruleVuePiniaActionSingleParameter,

package/package.json

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

package/recommended-vue.js

@@ -391,6 +391,7 @@ export default function configRecommendedVue(pluginCrisp) {
         "crisp/vue-name-prop": "error",
         "crisp/vue-no-component-class-shorthand": "error",
         "crisp/vue-no-mixed-class": "error",
+        "crisp/vue-no-mixed-class-shorthand": "error",
         "crisp/vue-no-name-option": "error",
         "crisp/vue-no-regex-data": "error",
         "crisp/vue-pinia-action-single-parameter": "error",

package/rules/header-comments-check.js

@@ -2,6 +2,12 @@ const COMMENT_HEADER_FORMAT = (section) => {
   return `/**************************************************************************\n * ${section.toUpperCase()}\n ***************************************************************************/`;
 };
 
+const HEADER_COMMENT_REGEX = /^\*+\n \* [A-Z][A-Z0-9 _:-]*\n \*+$/;
+
+function isHeaderComment(comment) {
+  return comment.type === "Block" && HEADER_COMMENT_REGEX.test(comment.value);
+}
+
 function isTypeComment(comment) {
   if (comment.type !== "Block" || !comment.value.startsWith("*")) {
     return false;
@@ -109,7 +115,7 @@ export default {
       category: "Best Practices",
       recommended: false,
     },
-    fixable: null,
+    fixable: "whitespace",
   },
 
   create(context) {
@@ -224,6 +230,30 @@ export default {
       }
     }
 
+    // Checks that a header comment block is followed by a blank line
+    function checkBlankLineAfterHeaders() {
+      for (const comment of allBlockComments) {
+        if (!isHeaderComment(comment)) {
+          continue;
+        }
+
+        const next = sourceCode.getTokenAfter(comment, { includeComments: true });
+
+        if (!next || next.loc.start.line - comment.loc.end.line >= 2) {
+          continue;
+        }
+
+        const isOnNextLine = next.loc.start.line - comment.loc.end.line === 1;
+
+        context.report({
+          loc: comment.loc,
+          message: "Header comment block must be followed by a blank line",
+
+          fix: isOnNextLine ? (fixer) => fixer.insertTextAfter(comment, "\n") : null,
+        });
+      }
+    }
+
     return {
       ":statement": (node) => {
         if (node.parent.type !== "Program") {
@@ -256,6 +286,9 @@ export default {
 
         // Check type comments group
         checkTypeCommentsGroup();
+
+        // Check blank line after header comments
+        checkBlankLineAfterHeaders();
       }
     };
   }

package/rules/vue-no-mixed-class-shorthand.js

@@ -0,0 +1,65 @@
+import utils from "eslint-plugin-vue/dist/utils/index.js";
+
+const CLASS_SHORTHAND_PATTERN = /\.[A-Za-z_][\w-]*/;
+
+// Checks whether a Pug element name belongs to a Vue component
+function isComponent(node) {
+  return node.name.includes("-") || /^[A-Z]/.test(node.rawName);
+}
+
+// Checks whether an attribute is a class attribute
+function isClassAttribute(attribute) {
+  if (attribute.directive === false) {
+    return attribute.key.name === "class";
+  }
+
+  return (
+    attribute.key.name.name === "bind" &&
+    attribute.key.argument !== null &&
+    attribute.key.argument.type === "VIdentifier" &&
+    attribute.key.argument.name === "class"
+  );
+}
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "disallow mixing Pug class shorthand and class attributes",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: null,
+    schema: [], // no options
+    messages: {
+      useClassAttribute:
+        "Move all Pug class shorthands to the class attribute.",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+
+    return utils.default.defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        if (isComponent(node)) {
+          return;
+        }
+
+        const startTagText = sourceCode.getText(node.startTag);
+        const elementHead = startTagText.split(/[\s(]/, 1)[0];
+        const classAttribute = node.startTag.attributes.find(isClassAttribute);
+
+        if (
+          classAttribute &&
+          CLASS_SHORTHAND_PATTERN.test(elementHead)
+        ) {
+          context.report({
+            node: classAttribute,
+            messageId: "useClassAttribute",
+          });
+        }
+      },
+    });
+  },
+};

package/tests/rules/header-comments-check.test.js

@@ -12,17 +12,17 @@ ruleTester.run("header-comments-check", rule, {
   valid: [
     {
       filename: "/project/src/example.js",
-      code: `${header("IMPORTS")}\nimport value from "package";`
+      code: `${header("IMPORTS")}\n\nimport value from "package";`
     },
     {
       filename: "/project/src/example.ts",
-      code: `${header("CONSTANTS")}\nconst MAX_RETRIES = 3;\n\n${header("INSTANCES")}\nconst pattern = /value/;`
+      code: `${header("CONSTANTS")}\n\nconst MAX_RETRIES = 3;\n\n${header("INSTANCES")}\n\nconst pattern = /value/;`
     },
     {
       filename: "/project/src/example.js",
       code:
-        `${header("TYPES")}\n/** @typedef {string} Identifier */\n\n` +
-        `${header("EXPORTS")}\nexport default {};`
+        `${header("TYPES")}\n\n/** @typedef {string} Identifier */\n\n` +
+        `${header("EXPORTS")}\n\nexport default {};`
     },
     {
       filename: "/project/src/example.js",
@@ -30,12 +30,12 @@ ruleTester.run("header-comments-check", rule, {
     },
     {
       filename: "/project/src/example.js",
-      code: `${header("MIXIN TO MANAGE HANDOFF")}\nexport default {};`
+      code: `${header("MIXIN TO MANAGE HANDOFF")}\n\nexport default {};`
     },
     {
       filename: "/project/src/example.js",
       code:
-        `${header("IMPORTS")}\nimport first from "first";\n` +
+        `${header("IMPORTS")}\n\nimport first from "first";\n` +
         "import second from \"second\";"
     },
     {
@@ -84,6 +84,26 @@ ruleTester.run("header-comments-check", rule, {
           message: "Type comments group must be preceded by a 'TYPES' comment block"
         }
       ]
+    },
+    {
+      filename: "/project/src/example.js",
+      code: `${header("CONSTANTS")}\nconst MAX_RETRIES = 3;`,
+      output: `${header("CONSTANTS")}\n\nconst MAX_RETRIES = 3;`,
+      errors: [
+        {
+          message: "Header comment block must be followed by a blank line"
+        }
+      ]
+    },
+    {
+      filename: "/project/src/example.js",
+      code: `${header("IMPORTS")}\n// NPM\nimport value from "package";`,
+      output: `${header("IMPORTS")}\n\n// NPM\nimport value from "package";`,
+      errors: [
+        {
+          message: "Header comment block must be followed by a blank line"
+        }
+      ]
     }
   ]
 });

package/tests/rules/vue-no-mixed-class-shorthand.test.js

@@ -0,0 +1,57 @@
+import rule from "../../rules/vue-no-mixed-class-shorthand.js";
+import { createPugRuleTester } from "../rule-tester.js";
+
+const ruleTester = createPugRuleTester();
+const filename = "TestComponent.vue";
+
+ruleTester.run("vue-no-mixed-class-shorthand", rule, {
+  valid: [
+    {
+      filename,
+      code: `<template lang="pug">
+  .panel
+  div(:class="classes")
+  div(class="panel")
+</template>`
+    },
+    {
+      filename,
+      code: `<template lang="pug">
+  UserCard.panel(:class="classes")
+  user-card.panel(class="card")
+</template>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename,
+      code: `<template lang="pug">
+  .c-conversation-box-content-message-controls__action(
+    @click="onActionTranscribeClick"
+    :class="\`js-audio-transcription-action-\${fingerprint}\`"
+  )
+</template>`,
+      errors: [
+        {
+          messageId: "useClassAttribute"
+        }
+      ]
+    },
+    {
+      filename,
+      code: `<template lang="pug">
+  div.panel(class="active")
+  section#details.panel(v-bind:class="classes")
+</template>`,
+      errors: [
+        {
+          messageId: "useClassAttribute"
+        },
+        {
+          messageId: "useClassAttribute"
+        }
+      ]
+    }
+  ]
+});