Ignore the indentation in a template literal, with the ESLint `indent` rule

Question

The ESLint rule for indent allows for you to specify which nodes are ignored, when determining whether the rule should apply to that node, using the ignoredNodes option.

I've got the following code that I want to ignore with this rule:

const a = b
  ? `c${
      d
    }`
  : e

Specifically, the line with d and the subsequent line are reported as having two more spaces than they should. I want to ignore those lines from the rule, but I can't figure out the node that should apply.

Node types are specified in this repo. I know that ternary expressions, like used in this code, is a ConditionalExpression node, and it seems like a template literal node exists, but I can't get it to work.

I know I can use eslint-disable-next-line, eslint-disable, etc., but I don't want to use those, because then I'd have to use them every time this comes up.

check this out: https://stackoverflow.com/questions/27732209/turning-off-eslint-rule-for-a-specific-line — Jae Woo Woo, Sep 05 '18 at 06:21
`"indent": ["warn", 4, { "ignoredNodes": ["ConditionalExpression *"]]` works for me — Verri, Sep 17 '21 at 09:14

score 19 · Accepted Answer · edited Jun 07 '23 at 20:02

19

From looking at an ast tree with simply ${foo}, I confirmed that it is truly the TemplateLiteral node. However I happened to also know the solution from there: you need to select its children as well (see the ESLint docs on selectors here). This can be done with TemplateLiteral > *. The reason why your solution wasn't working is because ESLint will exempt the TemplateLiteral from the indent rules, but only the little ${ and } parts, not the contents.

This can go into your ESLintrc file as such:

"indent": ["error", "tab", { "ignoredNodes": ["TemplateLiteral > *"] }]

I'm sorry no one else was able to answer your question sooner.

edited Jun 07 '23 at 20:02

Henry Woody

14,024
7
39
56

answered Nov 01 '18 at 02:28

David Archibald

1,431
14
27

1

I got a warning from eslint using this config, specifically since it expects `ignoredNodes` to be an array. The following fixed it for me: ```js "indent": [{ "ignoredNodes": ["TemplateLiteral > *"] }] ``` – Michael Oliver Jan 30 '19 at 21:09
I didn't get that warning. I've fixed that now. – David Archibald Jan 31 '19 at 04:32
1

It overwrites extended rules for `ignoredNodes`. Can we just extend this array, without overwriting? – B. Bohdan Jan 14 '20 at 10:30
The rule had the wrong syntax, it needed the first 2 parameters (`"error", "tab"`). Now it works without errors – fregante Mar 17 '20 at 09:57
@B.Bohdan Did you found an solution to extend `ignoreNodes` array without overwriting? – Mike Kokadii Sep 14 '22 at 17:14

score 14 · Answer 2 · answered Mar 02 '19 at 12:29

To ignore all indentation and newline errors in ESLint inside a template literal, including function calls or deeply nested JS syntax, you can use "ignoredNodes": ["TemplateLiteral *"] (without the > child selector, to target all descendants.)

  "rules": {
    "indent": ["error", 2, { "ignoredNodes": ["TemplateLiteral *"] }],
    "function-paren-newline": "off"
  }

You also have to specify your normal indentation rule, e.g. "error", 2 for enforcing 2 spaces or "error", "tab" for tabs.

"function-paren-newline" was also giving errors inside my template literals, I also wanted to disable that (because I'm extending an existing ESLint config that displayed an error for that).

Ignore the indentation in a template literal, with the ESLint `indent` rule

2 Answers2

Linked