v1.0.86

New rule

README.md

@@ -195,6 +195,7 @@ Each item has emojis denoting:
 | [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 |  | 🟢 |

index.js

@@ -38,6 +38,7 @@ module.exports = {
     "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.json

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

recommended-vue.js

@@ -338,6 +338,7 @@ module.exports = {
     "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",

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
+            );
+          }
+        });
+      }
+    })
+  }
+};