@shimful/eslint-plugin-react-lite

This package is reimplements the most essential (with some definition of most essential) eslint-plugin-react rules, and aims to do it with zero dependencies.

Configuration

1{
2  "settings": {
3    "reactLite": {
4      // The pragma to use, defaults to "React"
5      "pragma": "React",
6      // Fragment to use, defaults to "Fragment"
7      "fragment": "Fragment",
8      // The jsxFactory, defaults to `${pragma}.createElement`
9      // Can be overwritten on per-file basis, e.g.:
10      //   /* @jsx Preact.h */
11      "jsxFactory": "React.createElement",
12      // The jsxFactory, defaults to `${pragma}.${fragment}`
13      // Can be overwritten on per-file basis, e.g.:
14      //   /* @jsxFrag Preact.Fragment */
15      "jsxFragmentFactory": "React.Fragment"
16    },
17    // Defaults to []
18    "linkComponents": [
19      { "name": "Link", "linkAttribute": "to" }
20    ],
21    // Defaults to []
22    "formComponents": [
23      { "name": "Form", "formAttribute": "action" }
24    ]
25  }
26}

Rules

jsx-key

1{
2  "rules": {
3    "react-lite/jsx-key": ["error", {
4      "checkFragmentShorthand": false,
5      "checkKeyMustBeforeSpread": false,
6      "warnOnDuplicates": true
7    }]
8  }

jsx-no-comment-textnodes

1{
2  "rules": {
3    "react-lite/jsx-no-comment-textnodes": "error"
4  }

Notes:

• Autofixes not implemented.

jsx-no-target-blank

1{
2  "rules": {
3    "react-lite/jsx-no-comment-textnodes": ["error", {
4      "allowReferrer": false,
5      "enforceDynamicLinks": "always", // Options: "always", "never".
6      "warnOnSpreadAttributes": false,
7      "links": true,
8      "forms": false
9    }]
10  }

Status

These are the current recommended set of eslint-plugin-react rules. Included are some notes whether they're needed anymore, or better handled by other mechanisms like TypeScript's type checks.

	implemented	rule	notes
❓		display-name	Is this relevant in 2023?
✅	🎉	jsx-key
✅	🎉	jsx-no-comment-textnodes
TS		jsx-no-duplicate-props	TypeScript complains about duplicate props.
✅	🎉	jsx-no-target-blank
TS		jsx-no-undef	TypeScript complains about undefined variables.
TS		jsx-uses-react	plugin:react/jsx-runtime disables this. Either TypeScript's "noUnusedLocals" or @typescript-eslint's corresponding rule take care of this.
💀		jsx-uses-vars	Doesn't seem to be necessary anymore, even with ESLint's no-unused-vars rule on.
TS		no-children-prop
✅		no-danger-with-children
~✅		no-deprecated	Partially taken care of React's type definitions.
~✅		no-direct-mutation-state	Somewhat outdated as-is. Works only for createClass & class components.
💀		no-find-dom-node	Doesn't seem to be a part of @types/react.
💀		no-is-mounted	Applies only to the obsolete React.createClass and create-react-class. Not worth supporting?
❓		no-render-return-value	Doesn't allow usage of ReactDOM.render's return value, as in the future it'll be void. Wouldn't typings take care of this?
💀❓		no-string-refs	React 19 removes support for string refs, so types probably will take care of this in the near future.
✅		no-unescaped-entities
TS		no-unknown-property	Taken care of by TS, except arbitrary aria-* and data-* props are allowed
❓		prop-types	Would this be taken care of by TS?
TS		react-in-jsx-scope	plugin:react/jsx-runtime disables this. TypeScript seems to do the right thing based on tsconfig.json's "jsx" setting (e.g. complain when "jsx": "react" but not when "jsx": "preserve").
TS		require-render-return

• ✅ = worth supporting
• 💀 = obsolete
• ❓ = needs investigation
• TS = taken care by TypeScript checks

License

This library is licensed under the MIT license. See LICENSE.