linter: react/jsx-curly-brace-presence false positive when using template strings to avoid escape of ' and "

[GerroDen]

What version of Oxlint are you using?

0.15.10

What command did you run?

oxlint -c ../../packages/linting/oxlintrc.json --quiet

What does your .oxlintrc.json config file look like?

{
  "$schema": "../../node_modules/oxlint/configuration_schema.json",
  "plugins": ["import", "jest", "react-perf", "react", "unicorn", "typescript", "oxc"],
  "rules": {
    "jest/valid-title": ["error", { "ignoreTypeOfDescribeName": true, "ignoreTypeOfTestName": true }],
    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never", "propElementValues": "always" }],
    "typescript/no-non-null-assertion": "error"
  },
  "overrides": [
    {
      "files": ["*.stories.tsx", "**/__tests-lib__/**/*.ts"],
      "rules": {
        "typescript/no-non-null-assertion": "off"
      }
    }
  ]
}

What happened?

We want to enable react/jsx-curly-brace-presence to avoid unnecesary brackets in JSX. But we also use UTF8 and how react behaves we would need to escape at least single quotes '. So we decided to use {"'"} in order to escape it. But when we also use double quotes '"' in the text, we tend to use template strings to avoid escaping them in the string literal.

So this should be fine, but is reported as × eslint-plugin-react(jsx-curly-brace-presence): Curly braces are unnecessary here.:

<div>{`Nobody's "here"`}</div>

[shulaoda]

For example:

<App prop='Hello "foo" world'>Hello 'foo' "bar" world</App>;

will warned and fixed to:

<App prop={"Hello \"foo\" world"}>{"Hello 'foo' \"bar\" world"}</App>;

This behavior is correct and aligned with eslint-plugin-react. You can use \" as an alternative.

[camc314]

fixed in #10663