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

> Learn to set up ESLint and Prettier for code quality in chrome-extension-boilerplate-react-vite. Use pnpm lint and pnpm lint:fix for validation and auto-correction with Husky hooks.

- Repository: [JongHak Seo/chrome-extension-boilerplate-react-vite](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite)
- Tags: how-to-guide
- Published: 2026-03-05

---

**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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/package.json) defines npm scripts that leverage Turbo for monorepo-wide execution.

To check the entire codebase for lint errors:

```bash
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:

```bash
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):

```bash
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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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:

```ts
// 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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/.vscode/settings.json):

```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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/eslint.config.ts)).
- **Key files**: [`eslint.config.ts`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/eslint.config.ts) instead of [`.eslintrc.json`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/.eslintrc.json)?

The project uses the ESLint v9 flat config format ([`eslint.config.ts`](https://github.com/jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/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.