How to configure ESLint in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Maintaining consistent code quality across React projects becomes critical in team environments where multiple developers contribute to the same codebase. As the creator of CoreUI, I’ve configured ESLint for countless production applications. ESLint is the industry standard JavaScript linter that catches errors, enforces coding standards, and integrates seamlessly with React projects. The configuration involves installing packages and creating a config file that defines your project’s linting rules.
Install ESLint with React plugins and create a configuration file to enforce coding standards.
npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks
Create .eslintrc.json in your project root:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"react/react-in-jsx-scope": "off",
"react/prop-types": "warn"
}
}
Add script to package.json:
"scripts": {
"lint": "eslint src/**/*.{js,jsx}"
}
Best Practice Note
The react/react-in-jsx-scope rule is disabled for React 17+ since the new JSX transform eliminates the need to import React. Add eslint-config-prettier to prevent conflicts with Prettier formatting. For TypeScript projects, install @typescript-eslint/parser and @typescript-eslint/eslint-plugin. This is the same ESLint configuration we use in CoreUI React templates to maintain code quality across thousands of lines of production component code.
