How to Set Up ESLint and Prettier for Code Quality in chrome-extension-boilerplate-react-vite

The chrome-extension-boilerplate-react-vite repository ships with a pre-configured ESLint v9 flat config and Prettier setup integrated with Husky pre-commit hooks, requiring only pnpm lint to validate and pnpm lint:fix to auto-correct code across the monorepo.

The chrome-extension-boilerplate-react-vite project provides a production-ready development environment for Chrome extensions using React and Vite. Setting up ESLint and Prettier for code quality is already handled through a centralized flat configuration system that enforces TypeScript, React, and import order rules while maintaining consistent formatting across the entire codebase.

Understanding the Pre-Configured Code Quality Pipeline

The repository implements a comprehensive lint-and-format pipeline using ESLint v9's flat config format, eliminating the need for cascading .eslintrc files.

ESLint Configuration (eslint.config.ts)

The central configuration lives in eslint.config.ts at the repository root. This flat config aggregates multiple rule sets:

• TypeScript-ESLint recommended rules for type-aware linting
• React and JSX-A11Y rules for accessibility and hook validation
• Import-X plugin for enforcing import order and preventing circular dependencies
• Prettier integration via eslint-plugin-prettier/recommended to treat formatting violations as lint errors

The configuration also enforces custom rules such as preferring const over let, disallowing var, and requiring specific import patterns.

Prettier Configuration (.prettierrc)

Formatting rules are defined in .prettierrc at the project root. The configuration enforces:

• Single quotes for string literals
• Trailing commas for cleaner diffs
• Tailwind CSS class sorting via the Prettier Tailwind plugin
• Consistent bracket spacing and semicolon usage

The .prettierignore file excludes build artifacts, node_modules, and generated files from formatting operations.

Git Hooks with Husky and lint-staged

The repository uses Husky to enforce quality gates before commits. The .husky/pre-commit hook executes lint-staged, which runs:

1. prettier --write to format staged files
2. eslint --fix to auto-correct lint violations

This ensures that no commit introduces unformatted code or lint errors into the repository history.

Running ESLint and Prettier Commands

The package.json defines npm scripts that leverage Turbo for monorepo-wide execution.

To check the entire codebase for lint errors:

pnpm lint

This executes turbo lint --continue, which discovers the ESLint command in each workspace and runs the flat config against all TypeScript and React files.

To automatically fix lint and formatting issues:

pnpm lint:fix

This runs turbo lint:fix --continue, invoking eslint --fix across the monorepo. Because the ESLint config includes the Prettier plugin, this single command resolves both code quality and formatting violations.

For direct Prettier execution on non-JavaScript files (JSON, CSS, Markdown):

pnpm format

This runs prettier --write with caching enabled, targeting files defined in the Prettier configuration.

Customizing ESLint Rules

To modify lint rules, edit eslint.config.ts in the repository root. Locate the rules object within the default export.

For example, to enforce a maximum file length of 300 lines while skipping blank lines and comments:

// Inside eslint.config.ts rules object
'max-lines': ['error', { max: 300, skipBlankLines: true, skipComments: true }],

After modifying rules, run pnpm lint:fix to apply the new standards across the codebase and automatically correct any new violations.

VS Code Integration

For real-time feedback during development, configure VS Code to use the project's flat ESLint config and format on save.

Add these settings to your workspace .vscode/settings.json:

{
  "eslint.experimental.useFlatConfig": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

With these settings, every save operation triggers the same eslint --fix and Prettier formatting that runs during the pre-commit hook, ensuring consistency between your editor and the CI pipeline.

Summary

• The chrome-extension-boilerplate-react-vite repository includes a complete ESLint and Prettier setup using the modern flat config format (eslint.config.ts).
• Key files: eslint.config.ts for lint rules, .prettierrc for formatting, and .husky/pre-commit for git hooks.
• Commands: Use pnpm lint to check code, pnpm lint:fix to auto-correct issues, and pnpm format for direct Prettier execution.
• Integration: Husky and lint-staged automatically enforce quality standards before every commit, preventing unformatted code from entering the repository.
• Customization: Modify eslint.config.ts to add project-specific rules, then run pnpm lint:fix to apply changes across the monorepo.

Frequently Asked Questions

Is ESLint already configured in the chrome-extension-boilerplate-react-vite project?

Yes. The repository ships with a complete ESLint v9 flat configuration in eslint.config.ts that includes TypeScript, React, JSX-A11Y, import order, and Prettier integration. No additional setup is required beyond installing dependencies with pnpm install.

How do I disable a specific ESLint rule for a single file?

Add an ESLint disable comment at the top of the file or above the specific line. For example, to disable the no-console rule for one file, add /* eslint-disable no-console */ at the top. For a single line, use // eslint-disable-next-line [rule-name].

Can I use ESLint without Prettier in this project?

While technically possible by removing the eslint-plugin-prettier/recommended entry from eslint.config.ts, it is not recommended. The configuration treats formatting violations as lint errors to ensure consistency. Disabling Prettier integration would require you to run Prettier separately and maintain two different quality checks.

Why does the project use eslint.config.ts instead of .eslintrc.json?

The project uses the ESLint v9 flat config format (eslint.config.ts) because it provides a single, explicit configuration file with better performance and clearer dependency management compared to the legacy .eslintrc cascading system. This format is the modern standard for ESLint and integrates seamlessly with TypeScript-aware linting rules used throughout the monorepo.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}