Skip to content

Commit

Permalink
turn off unicorn/template-indent (#269)
Browse files Browse the repository at this point in the history
Co-authored-by: Simon Lydell <simon.lydell@gmail.com>
  • Loading branch information
gurgunday and lydell authored Dec 2, 2023
1 parent bebd55e commit 25fc427
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 0 deletions.
62 changes: 62 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.**
Expand Down Expand Up @@ -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
23 changes: 23 additions & 0 deletions bin/validators.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Expand Down
2 changes: 2 additions & 0 deletions test/cli.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(`
{
Expand All @@ -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:
Expand Down
36 changes: 36 additions & 0 deletions test/validators.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" } }],
Expand Down

0 comments on commit 25fc427

Please sign in to comment.