Create a root ESLint config in the project (or update it), add a sensible .eslintignore and lint scripts, then use Lovable Chat Mode to make code edits that fix the lint errors you see. If you need to actually run eslint --fix or install plugins, export/sync to GitHub and run those commands outside Lovable (terminal required).

Quick: create/update ESLint config inside Lovable

Paste this prompt into Lovable chat to create or update config files. It will add a standard TypeScript/React-friendly .eslintrc.json, .eslintignore, and update package.json scripts. I will not run npm install here; if your project needs extra ESLint plugins, I’ll list them and mark “outside Lovable (terminal required)” steps.

• Prompt to paste into Lovable:

// Please create or update these files in the project root.

// 1) Create or replace .eslintrc.json with this content
create_or_update .eslintrc.json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "plugins": ["@typescript-eslint", "react", "react-hooks", "import", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "settings": { "react": { "version": "detect" } },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    "no-unused-vars": "off",
    "prettier/prettier": "warn"
  }
}

// 2) Create .eslintignore
create_if_missing .eslintignore
node_modules
.build
dist
.next
.vite

// 3) Update package.json scripts (merge into existing scripts)
update package.json -> modify "scripts" to include:
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"

// After applying files, list any missing npm packages required by the config (e.g., @typescript-eslint/parser, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-prettier).
// If packages are missing, mark them as: OUTSIDE LOVABLE (terminal required) and provide the exact npm install command.

Fix specific ESLint errors inside Lovable (use this prompt when you have errors)

Use this prompt when you paste ESLint error lines. Lovable will edit only the referenced files/lines and show diffs before applying. This avoids guessing.

• Prompt to paste into Lovable (after you paste your ESLint output):

// I will paste ESLint error output below. For each error line, edit the specific file/path and fix it.
// Only make minimal, rule-driven fixes. Show a unified diff for each file and ask for my confirmation before saving.

// Example ESLint output I will paste (replace with your actual output):
// src/components/Button.tsx:10:5 - 'unusedVar' is assigned a value but never used. [no-unused-vars]

// Fix rules to apply:
// - For no-unused-vars, remove unused binding or rename to _unused to intentionally ignore.
// - For missing React import in older projects, add: import React from 'react';
// - For missing dependency in useEffect, add the dependency or add a comment explaining why it is intentionally omitted with // eslint-disable-next-line react-hooks/exhaustive-deps
// - For default export warnings, convert to named export if the rule demands.

// For each reported error line I pasted, produce:
// 1) a unified diff for the file changes
// 2) a short rationale sentence
// 3) ask for my approval to apply the change

When you need to run or install eslint (outside Lovable)

If ESLint or plugins need installation or you want to run eslint --fix across the repo, export to GitHub / pull locally and run these commands in a terminal. Marked OUTSIDE LOVABLE (terminal required).

• Terminal commands to run locally or in CI:

// OUTSIDE LOVABLE (terminal required)
// Install packages required by the created config
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-prettier prettier

// Run lint check
npm run lint

// Auto-fix where safe
npm run lint:fix

Follow these Lovable-first steps: create/update the config inside Lovable, use the targeted-fix prompt with your lint output so Lovable edits files safely, and only export to run installs or auto-fix commands outside Lovable when necessary.

The practical short answer: keep linting light and forgiving inside Lovable (to avoid noisy AI-generated edits blocking your flow), enforce stricter rules in CI/GitHub, and centralize rules + ignores so Lovable edits can be auto-fixed or excluded. Use Lovable chat edits to add config files, an ESLint ignore/overrides pattern for AI-generated code, package.json scripts, and a GitHub Actions lint job — then let CI enforce the stricter baseline outside Lovable.

What to change (paste each prompt into Lovable chat to make the change)

• Create a root ESLint config that allows relaxed linting for generated code and a strict baseline for the rest. Prompt Lovable to create .eslintrc.json in the project root with overrides for generated files.

// Please create file .eslintrc.json with the following content:
// update/replace root ESLint config. Relax rules for AI/generated folders and enforce stricter rules otherwise.
{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "rules": {
    // baseline rules for human-authored code
    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    "no-console": "off"
  },
  "overrides": [
    {
      "files": ["src/generated/**", "src/**/__ai__/**", "src/**/generated/**"],
      "rules": {
        // relax noisy rules for AI-generated code so Lovable edits don't spam warnings
        "no-unused-vars": "off",
        "react/prop-types": "off"
      }
    },
    {
      "files": ["**/*.test.*", "**/__tests__/**"],
      "env": { "jest": true }
    }
  ]
}

• Add an eslintignore so build artifacts and node\_modules are skipped by VSCode/CI. Prompt Lovable to create .eslintignore.

// Please create file .eslintignore with the following content:
node_modules
dist
.build
coverage
.vscode

• Add npm scripts so linting runs locally and in CI. Update package.json. Ask Lovable to update package.json to add scripts "lint" and "lint:fix". (Lovable will edit the file; installing deps happens in CI or locally outside Lovable.)

// Please update package.json at the root: add or merge the following "scripts" fields.
"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
  "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""
}

• Create a GitHub Actions workflow that runs ESLint on push/PR so CI enforces the strict baseline. Prompt Lovable to create .github/workflows/lint.yml. This runs on GitHub (no terminal inside Lovable needed).

// Please create file .github/workflows/lint.yml with this content:
// Lint runs on push and pull_request; it installs dependencies and runs npm run lint.
name: Lint

on:
  push:
  pull_request:

jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm ci
      - name: Run ESLint
        run: npm run lint

• If Lovable or AI inserts one-off problematic lines, use inline disables conservatively. Provide a short helper prompt to add examples inside components or generated files.

// When you need to silence a specific line, add this comment directly above it:
// /* eslint-disable-next-line no-unused-vars */
// // Lovable: when generating code with false positives, insert the single-line disable comment as shown.

Practical workflow & tips

• Keep Lovable editing friction low: Accept warnings inside Lovable but prevent noisy errors by whitelisting generated folders in .eslintrc.json. This keeps the chat-first flow smooth.
• Enforce on GitHub: The workflow above enforces linting during CI/pull requests. Treat CI as the gatekeeper — Lovable lets you iterate quickly, CI ensures quality before merging.
• Auto-fix in PRs: Use the lint:fix script in a branch or add a GitHub Action to auto-fix and push — this part requires GitHub tokens/permissions and may need additional setup outside Lovable.
• When dependencies are required: Adding ESLint/plug-ins to package.json is fine inside Lovable, but installing them locally requires running npm/yarn outside Lovable. For CI, GitHub Actions will install deps automatically when the repo is pushed.
• Prefer directory conventions for generated AI code: If possible, instruct Lovable to place generated helpers under src/generated or similar so rules/ignores are easy and explicit.

Follow these prompts in Lovable to add config files, scripts, and CI; use the CI workflow as the strict enforcer and keep Lovable-local edits forgiving to avoid blocking your chat-first development flow.