jsx-dollar

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-dollar

Full Name in eslint-plugin-react-x

react-x/jsx-dollar

Features

🔧

Description

Prevents unnecessary dollar signs ($) from being inserted before an expression in JSX.

This can happen when refactoring from a template literal to JSX and forgetting to remove the dollar sign. This results in an unintentional $ being rendered in the output.

import React from "react";

function MyComponent({ user }) {
  return `Hello ${user.name}`;
}

When refactored to JSX, it might look like this:

import React from "react";

function MyComponent({ user }) {
  return <>Hello ${user.name}</>;
}

In this example, the $ before {user.name} is unnecessary and will be rendered as part of the output.

Examples

Failing

import React from "react";

function MyComponent({ user }) {
  return <div>Hello ${user.name}</div>;
  //                ^
  //                - Possible unnecessary '$' character before expression.
}

import React from "react";

function MyComponent({ user }) {
  return <div>${user.name} is your name</div>;
  //          ^
  //          - Possible unnecessary '$' character before expression.
}

import React from "react";

function MyComponent({ count, total }) {
  return <div>Progress: ${count} / ${total}</div>;
  //                     ^             ^
  //                     - Possible unnecessary '$' character before expression.
  //                                   - Possible unnecessary '$' character before expression.
}

Passing

import React from "react";

function MyComponent({ user }) {
  return `Hello ${user.name}`;
}

import React from "react";

function MyComponent({ user }) {
  return <div>Hello {user.name}</div>;
}

import React from "react";

function MyComponent({ price }) {
  return <div>${price}</div>;
}

jsx-dollar

Description

Examples

Failing

Passing

Implementation

See Also

On this page