Getting Started
JavaScript
Getting started using ESLint React in your JavaScript React project
This instruction requires the following minimum versions:
- Node.js: 18.18.0
- ESLint: 8.57.0
- TypeScript: 4.9.5
Installation
npm install --save-dev globals eslint @eslint/js @eslint-react/eslint-pluginpnpm add --save-dev globals eslint @eslint/js @eslint-react/eslint-pluginyarn add --dev globals eslint @eslint/js @eslint-react/eslint-pluginbun add --dev globals eslint @eslint/js @eslint-react/eslint-pluginConfigure ESLint
import globals from "globals";
import eslintJs from "@eslint/js";
import eslintReact from "@eslint-react/eslint-plugin";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.js", "**/*.jsx"],
// Extend recommended rule sets from:
// 1. ESLint JS's recommended rules
// 2. ESLint React's recommended rules
extends: [eslintJs.configs.recommended, eslintReact.configs.recommended],
// Configure language/parsing options
languageOptions: {
// Include browser global variables (window, document, etc.)
globals: {
...globals.browser,
},
parserOptions: {
ecmaFeatures: {
jsx: true, // Enable JSX syntax support
},
},
},
// Custom rule overrides (modify rule levels or disable rules)
rules: {
"@eslint-react/no-missing-key": "warn",
},
},
]);Configure Project Config (Optional)
// @ts-check
import tseslint from "typescript-eslint";
export default [
{
languageOptions: {
parser: tseslint.parser,
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
];{
"compilerOptions": {
// ...other options
"jsx": "react-jsx"
},
"include": ["**/*.js", "**/*.jsx"]
}TIP
Once you've correctly configured the project for the files to be linted, ESLint React utilizes the information from the TypeScript compiler to provide better linting results.
For more information, see the Configure Project Config section.