fix(eslint-plugin): [no-useless-template-literal] do not render escaped strings in autofixes

[auvred]

PR Checklist

• Addresses an existing open issue: fixes Bug: [no-useless-template-literal] Inconsistent handling of escapes and quotes in autofixes. #8677
• That issue was marked as accepting prs
• Steps in Contributing were taken

Overview

If expression is a string literal, then get the raw value by removing quotes (.slice(1, -1)). Otherwise do String(expression.value) - what getStaticStringValue internally does.

[typescript-eslint]

Thanks for the PR, @auvred!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

---

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint.

[netlify]

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	4d28bc4
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/660827f3abe0bc0008b96adf
😎 Deploy Preview	https://deploy-preview-8688--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 97 Accessibility: 100 Best Practices: 92 SEO: 98 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4d28bc4. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx test eslint-plugin --coverage=false
nx run-many --target=typecheck --parallel

✅ Successfully ran 27 targets

• nx test type-utils
• nx test visitor-keys
• nx run types:build
• nx test utils
• nx test scope-manager
• nx test typescript-estree
• nx run repo-tools:postinstall-script
• nx test rule-schema-to-typescript-types
• nx test parser
• nx run-many --target=build --parallel --exclude=website --exclude=website-eslint
• nx test repo-tools
• nx test eslint-plugin-internal
• nx test ast-spec
• nx test typescript-eslint
• nx test visitor-keys --coverage=false
• nx test typescript-eslint --coverage=false
• nx test ast-spec --coverage=false
• nx test parser --coverage=false
• nx test utils --coverage=false
• nx test eslint-plugin-internal --coverage=false
• nx test repo-tools --coverage=false
• nx run integration-tests:test
• nx test rule-schema-to-typescript-types --coverage=false
• nx test type-utils --coverage=false
• nx test typescript-estree --coverage=false
• nx test scope-manager --coverage=false
• nx run repo-tools:generate-configs

---

Sent with 💌 from NxCloud.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.35%. Comparing base (d5615d7) to head (ae589b4).

❗ Current head ae589b4 differs from pull request most recent head 4d28bc4. Consider uploading reports for the commit 4d28bc4 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8688      +/-   ##
==========================================
- Coverage   87.36%   87.35%   -0.02%     
==========================================
  Files         255      254       -1     
  Lines       12498    12488      -10     
  Branches     3923     3920       -3     
==========================================
- Hits        10919    10909      -10     
- Misses       1304     1307       +3     
+ Partials      275      272       -3     

Flag	Coverage Δ
unittest	87.35% <100.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...t-plugin/src/rules/no-useless-template-literals.ts	100.00% <100.00%> (ø)

... and 10 files with indirect coverage changes

[kirkwaiblinger]

good stuff here!

In addition to the comment, one thing though that I want to flag is that in the issue it was also intended that

`${'a'}`; 
// should autofix to 
`a`;
// rather than 
'a';

though it's possible that that flew under the radar on the issue itself as well when it was marked accepting PRs.

I also note that #8669 somewhat conflicts with that change (in that it would be made redundant).

Could be worth flagging there, and/or dropping the quotes -> backticks change from #8677 entirely and mentioning that explicitly on the issue.

Not strongly opinionated to which decision is made but just think we should document it.

[auvred]

In addition to the comment, one thing though that I want to flag is that in the issue it was also intended that

`${'a'}`; 
// should autofix to 
`a`;
// rather than 
'a';

@kirkwaiblinger, Ohh, I missed that in the original issue!

I'm 50/50 on this!

though it's possible that that flew under the radar on the issue itself as well when it was marked accepting PRs.

Maybe..

Fixing to string literal vs template literal sounds a bit stylistic to me, I think it would be great to hear more opinions on this!

[kirkwaiblinger]

Yeah, agreed. I will say, at the time, I didn't realize it was just removing the wrapping template syntax, as opposed to overriding whatever the user had typed with one particular quote style. So my motivation for that change has softened a lot as well. It still feels a little surprising to me, but it does have a very justifiable internal logic as-is.

So unless someone comes in and has a strong opinion, I'd say, just leave it as-is :)

[kirkwaiblinger]

(nit, optional) - why are the escaping patterns different for each branch? Maybe worth a comment?

[auvred]

Yeah, it does seem a bit confusing

Does e07e14607+ae589b436 clear it up?

[kirkwaiblinger]

oof, i think i get it, but i still struggle tbh 😆 It's just really tricky to me to figure out which things are in escaped-land and which things are non-escaped in the code comment there (it's even hard for me to type out the special characters in this comment 😆 ). Is the idea
raw string ⇒

1. Removing enclosing quotation characters
2. just add escapes to characters that need escape in template string, but didn't as a string literal (` and $)

cooked string ⇒

1. escape everything that needs escapes (`, $, and \)

I really think a few English words would be helpful in the code comments (to go along with the examples), since my brain is not big enough to make meaning of all the special characters at a glance 😄

[auvred]

Thanks for the reviews! I tried to cover all the possible edge cases (although I've likely missed something).

Currently this PR is blocked by #8883, because some test cases, like this one below, require multiple fixer passes:

` ${'$'}${''}{} `;

So I'm going to convert this PR do a draft until #8554 issue is resolved.