Customizing Code Style and Preferences in Lovable Projects

Why Lovable's generated code style may not match your preferences

Lovable's AI generates TypeScript and React code using its own internal defaults. While the code works, it may not follow your team's conventions. For example, it might use single quotes when you prefer double quotes, or skip semicolons when your style guide requires them. It might also use inline styles instead of Tailwind utility classes, or name components differently than your existing patterns. This inconsistency grows as your project gets larger. If half your files use one convention and half use another, the codebase becomes harder to maintain, especially if you export it to GitHub and continue development in VS Code or Cursor. Lovable reads an AGENTS.md file in your project root at the start of every session. This file acts as persistent instructions for the AI, telling it which coding conventions to follow. Combined with standard config files like .eslintrc and tsconfig.json, you can enforce a consistent style across all generated code.

• No AGENTS.md file exists to guide Lovable's code generation preferences
• ESLint configuration file is missing or uses default rules that do not match your style
• TypeScript is in loose mode, allowing implicit any types and other lenient patterns
• Lovable's AI defaults do not match the conventions in your existing codebase
• Multiple contributors (human and AI) generating code without shared formatting rules

Error messages you might see

Before you start

• A Lovable project you want to enforce coding conventions on
• A general idea of your preferred code style (quotes, semicolons, naming conventions)
• Dev Mode or GitHub access to create files in the project root

How to fix it

// No AGENTS.md file exists in the project

# AGENTS.md — Coding Conventions
## Code Style
- Use double quotes for strings
- Always include semicolons at the end of statements
- Use arrow functions for components: const MyComponent = () => { }
- Prefer named exports over default exports
- Use type instead of interface for TypeScript types
## Naming
- Components: PascalCase (UserProfile, DashboardHeader)
- Files: PascalCase matching the component name (UserProfile.tsx)
- Hooks: camelCase starting with 'use' (useAuth, useFetchData)
- Constants: UPPER_SNAKE_CASE (API_BASE_URL, MAX_RETRIES)
## Imports
- Group imports: React first, then third-party, then local
- Use @/ path alias for all local imports
- Never use relative paths like ../../
## Components
- Keep components under 150 lines; extract sub-components if larger
- Always use shadcn/ui components instead of raw HTML elements
- Use Tailwind utility classes; never write inline styles

// No ESLint configuration or using defaults

// .eslintrc.cjs
module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "react-hooks"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended"
  ],
  rules: {
    // Enforce double quotes
    "quotes": ["warn", "double"],
    // Require semicolons
    "semi": ["warn", "always"],
    // Warn on unused variables (prefix with _ to ignore)
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    // Warn on any type usage
    "@typescript-eslint/no-explicit-any": "warn"
  }
};

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": false
  }
}

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true
  }
}

// No Prettier configuration

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always"
}

Complete code example

1# Project Coding Conventions
2
3This file is read by Lovable's AI agent on every session. Follow these rules for all generated code.
4
5## TypeScript & React
6- Use TypeScript strict mode (all types must be explicit, no 'any')
7- Use arrow function components: const MyComponent = () => { }
8- Prefer named exports: export const MyComponent
9- Use type keyword for types, not interface
10- Always destructure props in the function signature
11
12## Formatting
13- Double quotes for strings
14- Semicolons at end of every statement
15- 2-space indentation
16- Max 100 characters per line
17- Trailing commas in objects and arrays
18
19## File Structure
20- Components in src/components/ (PascalCase filenames)
21- Pages in src/pages/ (PascalCase filenames)
22- Hooks in src/hooks/ (camelCase, prefixed with 'use')
23- Types in src/types/ (PascalCase filenames)
24- Use @/ path alias for all imports, never relative paths
25
26## Styling
27- Use Tailwind utility classes exclusively
28- Never use inline styles or CSS modules
29- Use shadcn/ui components for all UI elements
30- Follow the existing theme in Design view > Themes
31
32## State Management
33- useState for component-local state
34- React Context for auth and theme
35- Zustand for complex shared state
36- Never use prop drilling beyond 2 levels
37
38## IMPORTANT: Preservation Rules
39- Never delete existing components without explicit instruction
40- Never change the routing structure without explicit instruction
41- Never modify environment variables or secrets

Best practices to prevent this

• Keep AGENTS.md under 500 lines — Lovable reads the entire file, so long files waste context and credits
• Be specific with examples in AGENTS.md rather than vague instructions like 'write clean code'
• Include preservation rules in AGENTS.md to prevent the AI from accidentally removing components or changing structure
• Use ESLint rules that warn rather than error during development — this avoids blocking the build while you iterate
• Enable TypeScript strict mode early in the project before the codebase grows large and generates many new errors
• Sync your AGENTS.md conventions with your ESLint and Prettier configs so all tools enforce the same rules
• Review generated code in Dev Mode after each prompt to verify the AI followed your conventions
• If exporting to GitHub, add a .editorconfig file so external editors also follow your formatting preferences

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns