Ignore the indentation in a template literal, with the ESLint `indent` rule
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).
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. 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.