@mkaradeniz/eslint-config 4.7.0 → 5.0.0

package/base.mjs

@@ -3,7 +3,6 @@ import eslintPluginImportX from 'eslint-plugin-import-x';
 import eslintPluginOnlyWarn from 'eslint-plugin-only-warn';
 import eslintPluginPerfectionist from 'eslint-plugin-perfectionist';
 import eslintPluginPreferArrowFunctions from 'eslint-plugin-prefer-arrow-functions';
-import eslintPluginReactCompiler from 'eslint-plugin-react-compiler';
 import eslintPluginUnicorn from 'eslint-plugin-unicorn';
 import eslintPluginUnusedImports from 'eslint-plugin-unused-imports';
 import globals from 'globals';
@@ -96,10 +95,6 @@ export const baseConfig = [
        * https://github.com/JamieMason/eslint-plugin-prefer-arrow-functions
        */
       'prefer-arrow-functions': eslintPluginPreferArrowFunctions,
-      /**
-       * https://github.com/react-compiler/eslint-plugin-react-compiler
-       */
-      'react-compiler': eslintPluginReactCompiler,
       /**
        * https://github.com/sindresorhus/eslint-plugin-unicorn
        */

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@mkaradeniz/eslint-config",
-  "version": "4.7.0",
+  "version": "5.0.0",
   "private": false,
   "files": [
     "base.mjs",
     "web.mjs",
     "next.mjs",
     "react.mjs",
-    "react19.mjs",
     "turbo.mjs",
     "eslint.config.mjs",
     "rules/"
@@ -36,7 +35,8 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-turbo": "2.8.3",
+    "eslint-plugin-react-you-might-not-need-an-effect": "^0.9.0",
+    "eslint-plugin-turbo": "^2.8.9",
     "eslint-plugin-unicorn": "^62.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^17.3.0",

package/react.mjs

@@ -1,8 +1,8 @@
 import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
 import eslintPluginReact from 'eslint-plugin-react';
+import eslintPluginReactCompiler from 'eslint-plugin-react-compiler';
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
-
-import eslintPluginStylistic from '@stylistic/eslint-plugin';
+import eslintPluginReactYMNNAE from 'eslint-plugin-react-you-might-not-need-an-effect';
 
 import { baseConfig } from './base.mjs';
 import { reactRules } from './rules/reactRules.mjs';
@@ -17,10 +17,11 @@ export const reactConfig = [
       },
     },
     plugins: {
-      '@stylistic': eslintPluginStylistic,
       'jsx-a11y': eslintPluginJsxA11y,
       react: eslintPluginReact,
+      'react-compiler': eslintPluginReactCompiler,
       'react-hooks': eslintPluginReactHooks,
+      'react-you-might-not-need-an-effect': eslintPluginReactYMNNAE,
     },
     settings: {
       react: { version: 'detect' },

package/rules/nextRules.mjs

@@ -21,8 +21,5 @@ export const nextRules = {
     '@next/next/no-title-in-document-head': ['warn'],
     '@next/next/no-typos': ['warn'],
     '@next/next/no-unwanted-polyfillio': ['warn'],
-
-    // React 19 compiler rules
-    'react-compiler/react-compiler': ['warn'],
   },
 };

package/rules/reactRules.mjs

@@ -1,5 +1,10 @@
+import { baseRules } from './baseRules.mjs';
+
+const [baseNoRestrictedSyntaxSeverity, ...baseNoRestrictedSyntaxSelectors] = baseRules.rules['no-restricted-syntax'];
+
 export const reactRules = {
   rules: {
+    // NOTE: This overrides base `no-restricted-imports`. If base ever adds its own, merge like we do with `no-restricted-syntax`.
     'no-restricted-imports': [
       'warn',
       {
@@ -7,7 +12,7 @@ export const reactRules = {
           {
             importNames: [
               'createContext',
-              'fordwardRef',
+              'forwardRef',
               'startTransition',
               'use',
               'useCallback',
@@ -27,12 +32,20 @@ export const reactRules = {
               'useTransition',
             ],
             message:
-              "React built-in hooks & functions should not be important directly. `Import React from 'react'` and then use `React.useBuiltInHook()` || `React.function()`.",
+              "React built-in hooks & functions should not be imported directly. `import React from 'react'` and then use `React.useBuiltInHook()` || `React.function()`.",
             name: 'react',
           },
         ],
       },
     ],
+    'no-restricted-syntax': [
+      baseNoRestrictedSyntaxSeverity,
+      ...baseNoRestrictedSyntaxSelectors,
+      {
+        message: 'Use the cn() utility instead of template literals for className.',
+        selector: "JSXAttribute[name.name='className'] > JSXExpressionContainer > TemplateLiteral",
+      },
+    ],
     'react/button-has-type': 'off',
     'react/display-name': ['warn'],
     'react/function-component-definition': ['warn', { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }],
@@ -47,24 +60,20 @@ export const reactRules = {
     'react/jsx-no-target-blank': ['warn', { allowReferrer: true, forms: false, links: true }],
     'react/jsx-no-undef': ['warn'],
     'react/jsx-no-useless-fragment': ['warn', { allowExpressions: true }],
-    'react/jsx-pascal-case': ['warn'],
+    'react/jsx-pascal-case': ['off'],
     'react/jsx-sort-props': ['off'],
-    'react/jsx-uses-react': ['warn'],
-    'react/jsx-uses-vars': ['warn'],
     'react/no-array-index-key': ['warn'],
     'react/no-danger-with-children': ['warn'],
     'react/no-deprecated': ['warn'],
-    'react/no-direct-mutation-state': ['warn'],
-    'react/no-find-dom-node': ['warn'],
-    'react/no-is-mounted': ['warn'],
     'react/no-render-return-value': ['warn'],
-    'react/no-string-refs': ['warn'],
     'react/no-unescaped-entities': ['warn'],
     'react/no-unknown-property': ['warn'],
     'react/no-unstable-nested-components': ['warn'],
-    'react/require-render-return': ['warn'],
     'react/self-closing-comp': ['warn'],
 
+    // react-compiler
+    'react-compiler/react-compiler': ['warn'],
+
     // react-hooks
     'react-hooks/exhaustive-deps': ['warn'],
     'react-hooks/rules-of-hooks': ['warn'],
@@ -141,5 +150,16 @@ export const reactRules = {
     'jsx-a11y/role-supports-aria-props': ['warn'],
     'jsx-a11y/scope': ['warn'],
     'jsx-a11y/tabindex-no-positive': ['warn'],
+
+    // react-you-might-not-need-an-effect
+    'react-you-might-not-need-an-effect/no-adjust-state-on-prop-change': ['warn'],
+    'react-you-might-not-need-an-effect/no-chain-state-updates': ['warn'],
+    'react-you-might-not-need-an-effect/no-derived-state': ['warn'],
+    'react-you-might-not-need-an-effect/no-empty-effect': ['warn'],
+    'react-you-might-not-need-an-effect/no-event-handler': ['warn'],
+    'react-you-might-not-need-an-effect/no-initialize-state': ['warn'],
+    'react-you-might-not-need-an-effect/no-pass-data-to-parent': ['warn'],
+    'react-you-might-not-need-an-effect/no-pass-live-state-to-parent': ['warn'],
+    'react-you-might-not-need-an-effect/no-reset-all-state-on-prop-change': ['warn'],
   },
 };

package/web.mjs

@@ -1,4 +1,3 @@
-import { nextConfig } from './next.mjs';
-import { react19Config } from './react19.mjs';
+import { reactConfig } from './react.mjs';
 
-export const webConfig = [...nextConfig, ...react19Config];
+export const webConfig = [...reactConfig];

package/react19.mjs

@@ -1,12 +0,0 @@
-import eslintPluginReactCompiler from 'eslint-plugin-react-compiler';
-
-import { react19Rules } from './rules/react19Rules.mjs';
-
-export const react19Config = [
-  {
-    plugins: {
-      'react-compiler': eslintPluginReactCompiler,
-    },
-  },
-  { ...react19Rules },
-];

package/rules/react19Rules.mjs

@@ -1,5 +0,0 @@
-export const react19Rules = {
-  rules: {
-    'react-compiler/react-compiler': ['warn'],
-  },
-};