prefer-string-raw: Forbid unnecessary String.raw

[som-sm]

Closes #2652

This PR simply loops over all the quasis and checks if any of them contain a backslash. If none of them do, then the rule starts complaining.

Also, the suggestion is a template string(`) only if there are expressions or the string contains line breaks, otherwise, the suggestion is always a single quotes string (').

[fisker]

We need check this.

`\u0040`
'@'
String.raw`\u0040`
'\\u0040'

[fisker]

Maybe check .cooked === .raw?

[som-sm]

Sorry, I didn't get this.

The following tests already work:

valid: [
  'a = String.raw`\\u0040`'
]

invalid: [
  'a = String.raw`\u0040`'
]

[fisker]

Okay, I thought we suggest `\u0040` over String.raw`\u0040`, I must made a mistake.

Anyway, do you think we can check .cooked === .raw instead of checking contains \?

[som-sm]

Anyway, do you think we can check .cooked === .raw instead of checking contains \?

Yeah, we can, updated in 2eb20bf.

[som-sm]

The above update, surfaced an interesting issue.

So, after this update, I'm getting a parsing error in the puppeteer codebase at the following line:
https://github.com/puppeteer/puppeteer/blob/832831d21c42ff542300c194c2b4f07274d8f82f/test/src/queryhandler.spec.ts#L373

Here's a simple reproduction of the same:

Source code:

let a = "\\38";

This correctly gets fixed to:

let a = String.raw`\38`;

However, the above String.raw`\38` expression fails with the typescript parser, throwing the following error:

Parsing error: Octal escape sequences are not allowed. Use the syntax '\x03'.

The includes(BACKSLASH) check wasn’t failing because it allowed the function to exit early when a backslash was detected in the raw value.

But, with the .cooked === .raw check, it fails because both cooked and raw values here are the same ('\\38'), causing the check to pass.
cooked value can't be '\38' because that '\38' is syntactically incorrect, maybe because of this the parser keeps the cooked value same as raw.

value: { cooked: '\\38', raw: '\\38' }

This works fine with the babel parser because looks like it sets the cooked value to null in cases like these.

value: { raw: '\\38', cooked: null }

So, I think it's better to keep the includes(BACKSLASH) check because it operates on the raw value, which seems to be a better choice in this case.

LMK if this makes sense, I'll add the let a = String.raw`\38`; test with the typescript parser.

[fisker]

This is bug in typescript-eslint, can you report to them? I can do it if you don't want to.

[som-sm]

I'd appreciate if you could, I'm fairly new to parsers, so I might not be able to explain it clearly.

[fisker]

No problem.

[fisker]

typescript-eslint/typescript-eslint#11353

[fisker]

Please add a test for

function foo() {
	return String.raw
			// Comment
			``
}

[som-sm]

Comments like these weren't being preserved, had to update the implementation a bit, refer cc0a128.

[fisker]

The comment is not the point, in this case, we can't simply remove String.raw need add parenthesis after return.

[fisker]

Ideally, it should fix to

function foo() {
	return (
			// Comment
			``)
}

There are similar cases exists, please search other rules.

[fisker]

Search addParenthesizesToReturnOrThrowExpression

[som-sm]

Gotcha, apologies for the confusion.

[som-sm]

Added addParenthesizesToReturnOrThrowExpression.

[fisker]

This is incorrect, since tag can be parenthesis.

((String.raw))``

[fisker]

You can use removeParentheses

[som-sm]

Added removeParentheses.

[fisker]

There is also an edge case that can't autofix (possible, but hard).

String.raw`use strict`;

This will become a "Directive", I don't think we need handle it, but let's leave a comment.

Or simply remove the fix if it's an ExpressionStatement if you want.

[som-sm]

Added a test with note for this.

[fisker]

@som-sm Can you solve the conflicts?

[sindresorhus]

Bump :)

[som-sm]

Hi, apologies! This slipped off my head. I'll try to update this sometime this week.

[som-sm]

I had lost all context on this, but I've tried to update it and address all pending comments.

[sindresorhus]

The fixer handles multiline return/throw, but it does not handle multiline yield.

Input:

function* foo() {
	yield String.raw
		// comment
		`abc`;
}

Current fix:

function* foo() {
	yield
		// comment
		'abc';
}

This changes runtime behvaior because ASI inserts after yield.

And an extra tests worth adding, same multiline yield shape but with interpolation:

function* foo() {
	yield String.raw
		`a${value}`;
}