turn off unicorn/template-indent (#269)

Co-authored-by: Simon Lydell <[email protected]>

Author: gurgunday

README.md

@@ -648,6 +648,67 @@ Prettier:
 }
 ```
 
+### [unicorn/template-indent]
+
+**This rule can be used with certain options.**
+
+This rule will automatically fix the indentation of multiline string templates, to keep them in alignment with the code they are found in. A configurable whitelist is used to ensure no whitespace-sensitive strings are edited.
+
+Prettier deals with:
+
+- HTML
+- CSS
+- GraphQL
+- markdown
+
+Using various tags, functions and comments.
+
+`unicorn/template-indent` by default formats some of the same tagged templates, which can cause conflicts. For example, the rule and Prettier disagree about indentation in ternaries:
+
+```js
+condition
+  ? null
+  : html`
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
+        mauris.
+      </p>
+    `;
+```
+
+If you like this rule, it can be used just fine with Prettier as long as you configure the rule to not deal with the same templates as Prettier.
+
+Example ESLint configuration:
+
+<!-- prettier-ignore -->
+```json
+{
+  "rules": {
+    "unicorn/template-indent": [
+      "error",
+      {
+        "tags": [
+          "outdent",
+          "dedent",
+          "sql",
+          "styled"
+        ],
+        "functions": [
+          "dedent",
+          "stripIndent"
+        ],
+        "selectors": [],
+        "comments": [
+          "indent"
+        ]
+      }
+    ]
+  }
+}
+```
+
+Note: If you use `"selectors"`, the CLI helper tool cannot detect if your selectors might cause conflicts.
+
 ### [vue/html-self-closing]
 
 **This rule requires certain options.**
@@ -825,5 +886,6 @@ When you’re done, run `npm test` to verify that you got it all right. It runs
 [quotes]: https://eslint.org/docs/rules/quotes
 [singlequote]: https://prettier.io/docs/en/options.html#quotes
 [string formatting rules]: https://prettier.io/docs/en/rationale.html#strings
+[unicorn/template-indent]: https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/template-indent.md
 [vue/html-self-closing]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md
 [vue/max-len]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-len.md

bin/validators.js

@@ -48,6 +48,29 @@ module.exports = {
     return Boolean(firstOption && firstOption.allowIndentationTabs);
   },
 
+  "unicorn/template-indent"({ options }) {
+    if (options.length === 0) {
+      return false;
+    }
+
+    const { comments = [], tags = [] } = options[0] || {};
+
+    return (
+      Array.isArray(comments) &&
+      Array.isArray(tags) &&
+      !(
+        comments.includes("GraphQL") ||
+        comments.includes("HTML") ||
+        tags.includes("css") ||
+        tags.includes("graphql") ||
+        tags.includes("gql") ||
+        tags.includes("html") ||
+        tags.includes("markdown") ||
+        tags.includes("md")
+      )
+    );
+  },
+
   "vue/html-self-closing"({ options }) {
     if (options.length === 0) {
       return false;

index.js

@@ -18,6 +18,7 @@ module.exports = {
     "@typescript-eslint/lines-around-comment": 0,
     "@typescript-eslint/quotes": 0,
     "babel/quotes": 0,
+    "unicorn/template-indent": 0,
     "vue/html-self-closing": 0,
     "vue/max-len": 0,
 

test/cli.test.js

@@ -126,6 +126,7 @@ test("all the things", () => {
     "vue/html-self-closing",
     "prefer-arrow-callback",
     "arrow-body-style",
+    "unicorn/template-indent",
   ];
   expect(cli.processRules(createRules(rules, "error"))).toMatchInlineSnapshot(`
     {
@@ -144,6 +145,7 @@ test("all the things", () => {
     - lines-around-comment
     - no-confusing-arrow
     - no-tabs
+    - unicorn/template-indent
     - vue/html-self-closing
 
     The following rules are enabled but cannot be automatically checked. See:

test/validators.test.js

@@ -65,6 +65,42 @@ rule("no-tabs", {
   invalid: [[], [null], [{ allowIndentationTabs: false }], [{ other: true }]],
 });
 
+rule("unicorn/template-indent", {
+  valid: [
+    [
+      {
+        tags: ["outdent", "dedent", "sql", "styled"],
+        functions: ["dedent", "stripIndent"],
+        selectors: [],
+        comments: ["indent"],
+      },
+    ],
+    [
+      {
+        comments: ["indent"],
+      },
+    ],
+  ],
+  invalid: [
+    [],
+    [{ comments: ["GraphQL"] }],
+    [{ comments: ["HTML"] }],
+    [{ tags: ["css"] }],
+    [{ tags: ["graphql"] }],
+    [{ tags: ["gql"] }],
+    [{ tags: ["html"] }],
+    [{ tags: ["markdown"] }],
+    [{ tags: ["md"] }],
+    [{ comments: 5 }],
+    [{ tags: {} }],
+    [
+      {
+        tags: ["outdent", "dedent", "gql", "sql", "html", "styled"],
+      },
+    ],
+  ],
+});
+
 rule("vue/html-self-closing", {
   valid: [
     [{ html: { void: "any" } }],