Skip to content

Bug: [no-unnecessary-template-expression] Report squigglies should underline template syntax, not just expression inside #8597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
4 tasks done
kirkwaiblinger opened this issue Mar 5, 2024 · 7 comments · Fixed by #10044
Labels
accepting prs Go ahead, send a pull request that resolves this issue bug Something isn't working locked due to age Please open a new issue if you'd like to say more. See https://typescript-eslint.io/contributing. package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin

Comments

@kirkwaiblinger
Copy link
Member

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.
  • I have searched for related issues and found none that matched my issue.
  • I have read the FAQ and my problem is not listed.

Playground Link

https://typescript-eslint.io/play/#ts=5.3.3&showAST=es&fileType=.tsx&code=AYJwpgDg9iAuAEBnAjgVwJYHNMBt1kXgBIBvAKHngHor4ATKeAOygVSbrBDybHlgAW6QgGMoAW3FgmsADTwY-AX1IKmSvhHAA3dFFSEeYAHQV4AIgAqygJ5qcd9p27peS4UlghXmeQDMQCXg0Vj5YRhDYE3MzGnhrPgBDVHC-dAAPeAB3dBwcT28IBRSNRD4xSWlYQkSODWISeFq6eABfeURGAEl3JgBreHQERAF9HBbY2icuIw1xJsIssDz5cPgRRLym2CiZPXU1wT4s0Zw%2BVyiQaBxE2H34ACMwH0n6rSgHs-F5FgQjwaYvBA8DA6S0BEQ9yGZRwflMrWAQA&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQAIBcBPABxQGNoBLY-AWhXkoDt8B6Jge1tmUSWWS18iALbF4AQ2G1Gw6BPioMkRNGgdokcGAC%2BIHUA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eAcgK6qoDCAFutAGsylBm3TgwAXxCSgA&tokens=false

Repro Code

`report squigglies ${
  // do not underline this comment, or the ${ on the previous line.
  "They only underline this string, from quote to quote."
  // The autofix will strip out these comments and the ${ and }, so I think it should 
  // underline them as well, to call attention to the whole interpolation being
  // the problem, not the inner expression itself.
}`

ESLint Config

module.exports = {
  "rules": {
    "@typescript-eslint/no-useless-template-literals": "error"
  }
}

tsconfig

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Expected Result

Expect error squigglies starting on the ${ and continuing all the way through the closing }

Actual Result

only the quoted string itself has squigglies

Additional Info

I was playing around with this, and it's a very easy change to make. Would be happy to toss up a PR.

@kirkwaiblinger kirkwaiblinger added bug Something isn't working package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin triage Waiting for team members to take a look labels Mar 5, 2024
@Josh-Cena
Copy link
Member

I think you are conflating the report location with the behavior that it removes comments. Fixers removing comments is a pervasive issue in linters because, well, comments aren't part of the AST so it's hard to re-position them after changing the AST. Many other rules suffer from the same issue, such as #4730, but I don't see a general way to help.

On the other hand, we absolutely want the report location to be as specific as possible. This rule checks each embedded expression one by one, so it should definitely report those expressions, not the template as a whole.

@kirkwaiblinger
Copy link
Member Author

To be clear, I'm proposing changing

`use${'less'}template${'expressions'}`
      ^^^^^^           ^^^^^^^^^^^^^
// to this
`use${'less'}template${'expressions'}`
    ^^^^^^^^^        ^^^^^^^^^^^^^^^^
// NOT this
`use${'less'}template${'expressions'}`
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

But yeah, as long as we're talking about the same thing, if you think trying to include the ${} in the report is misguided, feel free to close! Not very important one way or another.

@Josh-Cena
Copy link
Member

Ahh—yeah that makes sense! I like that better. Not sure if it's easy to implement, considering those are not AST nodes, but this behavior is definitely more ideal.

@kirkwaiblinger
Copy link
Member Author

Ezpz 😊 the report API can take arbitrary loc, which we have in hand anyway for the autofixes

@bradzacher
Copy link
Member

bradzacher commented Mar 24, 2024

The tokens should be readily available to seek backwards/forwards from the expression - so shouldn't be too bad.

My one concern would be this case:

`use${
  'less'
}template${
  'expressions'
}`

Which is fairly common in prettier formatted code.
Which would change the errors in a negative/noisy way IMO

// before
`use${
  'less'
  ^^^^^^
}template${
  'expressions'
  ^^^^^^^^^^^^^
}`

// after
`use${
    ^^
  'less'
^^^^^^^^
}template${
^        ^^
  'expressions'
^^^^^^^^^^^^^^^
}`
^

@kirkwaiblinger
Copy link
Member Author

My one concern would be this case:

`use${
  'less'
}template${
  'expressions'
}`

Which is fairly common in prettier formatted code.
Which would change the errors in a negative/noisy way IMO

// before
`use${
  'less'
  ^^^^^^
}template${
  'expressions'
  ^^^^^^^^^^^^^
}`

// after
`use${
    ^^
  'less'
^^^^^^^^
}template${
^        ^^
  'expressions'
^^^^^^^^^^^^^^^
}`
^

Having played around with this in a local playground, that's actually exactly what I liked about it a lot, because the error has nothing to do with the expression 'less' itself, it has to do with how it's used in the context of the adjacent lines, and that becomes more clear IMO. But I recognize that that is purely a personal preference.

@Josh-Cena
Copy link
Member

Josh-Cena commented Mar 25, 2024

I also think this is fine, since the fixer modifies the embedding, not the expression.

I'm also not sure if ${ is a token by itself—each template span should be a token, so we probably still have to do start: getPreviousToken().end - 2, but that's still fine if it's robust enough.

@JoshuaKGoldberg JoshuaKGoldberg added accepting prs Go ahead, send a pull request that resolves this issue and removed triage Waiting for team members to take a look labels Apr 28, 2024
@JoshuaKGoldberg JoshuaKGoldberg changed the title Bug: [no-useless-template-literals] Report squigglies should underline template syntax, not just expression inside Bug: [no-useless-template-expression] Report squigglies should underline template syntax, not just expression inside Jun 2, 2024
@Josh-Cena Josh-Cena changed the title Bug: [no-useless-template-expression] Report squigglies should underline template syntax, not just expression inside Bug: [no-unnecessary-template-expression] Report squigglies should underline template syntax, not just expression inside Jun 4, 2024
@github-actions github-actions bot added the locked due to age Please open a new issue if you'd like to say more. See https://typescript-eslint.io/contributing. label Oct 3, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
accepting prs Go ahead, send a pull request that resolves this issue bug Something isn't working locked due to age Please open a new issue if you'd like to say more. See https://typescript-eslint.io/contributing. package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin
Projects
None yet
4 participants