clean-aquamarineC
Refine2y ago
14 replies
clean-aquamarine

ESLint issues with auto-generated code

The inferencers seem to generate code that conflict with popular ESLint configs which made us wonder whether we can have some more control over the code that gets generated. Currently there is code generated such as:

<Typography variant="body1">
<strong>{translate("home.fields.paymentTerms")}: </strong>{store?.paymentTerms ?? ""}</Typography>


ESLint generally sees this as a problem as we are only allowed to have one expression per line following the jsx-one-expression-per-line rule.

We can further customise to make ESLint work with how refine generates code, but it would be nice to also make refine work with our own preferences. The main problem in the generated code is that within the Typography element there are two expressions:

1. <strong>{translate("home.fields.paymentTerms")}: </strong>
2. {store?.paymentTerms ?? ""}

Which honestly could be put into a wrapper and this rule could be used without weird overrides.

How can we make Refine generate code like this.
And what ESLint config and rules are common to use that do not conflict with the code that the inferencers generate?

Reference to the eslint docs used:
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md
GitHub
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
eslint-plugin-react/docs/rules/jsx-one-expression-per-line.md at ma...
Was this page helpful?