ESLint - 帮助识别缩进子规则

Question

How can I get ESLint indent to like this code:

const a = `
  <li
    style=${styleMap({
      color: '#F00',      // bad line
      background: '#0F0'  // bad line
    })}                   // bad line
  >Something</li>
`;

It doesn't like the indenting on the lines I marked bad line . This is what it wants me to do:

const a = `
  <li
    style=${styleMap({
  color: '#F00',
  background: '#0F0'
})}
  >
    <span>Something</span>
  </li>
`;

which looks ridiculous.

Here is my current rule regarding 'indent':

indent: ['error', 2, { SwitchCase: 1 }],

I looked through the indent documentation but didn't see anything that seemed to match this scenario.

---

Edit: I went through all of the options for the indent rule, set them all to 0 then went through one-by-one setting them to 10 to see which one affects my expression. Looks like ObjectExpression is the culprit, but that value is normally good.

It seems like there are some issue dealing with template literal multiple line placeholder object declarations. I think my only recourse is going to be to add it to ignoreNodes .

Answer 1

Note : See the bottom of this answer for the final version. Tweaked it further as I continued through linting everything.

Once I narrowed it down a little further, I was able to find some better Google results and found this answer which seemed very similar to my problem, but not quite: Ignore the indentation in a template literal, with the ESLint `indent` rule

The AST pattern didn't work for my specific case (at least the first one). After poking it with an AST explorer, I ended up going with these patterns:

indent: ['error', 2, { 
  ignoredNodes: [
    'TemplateLiteral > CallExpression > ObjectExpression',
    'TemplateLiteral *'
  ]
]

The first covers the exact scenario in my question. The second covers a similar scenario:

const a = `
  <li
    style=${someFunc(
      'arg1',
      'arg2'
    })}      
  >Something</li>
`;

Seems this is ultimately an issue that ESLint is going to have to fix somehow, because the ObjectExpression check alone gets really confused inside of a template literal placeholder.

---

EDIT:

I changed the second expression from TemplateLiteral > CallExpression to TemplateLiteral > * because I found two more slightly different scenarios that weren't caught already. I'd prefer to be more specific, but I don't want to have to identify 80 different scenarios.

---

EDIT 2:

Changed TemplateLiteral > * to TemplateLiteral * instead because found even more that were nested and not caught by > * .

Now, the patterns are just one:

indent: ['error', 2, { 
  ignoredNodes: [
    'TemplateLiteral *'
  ]
]