@timobechtel/style 1.4.1 → 1.6.0

package/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`

package/eslint/core.cjs

@@ -45,5 +45,15 @@ module.exports = defineConfig({
         require.resolve('./rules/typescript.cjs'),
       ],
     },
+    {
+      files: ['*.test.ts?(x)', '*.spec.ts?(x)'],
+      rules: {
+        // ts-expect-error makes sense for tests
+        '@typescript-eslint/ban-ts-comment': [
+          'off',
+          { 'ts-expect-error': 'off' },
+        ],
+      },
+    },
   ],
 });

package/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',
+    ],
+  },
+});

package/eslint/rules/base.cjs

@@ -78,5 +78,7 @@ module.exports = defineConfig({
         varsIgnorePattern: '^_',
       },
     ],
+    // Disallow expressions where the operation doesn't affect the value
+    'no-constant-binary-expression': 'error',
   },
 });

package/eslint/rules/import.cjs

@@ -27,5 +27,13 @@ module.exports = defineConfig({
     ],
     // allow default exports
     'import/no-default-export': 'off',
+    /**
+     * These are enabled by `import/recommended`, but are better handled by
+     * TypeScript and @typescript-eslint.
+     */
+    'import/default': 'off',
+    'import/export': 'off',
+    'import/namespace': 'off',
+    'import/no-unresolved': 'off',
   },
 });

package/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/eslint/rules/typescript.cjs

@@ -95,5 +95,12 @@ module.exports = defineConfig({
     // While I'd prefer using types over interfaces, there are a lot of cases
     // where interfaces are needed, e.g. merging declarations and this rule is too strict.
     '@typescript-eslint/consistent-type-definitions': 'off',
+    // while using property signatures provides better typechecking,
+    // method signatures provide better hinting in the editor.
+    // (different color for methods vs properties)
+    '@typescript-eslint/method-signature-style': 'off',
+    // There are cases where using the index signature is more descriptive
+    // as the index can be named
+    '@typescript-eslint/consistent-indexed-object-style': 'off',
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timobechtel/style",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "type": "module",
   "files": [
     "bin",
@@ -10,26 +10,28 @@
     "tsconfig"
   ],
   "devDependencies": {
-    "eslint": "^8.54.0",
-    "prettier": "^3.1.0",
-    "semantic-release": "^22.0.8",
-    "typescript": "^5.3.2"
+    "eslint": "^8.57.0",
+    "prettier": "^3.2.5",
+    "semantic-release": "^23.0.5",
+    "typescript": "^5.4.3"
   },
   "peerDependencies": {
-    "eslint": "^8.54.0",
-    "prettier": "^3.1.0",
-    "semantic-release": "^22.0.8",
-    "typescript": "^5.3.2"
+    "eslint": "^8.57.0",
+    "prettier": "^3.2.5",
+    "semantic-release": "^23.0.5",
+    "typescript": "^5.4.3"
   },
   "dependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-define-config": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-define-config": "^2.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-unicorn": "^49.0.0"
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unicorn": "^51.0.1"
   }
 }