When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.

The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:

import { fixupPluginRules } from "@eslint/compat";

  // Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config, 
  // because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
  // Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
  {
    plugins: {
      "react": reactPlugin, // remove this if you already have another config object that adds the react plugin
      "react-hooks": fixupPluginRules(eslintPluginReactHooks),
    },
    rules: {
      ...eslintPluginReactHooks.configs.recommended.rules,
    },
  },

Resources

  • https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687

Proof it works

I've confirmed this by having a code that should error, and saw the error:

  const [first, setfirst] = useState("");
  useEffect(() => {
    console.log(first);
  }, []);
8:6  warning  React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
Answer from Ben Butterworth on Stack Overflow
🌐
npm
npmjs.com › package › eslint-plugin-react
eslint-plugin-react - npm
April 3, 2025 - This plugin exports a recommended configuration that enforces React good practices. To enable this configuration use the extends property in your .eslintrc config file:
      » npm install eslint-plugin-react
    
Published   Apr 03, 2025
Version   7.37.5
Author   Yannick Croissant
Top answer
1 of 4
10

When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.

The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:

import { fixupPluginRules } from "@eslint/compat";

  // Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config, 
  // because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
  // Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
  {
    plugins: {
      "react": reactPlugin, // remove this if you already have another config object that adds the react plugin
      "react-hooks": fixupPluginRules(eslintPluginReactHooks),
    },
    rules: {
      ...eslintPluginReactHooks.configs.recommended.rules,
    },
  },

Resources

  • https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687

Proof it works

I've confirmed this by having a code that should error, and saw the error:

  const [first, setfirst] = useState("");
  useEffect(() => {
    console.log(first);
  }, []);
8:6  warning  React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
2 of 4
4

[email protected] was released a few weeks ago with "stable" eslint v9 support. If you can upgrade, then see https://github.com/facebook/react/issues/28313#issuecomment-2408157792 for a sample configuration for now.

Also, follow this thread if interested in documentation refresh

Discussions

What eslint rules you recommend?
eslint-plugin-unicorn is always a great choice. What I like to do with core ESLint, or any plugin I use, is turn on every rule. I often find that this helps me find some rules that weren't turned on by default, that I probably wouldn't have found otherwise. From there, if I see a rule that I dislike, I either check to see if it can be configured in a way that I like, or I turn it off otherwise. More on reddit.com
🌐 r/reactjs
68
40
February 21, 2025
What ESLint Plugins Do You Recommend When Using NextJs?
Here is my ESLint plugins I use for all my NextJS projects: https://github.com/ixartz/Next-js-Boilerplate/blob/main/package.json#L85-L102 There are 18 plugins. I also use ESLint plugins for testing part: Jest, Playwright, Storybook, etc. And here you can find how I configure everything: https://github.com/ixartz/Next-js-Boilerplate/blob/main/.eslintrc More on reddit.com
🌐 r/reactjs
25
14
February 20, 2024
reactjs - Configuring eslint with JSX - Stack Overflow
I cannot figure out how to configure my .eslintrc file to properly "accept" JSX. In other words, it freaks out when JSX is being typed out in Atom. I added the "parser": "babel-eslint", since that... More on stackoverflow.com
🌐 stackoverflow.com
New to React and eslint is the hardest part
Lint rules should help you, not hurt you: https://twitter.com/dan_abramov/status/1086215004808978434 Open your ESLint config Disable all styling rules (or add eslint-config-prettier which does that) Install Prettier You’ll thank me. Linters are there to help you find mistakes in your code. Not to torture you. If your linter tortures you, it’s not your fault (but might be your team lead’s). Look at every linting rule and think: “Does this rule bring me joy help me find bugs?” If not, TURN IT OFF. Note that the eslint-config-react-app that comes with Create-React-App by default only warns about things that may cause possible bugs, like using variables before they're defined or breaking the React rules of hooks. I would suggest not using the Airbnb config, because it's far too over-opinionated and many of the things that it warns about are perfectly valid things to do in React (like creating arrow functions while rendering and passing them as props). More on reddit.com
🌐 r/reactjs
24
3
February 24, 2021
🌐
GitHub
github.com › jsx-eslint › eslint-plugin-react
GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint · GitHub
This plugin exports a recommended configuration that enforces React good practices. To enable this configuration use the extends property in your .eslintrc config file:
Starred by 9.3K users
Forked by 2.7K users
Languages   JavaScript
🌐
npm
npmjs.com › package › eslint-plugin-react-hooks
eslint-plugin-react-hooks - npm
If you are still using ESLint below 9.0.0, the recommended preset can also be used to enable all recommended rules. { "extends": ["plugin:react-hooks/recommended"], // ...
      » npm install eslint-plugin-react-hooks
    
Published   Oct 24, 2025
Version   7.0.1
Homepage   https://react.dev/
🌐
React
react.dev › reference › eslint-plugin-react-hooks
eslint-plugin-react-hooks – React
These rules are included in the recommended preset in eslint-plugin-react-hooks:
🌐
Reddit
reddit.com › r/reactjs › what eslint rules you recommend?
r/reactjs on Reddit: What eslint rules you recommend?
February 21, 2025 -

Hey all, I am in the process of creating my own eslint version 9 set of rules with a flat config for the first time and I am wondering what you guys are using or recommending as a must have?

I use Typescript with React so thought to definitely include eslint-plugin-react and typescript-eslint. What else? I saw there is sonar eslint too but this one seems not so popular?

Do you have any "gems" that are not enabled by default or not popular but still a great addition?

I also see that many rules can be customized a bit, do you recommend that or rather not?

Really curious and interested about your experience on this, thanks!

🌐
LogRocket
blog.logrocket.com › home › 12 essential eslint rules for react
12 essential ESLint rules for React - LogRocket Blog
June 4, 2024 - This will cause ESLint to report errors about React not being in scope (for more details, see the rule react/react-in-jsx-scope below). If this applies to your application, you’ll need to add plugin:react/jsx-runtime to your extends list: { ... other ESLint config extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended' ] }
Find elsewhere
🌐
Medium
medium.com › @RossWhitehouse › setting-up-eslint-in-react-c20015ef35f7
Setting up ESLint in React
April 13, 2018 - Alternatively if you're running ESLint locally, we run npm install eslint-plugin-react --save-dev. This will install the plugin we need, but we need to tell ESLint that we want this plugin to help us out. In our ESLint config file, we just need a few extra lines. "extends": [ "eslint:recommended", "plugin:react/recommended" ]
🌐
Tim James
timjames.dev › blog › the-best-eslint-rules-for-react-projects-30i8
The Best ESLint Rules for React Projects | Tim James
September 16, 2023 - Hi, I'm Tim William James, a full-stack developer from Canberra, Australia. My core technologies include TypeScript, React, and AWS.
🌐
npm
npmjs.com › package › @eslint-react › eslint-plugin
@eslint-react/eslint-plugin - npm
1 month ago - recommended-type-checked Same as the recommended-typescript preset but enables additional rules that require type information. strict-typescript Same as the strict preset but disables rules that can be enforced by TypeScript. strict-type-checked ...
      » npm install @eslint-react/eslint-plugin
    
Published   Feb 14, 2026
Version   2.13.0
Author   Rel1cx
🌐
freeCodeCamp
freecodecamp.org › news › how-to-add-eslint-to-your-react-project
How to Add ESLint to Your React Project
August 8, 2023 - The above configuration sets up ESLint to work with React and React Hooks using the recommended configurations. You can add or customize rules according to your project's specific requirements. Created the.eslintrc.json file and added the configuration that allows ESLint to work with React.
🌐
Better Programming
betterprogramming.pub › 4-essential-eslint-plugins-you-need-in-your-react-setup-824b419ce598
4 Essential ESLint Plugins You Need in Your React Setup | by Roberto Hernandez | Better Programming
March 16, 2020 - 4 Essential ESLint Plugins You Need in Your React Setup Focus on coding and let them help you with the rest Along the coding journey, I have learned how a proper setup environment can boost your …
🌐
GitHub
github.com › Rel1cx › eslint-react
GitHub - Rel1cx/eslint-react: 4-7x faster, composable ESLint rules for React and friends.
recommended-type-checked Same as the recommended-typescript preset but enables additional rules that require type information. strict-typescript Same as the strict preset but disables rules that can be enforced by TypeScript. strict-type-checked ...
Starred by 490 users
Forked by 39 users
Languages   TypeScript 80.1% | MDX 19.3% | TypeScript 80.1% | MDX 19.3%
🌐
GitHub
github.com › facebook › react › blob › main › packages › eslint-plugin-react-hooks › README.md
react/packages/eslint-plugin-react-hooks/README.md at main · facebook/react
If you are still using ESLint below 9.0.0, the recommended preset can also be used to enable all recommended rules. { "extends": ["plugin:react-hooks/recommended"], // ...
Author   facebook
🌐
Next.js
nextjs.org › docs › app › api-reference › config › eslint
Configuration: ESLint | Next.js
2 weeks ago - Those rules are based on plugin:@typescript-eslint/recommended.
Top answer
1 of 1
43

Things have changed in ESLint 2 in regards to ecmaFeatures (and a lot more...)

Instead of

{
    ecmaFeatures: {
        jsx: true
    }
}

try

{
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        }
    }
}

And I think you can remove parser, but I don't use Atom myself, so I not going to say it for certain. It's not part of my own .eslintrc. And then you probalby want to to add the react linting rules. https://github.com/yannickcr/eslint-plugin-react

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

I like to just add all this junk to rules so I have quick access when I want to disable something, but maybe that's just me.

{
  "rules": {
    "jsx-quotes"       : 1,
    "react/display-name": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-handler-names": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-indent": 1,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 0,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-deprecated": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-is-mounted": 1,
    "react/no-multi-comp": 0,
    "react/no-set-state": 1,
    "react/no-string-refs": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}
🌐
Scaler
scaler.com › home › topics › react › eslint plugin react
ESLint Plugin React - Scaler Topics
May 4, 2023 - Include the .js extension if your eslint.config.js is ESM (for example, eslint-plugin-react/recommended.js).