eslint-plugin-unicorn icon indicating copy to clipboard operation
eslint-plugin-unicorn copied to clipboard

Rule proposal: warn about missing dollar sign surrounding curly braces in template string

Open cmdcolin opened this issue 2 years ago • 6 comments

Description

I migrated some code from React to template strings, but missed adding the $ sign around the curly braces so I had

Hello {name} instead of Hello ${name}

I did not see any existing eslint rules that warn against this. I also wasn't sure what the best rule set to propose this rule to, but I like eslint-plugin-unicorn a lot and wasn't sure this quite had the 'universality' that it would be a core eslint rule.

Somewhat similar rule in eslint core rule set https://eslint.org/docs/latest/rules/no-template-curly-in-string#examples

They say when proposing a new rule to eslint core to justify e.g. "Why should this rule be in the core instead of a plugin?

In general, we prefer that rules be implemented in plugins where they can be tailored to your specific use case.". not sure this rule has enough justification?

Fail

var replace = `Hello {name}`;

Pass

const replace = `Hello ${name}`;

Additional Info

No response

cmdcolin avatar Jun 07 '23 23:06 cmdcolin

Can you also propose a rule name?

sindresorhus avatar Jul 19 '23 20:07 sindresorhus

unicorn/missing-template-dollar-sign maybe?

cmdcolin avatar Jul 19 '23 21:07 cmdcolin

How about unicorn/no-incorrect-template-string-interpolation?

sindresorhus avatar Jul 21 '23 19:07 sindresorhus

no-mismatched-template-literal-curly?

fisker avatar Jul 22 '23 01:07 fisker

We can also check

var replace = `Hello $name}`;
var replace = `Hello ${name`;

fisker avatar Jul 22 '23 01:07 fisker

no-mismatched-template-literal-curly?

I think no-incorrect-template-string-interpolation clearer as the intent is to catch mistakes in template string interpolation.

sindresorhus avatar Jul 22 '23 09:07 sindresorhus