Add ESLint to your Replit React project by installing eslint and the React-specific plugins via Shell, creating an .eslintrc.json configuration file with strict rules, and running npx eslint . to check your code. Configure rules for hooks, unused variables, missing keys, and import ordering. Add a lint script to package.json for easy execution. Replit Agent does not enforce ESLint automatically, so running the linter manually or in onBoot is essential for maintaining code quality.
How to Make Replit Follow ESLint Rules in a React Project
Replit Agent generates code quickly, but it does not enforce consistent code quality rules. ESLint catches bugs, enforces patterns, and prevents common React mistakes like missing hook dependencies and unused imports. This tutorial walks you through installing ESLint with React-specific plugins, configuring strict rules, and running the linter inside Replit's workspace.
Prerequisites
- A Replit account with a React project (any plan)
- Basic understanding of React components and JSX
- Access to the Shell tab in Replit
- Node.js project with a package.json file
Step-by-step guide
Install ESLint and React plugins
Install ESLint and React plugins
Open the Shell tab from the Tools dock and install ESLint along with the React-specific plugins. You need eslint core, eslint-plugin-react for React rules, eslint-plugin-react-hooks for hooks rules, and eslint-plugin-jsx-a11y for accessibility checks. If your project uses TypeScript, also install @typescript-eslint/eslint-plugin and @typescript-eslint/parser. These packages add rules that understand React's component model and JSX syntax.
1# Install ESLint and React plugins2npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y34# For TypeScript projects, also install:5npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parserExpected result: ESLint and all React plugins are installed and listed in devDependencies in your package.json.
Create the ESLint configuration file
Create the ESLint configuration file
Create a .eslintrc.json file in your project root. This file tells ESLint which rules to enforce, which environments your code runs in, and how to parse JSX and TypeScript. Extend the recommended configurations from ESLint and the React plugins to get a solid baseline. Then add specific rules to match your coding standards. The settings section tells the React plugin to auto-detect your React version.
1// Create .eslintrc.json in your project root2{3 "env": {4 "browser": true,5 "es2021": true,6 "node": true7 },8 "extends": [9 "eslint:recommended",10 "plugin:react/recommended",11 "plugin:react-hooks/recommended",12 "plugin:jsx-a11y/recommended"13 ],14 "parserOptions": {15 "ecmaVersion": "latest",16 "sourceType": "module",17 "ecmaFeatures": {18 "jsx": true19 }20 },21 "plugins": ["react", "react-hooks", "jsx-a11y"],22 "settings": {23 "react": {24 "version": "detect"25 }26 },27 "rules": {28 "react/react-in-jsx-scope": "off",29 "react/prop-types": "warn",30 "react-hooks/rules-of-hooks": "error",31 "react-hooks/exhaustive-deps": "warn",32 "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],33 "no-console": ["warn", { "allow": ["warn", "error"] }],34 "jsx-a11y/anchor-is-valid": "warn"35 }36}Expected result: A .eslintrc.json file exists in your project root with React-specific rules configured.
Add a lint script to package.json
Add a lint script to package.json
Add scripts to your package.json so you can run ESLint with a simple npm command. The lint script checks all files. The lint:fix script automatically fixes issues that ESLint can resolve on its own, like removing unused imports or fixing spacing. Having these scripts makes it easy to run the linter consistently and integrate it into your workflow.
1// Add to the "scripts" section of package.json2{3 "scripts": {4 "lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",5 "lint:fix": "eslint src/ --ext .js,.jsx,.ts,.tsx --fix",6 "dev": "vite",7 "build": "vite build"8 }9}Expected result: Running npm run lint in Shell executes ESLint against your src directory and reports any rule violations.
Run ESLint and interpret the results
Run ESLint and interpret the results
Open Shell and run npm run lint to check your codebase. ESLint outputs a list of issues grouped by file, with line numbers, rule names, and descriptions. Errors (marked with a red indicator) are things that should be fixed before deploying. Warnings (yellow) are suggestions. The rule name in parentheses (like react-hooks/exhaustive-deps) tells you exactly which rule triggered the issue so you can look it up or configure it. Run npm run lint:fix to auto-fix formatting and simple issues.
1# Check all files2npm run lint34# Auto-fix what ESLint can fix automatically5npm run lint:fix67# Check a single file8npx eslint src/components/UserProfile.jsxExpected result: ESLint outputs a list of issues with file paths, line numbers, and rule names. Fixable issues are resolved by lint:fix.
Configure rules for common React mistakes
Configure rules for common React mistakes
Tighten your ESLint rules to catch the React-specific bugs that Replit Agent most commonly introduces. The exhaustive-deps rule catches missing useEffect dependencies. The rules-of-hooks rule prevents hooks from being called conditionally. The no-unused-vars rule catches dead imports. Customize the severity (error vs warn vs off) based on how strictly you want to enforce each rule.
1// Strict rules for catching common React bugs2"rules": {3 // Hooks must follow rules — never conditional4 "react-hooks/rules-of-hooks": "error",56 // Warn when useEffect dependencies are missing7 "react-hooks/exhaustive-deps": "warn",89 // Catch unused variables (ignore args starting with _)10 "no-unused-vars": ["error", {11 "argsIgnorePattern": "^_",12 "varsIgnorePattern": "^_"13 }],1415 // Prevent console.log in production code16 "no-console": ["warn", { "allow": ["warn", "error"] }],1718 // Require keys in list rendering19 "react/jsx-key": "error",2021 // No direct state mutation22 "react/no-direct-mutation-state": "error",2324 // Catch accessibility issues25 "jsx-a11y/alt-text": "error",26 "jsx-a11y/anchor-is-valid": "warn"27}Expected result: ESLint catches hooks violations, missing keys, unused variables, and accessibility issues specific to React code.
Add an .eslintignore file
Add an .eslintignore file
Create an .eslintignore file to exclude directories and files that should not be linted. Skip node_modules (excluded by default), build output directories, and any generated or vendor files. This speeds up the linting process and prevents false positives from code you did not write.
1# .eslintignore2node_modules/3dist/4build/5*.min.js6public/7.replit8replit.nixExpected result: ESLint skips the specified directories and files, running faster and producing only relevant results.
Complete working example
1{2 "env": {3 "browser": true,4 "es2021": true,5 "node": true6 },7 "extends": [8 "eslint:recommended",9 "plugin:react/recommended",10 "plugin:react-hooks/recommended",11 "plugin:jsx-a11y/recommended"12 ],13 "parserOptions": {14 "ecmaVersion": "latest",15 "sourceType": "module",16 "ecmaFeatures": {17 "jsx": true18 }19 },20 "plugins": ["react", "react-hooks", "jsx-a11y"],21 "settings": {22 "react": {23 "version": "detect"24 }25 },26 "rules": {27 "react/react-in-jsx-scope": "off",28 "react/prop-types": "warn",29 "react/jsx-key": "error",30 "react/no-direct-mutation-state": "error",31 "react/no-unescaped-entities": "warn",32 "react-hooks/rules-of-hooks": "error",33 "react-hooks/exhaustive-deps": "warn",34 "no-unused-vars": ["warn", {35 "argsIgnorePattern": "^_",36 "varsIgnorePattern": "^_"37 }],38 "no-console": ["warn", { "allow": ["warn", "error"] }],39 "no-duplicate-imports": "error",40 "no-var": "error",41 "prefer-const": "warn",42 "eqeqeq": ["error", "always"],43 "jsx-a11y/alt-text": "error",44 "jsx-a11y/anchor-is-valid": "warn",45 "jsx-a11y/click-events-have-key-events": "warn",46 "jsx-a11y/no-static-element-interactions": "warn"47 }48}Common mistakes when making Replit follow ESLint rules
Why it's a problem: Installing ESLint globally instead of as a project dependency, causing it to disappear on restart
How to avoid: Use npm install --save-dev eslint to install it locally in your project
Why it's a problem: Not creating an .eslintrc.json file, causing ESLint to run with no rules configured
How to avoid: Create .eslintrc.json in your project root with extends arrays for recommended configs
Why it's a problem: Ignoring the react-hooks/exhaustive-deps warning, leading to stale state bugs in useEffect
How to avoid: Add missing dependencies to the useEffect dependency array or restructure the effect to avoid the dependency
Why it's a problem: Setting all rules to error severity, making it impossible to work with Agent-generated code
How to avoid: Use warn for style preferences and error only for rules that prevent real bugs
Why it's a problem: Not specifying --ext with file extensions, causing ESLint to only check .js files
How to avoid: Add --ext .js,.jsx,.ts,.tsx to your lint script to cover all React and TypeScript files
Best practices
- Install ESLint as a dev dependency (--save-dev) so it does not bloat production bundles
- Turn off react/react-in-jsx-scope for React 17+ projects that use the new JSX transform
- Use error severity for rules that catch real bugs (hooks/rules-of-hooks, jsx-key) and warn for style preferences
- Run npm run lint:fix before manual review to automatically resolve formatting issues
- Create an .eslintignore file to skip node_modules, dist, and generated files
- Add the lint script to your onBoot or pre-build workflow to catch issues early
- Use the argsIgnorePattern ^_ convention to intentionally mark unused function parameters
- Review Agent-generated code with ESLint after each major change to catch introduced issues
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I set up ESLint in my Replit React project but running npx eslint src/ shows hundreds of errors. Most are unused variable warnings and missing prop-types. How should I configure .eslintrc.json to focus on catching real bugs while being less strict about style?
Set up ESLint in my React project with strict rules. Install eslint, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. Create an .eslintrc.json file with rules to catch missing hook dependencies, unused variables, missing JSX keys, and accessibility issues. Add lint and lint:fix scripts to package.json. For complex ESLint configurations across large React codebases, teams can consult RapidDev for tailored linting strategies.
Frequently asked questions
No. Replit does not run ESLint automatically when you save files or when Agent generates code. You must run npm run lint manually in Shell or add it to your onBoot or build script.
Yes. ESLint catches common issues like unused imports, missing hook dependencies, conditional hook calls, and missing keys in list rendering. Running the linter after Agent makes changes is a good quality check.
Modern React (17+) with the new JSX transform does not require React to be imported in every file. Add the rule 'react/react-in-jsx-scope': 'off' to your .eslintrc.json rules section.
Yes. Install prettier and eslint-config-prettier to prevent conflicts. Add 'prettier' as the last item in your extends array so it turns off ESLint rules that conflict with Prettier's formatting.
Add --ext .ts,.tsx to your lint script. For full TypeScript support, install @typescript-eslint/eslint-plugin and @typescript-eslint/parser, and set the parser in .eslintrc.json to @typescript-eslint/parser.
Add // eslint-disable-next-line rule-name above the line. For an entire file, add /* eslint-disable rule-name */ at the top. Use this sparingly and only when you have a good reason to break the rule.
For strict projects, yes. Modify your build script to run ESLint first: 'build': 'eslint src/ --ext .js,.jsx && vite build'. This prevents deploying code with linting errors.
ESLint only runs when you explicitly execute it. It does not run in the background or affect your app's runtime performance. The installation adds a few MB to node_modules but has no impact on deployed app size if listed in devDependencies.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation