[rule] jsx-dollar

[Grawl]

Problem Description

Find and remove (with fix) unnecessary template literal $ character.

When I work with React, it's common to use template literals, like this:

const MyComponent = () => `Hello ${user.name}`

...and ReactNodes, like this:

const MyComponent = () => <>Hello {user.name}</>

When I change template literal with ReactNode, I can forget to remove $ character before interpolation brackets, resulting this:

const MyComponent = () => <>Hello ${user.name}</>

It's completely valid React code, but in output I have this:

Hello $Joe

Obviously, I want this instead:

Hello Joe

But it's hard to detect this issue on code review, because JSX can easily become a mess of syntax constructions.

Alternative Solutions

I found eslint-plugin-jsx-dollar, it help me find and remove all $ characters.

I noticed it doesn't support React Fragments, like <></>. So I forked it and added support for Fragments: https://github.com/grawl/eslint-plugin-jsx-dollar

Rule Name and Error Message

Rule name: jsxDollar

Error message: Remove unnecessary $ character.

Details: if you want to explicitly display $ character i.e. show price, you can use template literals.

Examples

Code that should be flagged:

const MyComponent = () => <>Hello ${user.name}</>

Code that should not be flagged:

const MyComponent = () => <>Hello {user.name}</>

Documentation References

No response

Evaluation Checklist

• I have had problems with the pattern I want to forbid
• I could not find a way to solve the problem by changing the API of the problematic code or introducing a new API
• I have thought very hard about what the corner cases could be and what kind of patterns this would forbid that are actually okay, and they are acceptable
• I think the rule explains well enough how to solve the issue, to make sure beginners are not blocked by it
• I have discussed this rule with team members, and they all find it valuable