apply requested changes

Signed-off-by: Paul Schultz <pschultz@pobox.com>
This commit is contained in:
Paul Schultz
2025-04-15 07:38:45 -05:00
parent fa24be548e
commit e775870cc2
-50
View File
@@ -68,56 +68,6 @@ In the future, this setting will change to `preserve` once React 17 is fully dep
- The `preserve` mode: This option leaves the JSX code untouched, embedding it directly into the output files. This is useful when you're planning to process the JSX with another tool like Babel later. The resulting files will use the `.jsx` extension to indicate the presence of JSX.
#### ESLint Configuration
:::note
Only update `eslintrc.js` if the package or plugin contains React code, such as `app` or a frontend plugin.
:::
Modify `eslintrc.json` in frontend workspaces, e.g., `./packages/app/eslintrc.js`.
##### Required Rule
This disables the requirement for a global React import:
```js filename="eslintrc.js"
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
rules: {
'react/react-in-jsx-scope': 'off',
},
});
```
##### Recommended Rule
This prevents default imports of React, encouraging cleaner code:
```js filename="eslintrc.js"
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
rules: {
'react/react-in-jsx-scope': 'off',
// highlight-add-start
'no-restricted-syntax': [
'error',
{
message: 'Default React import not allowed.',
selector:
"ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
},
{
message:
'Default React import not allowed. If you need a global type that conflicts with a React named export (e.g., `MouseEvent`), use `globalThis.MouseHandler`.',
selector:
"ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)",
},
],
// highlight-add-end
},
});
```
## Additional Resources
- [Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)