eslint-plugin-crisp 1.0.84 → 1.0.86

package/README.md

@@ -191,9 +191,11 @@ Each item has emojis denoting:
 
 | Name | Description | 🟠 | 🟢 |
 | :- | :- | :- | :- |
+| [crisp/vue-attribute-linebreak](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-attribute-linebreak.js) | Enforces linebreak before first attribute and after last attribute |  | 🟢 |
 | [crisp/vue-computed-order](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-computed-order.js) | Ensures computed properties are alphabetically ordered |  | 🟢 |
 | [crisp/vue-emits-order](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-emits-order.js) | Ensures emits properties are alphabetically ordered |  | 🟢 |
 | [crisp/vue-header-check](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-header-check.js) | Ensures `script`, `template` and `style` tags start with corresponding comment block |  | 🟢 |
+| [crisp/vue-html-indent](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-html-indent.js) | Enforces consistent indentation in `template` (supports for Pug) |  | 🟢 |
 | [crisp/vue-html-quotes](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-html-quotes.js) | Enforces HTML attributes to be enclosed with double quotes |  | 🟢 |
 | [crisp/vue-no-regex-data](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-regex-data.js) | Disallows regular expressions to be declared in Vue data object |  | 🟢 |
 | [crisp/vue-props-declaration-multiline](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-props-declaration-multiline.js) | Enforces props declarations to be multiline |  | 🟢 |

package/index.js

@@ -34,9 +34,11 @@ module.exports = {
     "ternary-parenthesis": require("./rules/ternary-parenthesis"),
     "two-lines-between-class-members": require("./rules/two-lines-between-class-members"),
     "variable-names": require("./rules/variable-names"),
+    "vue-attribute-linebreak": require("./rules/vue-attribute-linebreak"),
     "vue-computed-order": require("./rules/vue-computed-order"),
     "vue-emits-order": require("./rules/vue-emits-order"),
     "vue-header-check": require("./rules/vue-header-check"),
+    "vue-html-indent": require("./rules/vue-html-indent"),
     "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"),

package/package.json

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

package/recommended-vue.js

@@ -334,9 +334,11 @@ module.exports = {
     ],
 
     // Crisp Vue rules
+    "crisp/vue-attribute-linebreak": "error",
     "crisp/vue-computed-order": "error",
     "crisp/vue-emits-order": "error",
     "crisp/vue-header-check": "error",
+    "crisp/vue-html-indent": "error",
     "crisp/vue-html-quotes": "error",
     "crisp/vue-no-regex-data": "error",
     "crisp/vue-props-declaration-multiline": "error",

package/rules/vue-attribute-linebreak.js

@@ -0,0 +1,47 @@
+module.exports = {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "enforce the location of first and last attributes",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: null
+  },
+
+  create(context) {
+    function report(attribute, location) {
+      context.report({
+        node: attribute,
+        message: `Expected a linebreak ${location} this attribute.`
+      })
+    }
+
+    return context.parserServices.defineTemplateBodyVisitor({
+      VStartTag(node) {
+        // Skip 'template' tags
+        if (node.parent.name === "template") {
+          return;
+        }
+
+        // No attributes
+        if (node.attributes.length === 0) {
+          return;
+        }
+
+        const firstAttribute = node.attributes[0];
+        const lastAttribute = node.attributes[node.attributes.length - 1];
+
+        // Enforce line-break before first attribute
+        if (node.loc.start.line === firstAttribute.loc.start.line) {
+          report(firstAttribute, "above");
+        }
+
+        // Enforce line-break after last attribute
+        if (node.loc.end.line === lastAttribute.loc.start.line) {
+          report(lastAttribute, "below");
+        }
+      }
+    })
+  }
+};

package/rules/vue-html-indent.js

@@ -0,0 +1,86 @@
+module.exports = {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "enforce consistent indentation in `<template>`",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: "whitespace"
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode()
+    const template = (
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
+    );
+
+    function report(element, type, expected, actual) {
+      const reportObj = {
+        node: element,
+        message: `Expected ${type} indentation of ${expected} spaces but found ${actual}`
+      };
+
+      if (type === "attribute") {
+        reportObj.fix = function(fixer) {
+          const startToken = template.getTokenBefore(element);
+          const endToken = template.getTokenAfter(element);
+          const indent = " ".repeat(expected);
+
+          return fixer.replaceTextRange(
+            [startToken.range[1], element.range[0]],
+            `\n${indent}`
+          );
+        };
+      }
+
+      context.report(reportObj);
+    }
+
+    return context.parserServices.defineTemplateBodyVisitor({
+      VStartTag(node) {
+        // Skip "template" tags
+        if (node.parent.name === "template") {
+          return;
+        }
+
+        // Skip singleline element (no indentation to check)
+        if (node.loc.start.line === node.loc.end.line) {
+          return;
+        }
+
+        // There is a shift of 1 space on the closing tag (likely caused by Pug)
+        const actual = node.loc.end.column - 1;
+        const expected = node.loc.start.column;
+
+        // Check closing tag indentation
+        if (actual !== expected) {
+          report(
+            node,
+            "closing tag",
+
+            expected,
+            actual
+          );
+        }
+
+        node.attributes.forEach((attribute) => {
+          const actual = attribute.loc.start.column;
+          const expected = node.loc.start.column + 2;
+
+          // Check attribute indentation
+          if (actual !== expected) {
+            report(
+              attribute,
+              "attribute",
+
+              expected,
+              actual
+            );
+          }
+        });
+      }
+    })
+  }
+};