feat(eslint): add react config

README.md

@@ -51,6 +51,36 @@ module.exports = {
 };
 ```
 
+#### React
+
+Also add `require.resolve('@timobechtel/style/eslint/react.cjs')` to the `extends` array.
+
+Example config:
+
+```js
+const { resolve } = require('node:path');
+
+const project = resolve(process.cwd(), 'tsconfig.json');
+
+module.exports = {
+  root: true,
+  extends: [
+    require.resolve('@timobechtel/style/eslint/core.cjs'),
+    require.resolve('@timobechtel/style/eslint/react.cjs'),
+  ],
+  parserOptions: {
+    project,
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project,
+      },
+    },
+  },
+};
+```
+
 Note: You should disable `source.organizeImports` in your VSCode config, as this collides with the `import/order` rule.
 
 Add the following to your VSCode config, e.g. `.vscode/settings.json`

eslint/react.cjs

@@ -0,0 +1,21 @@
+// @ts-check
+const { defineConfig } = require('eslint-define-config');
+
+module.exports = defineConfig({
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/react',
+    'prettier',
+    require.resolve('./rules/react.cjs'),
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    linkComponents: [
+      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
+      'Link',
+    ],
+  },
+});

eslint/rules/react.cjs

@@ -0,0 +1,90 @@
+// @ts-check
+const { defineConfig } = require('eslint-define-config');
+
+module.exports = defineConfig({
+  rules: {
+    // We should prefer TypeScript over prop-types.
+    'react/prop-types': 'off',
+    // Disable requiring React to be imported, as this is no longer required.
+    'react/react-in-jsx-scope': 'off',
+    /**
+     * Require an explicit type when using button elements. Prevents common mistakes where `type="button"` is omitted on `<button>` elements.
+     */
+    'react/button-has-type': 'error',
+    /**
+     * Require consistent function type for function components.
+     */
+    'react/function-component-definition': 'warn',
+    /**
+     * Require destructuring and symmetric naming of `useState` hook value and setter variables.
+     */
+    'react/hook-use-state': 'warn',
+    /**
+     * Require consistent boolean attributes notation in JSX.
+     */
+    'react/jsx-boolean-value': 'warn',
+    /**
+     * Disallow unnecessary curly braces in JSX props and children.
+     */
+    'react/jsx-curly-brace-presence': [
+      'warn',
+      {
+        props: 'never',
+        children: 'ignore',
+        propElementValues: 'always',
+      },
+    ],
+    /**
+     * Require using shorthand form for React fragments, unless required.
+     */
+    'react/jsx-fragments': 'warn',
+    /**
+     * Prevent problematic leaked values from being rendered.
+     */
+    'react/jsx-no-leaked-render': 'error',
+    /**
+     * Prevents usage of unsafe `target='_blank'`.
+     *
+     * This rule is a part of `react/recommended`, but modified to
+     * enable allowReferrer.
+     */
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+    /**
+     * Disallow empty React fragments.
+     */
+    'react/jsx-no-useless-fragment': ['warn', { allowExpressions: true }],
+    /**
+     * Require the use of PascalCase for user-defined JSX components.
+     */
+    'react/jsx-pascal-case': 'warn',
+    /**
+     * Require props to be sorted alphabetically.
+     */
+    'react/jsx-sort-props': [
+      'warn',
+      {
+        // list callbacks after all other props
+        callbacksLast: true,
+      },
+    ],
+    /**
+     * Disallow creating unstable components inside components.
+     */
+    'react/no-unstable-nested-components': 'error',
+    /**
+     * Disallow closing tags for components without children.
+     */
+    'react/self-closing-comp': 'warn',
+    /**
+     * Enforce exhaustive dependencies in `useEffect` and `useCallback` hooks.
+     */
+    'react-hooks/exhaustive-deps': 'error',
+    // prefer destructuring props
+    'react/destructuring-assignment': ['warn', 'always'],
+  },
+});

package.json

@@ -30,6 +30,8 @@
     "eslint-define-config": "^2.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unicorn": "^49.0.0"
   }
 }