Unexpected indent error inside template string after ESLint bump from 4.3.0 to 4.4.1

[remcohaszing]

Tell us about your environment

• ESLint Version: 4.4.1
• Node Version: 8.3.0
• npm Version: 5.3.0

What parser (default, Babel-ESLint, etc.) are you using? babel-eslint

Please show your full configuration:

Configuration

parser: babel-eslint

extends: airbnb

What did you do? Please include the actual source code causing the issue.

const MyComponent = styled.div`
  margin: 0;
  ${(value) => {
    noop();
    return `
      ${value}
    `;
  }}
`; // ← This line triggers an indent error

What did you expect to happen?

I expected no errors.

If the inline arrow function is transformed so the curly braces are removed, the indent error is gone:

const MyComponent = styled.div`
  ${value => `
    ${value}
  `}
`;

What actually happened? Please include the actual, raw output from ESLint.

Since I updated from ESLint 4.3.0 to 4.4.1, the last line in that template string triggers the indent rule.

   9:1  error  Expected indentation of 2 spaces but found 0  indent

[not-an-aardvark]

Thanks for the report. However, I can't reproduce this issue -- no problems seem to be reported with either ESLint 4.4.1 or 4.3.0.

Are you sure you pasted the code sample correctly?

[suewonjp]

Hi

I have the same issue, here.

In my case, I updated eslint from v3.19.0 => v4.0.0, then this issue appeared.

I tried upper versions like v4.30, v4.4.0, etc, but the issue persisted and also tried a few lower versions than 3.19.0, the issue didn't appear

IMO, something might have happened between v3.19.0 ~ v.4.0.0

---

I uninstalled global eslint, used only local eslint.
npm version : 3.10.10
node version : 6.11.0

[not-an-aardvark]

@suewonjp Can you please provide more details about what the issue was (preferably by filling out the bug report template)? The indent rule was rewritten to be more strict in ESLint 4.0.0, so it is intentionally reporting more issues than it was previously. It is possible that the specific behavior you're encountering is a bug, but I won't be able to figure out whether that's the case unless you give more details about what's going on.

[suewonjp]

I found the troubled code. I wrote code like the following that previous versions of eslint didn't care;

        this.dbManager = DB.open(CONFIG.testDbName, CONFIG.testDbVersion)
        .ready(function(store) {

Looks like newer versions only pass code like this:

        this.dbManager = DB.open(CONFIG.testDbName, CONFIG.testDbVersion)
            .ready(function(store) {

I'll modify my code according to newer rules.

But can you tell me specific reason why this kind of change was necessary?

I'm not sure enforcing users to change their code like this is really worth it...

[not-an-aardvark]

But can you tell me specific reason why this kind of change was necessary?
I'm not sure enforcing users to change their code like this is really worth it...

The indent rule is supposed to validate your code's indentation. Previously, it was not doing that in a large number of cases. This was causing a lot of confusion for users, because they were accidentally writing code with incorrect indentation, and expecting the indent rule to catch it. (In fact, when we rewrote the rule, indent bugs accounted for about 15% of our open issues.)

If you'd like to restore the indent behavior from 3.x, you can use the indent-legacy rule. If you'd like to ignore indentation for code like your example, you can use the MemberExpression: off option in the indent rule.

[suewonjp]

@not-an-aardvark

Thanks.

Your suggestion is helpful a lot

[remcohaszing]

I tried to minimize this issue in a new project. Downgrading this project to 4.3.0, in which it used to work for me, still triggers the error now.

This seems to be related to babel-eslint.

[not-an-aardvark]

Ok, thanks for checking again. I'm going to close this since it doesn't seem to be an issue with eslint.