eslint-config-pedro-the-cat

Shared ESLint + Prettier configuration for projects built with Vite + React + TypeScript.

📦 Installation

Install the package along with all required peer dependencies:

npm install --save-dev eslint-config-pedro-the-cat eslint prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-simple-import-sort eslint-plugin-i18next @trivago/prettier-plugin-sort-imports

Note: If you get dependency resolution errors, try using the --legacy-peer-deps flag:

npm install --save-dev eslint-config-pedro-the-cat eslint prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-simple-import-sort eslint-plugin-i18next @trivago/prettier-plugin-sort-imports --legacy-peer-deps

⚙️ Usage

1. ESLint configuration

Create a file .eslintrc.js in the root of your project:

module.exports = {
	extends: ["eslint-config-pedro-the-cat"],
}

2. Prettier configuration

You have two options for Prettier configuration:

Option A: Extend from this package (recommended) Create a file prettier.config.js:

module.exports = require("eslint-config-pedro-the-cat/prettier.config")

Option B: Use your own Prettier config Create a file prettier.config.cjs or .prettierrc with your preferred settings. The ESLint config will work with any Prettier configuration since it includes eslint-config-prettier to avoid conflicts.

3. Ignore files

.eslintignore

node_modules
dist

.prettierignore The package includes a shared .prettierignore file. You can either:

Option A: Copy the shared ignore file

cp node_modules/eslint-config-pedro-the-cat/.prettierignore .

Option B: Create your own .prettierignore

node_modules
dist

4. Add npm scripts

In your package.json:

{
	"scripts": {
		"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
		"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
		"format": "prettier --write .",
		"format:fix": "prettier --write .",
		"test": "echo \"Add your test command here\"",
		"prepare": "husky install && setup-pedro-husky"
	}
}

5. Set up Husky Git Hooks (Optional)

This package ships with a setup script that installs and wires Husky hooks as thin wrappers that delegate to the shared scripts inside eslint-config-pedro-the-cat. This keeps behavior centralized across projects and allows per-project customization if needed.

Install Husky:

npm install --save-dev husky

Initialize + wire hooks (recommended):

# Initialize Husky (v9)
npx husky

# Wire the shared hooks via the setup script
npx setup-pedro-husky

This will create .husky/commit-msg, .husky/pre-commit, and .husky/pre-push files that simply exec the shared scripts from this package.

Alternative (advanced): point Git to shared hooks directly

git config core.hooksPath node_modules/eslint-config-pedro-the-cat/husky

What the hooks do:

• commit-msg: Validates commit messages follow conventional commit format: type(project-task): message
  • Example: feat(PROJ-1234): add user authentication
  • Allowed types: feat, fix, docs, style, refactor, test, chore
• pre-commit: Automatically formats code before each commit
• pre-push: Runs linting, formatting, and tests before pushing

Note: Make sure your package.json includes the required scripts:

• format:fix (for pre-commit hook)
• lint, format, test (for pre-push hook)

Example consumer package.json scripts

{
	"scripts": {
		"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
		"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
		"format": "prettier --write .",
		"format:fix": "prettier --write .",
		"test": "echo \"Add your test command here\""
	}
}

6. Run linting & formatting

Run linting:

npm run lint

Run linting with autofix:

npm run lint:fix

Run Prettier formatting:

npm run format

🔧 What's Included

This configuration includes:

• ESLint rules for JavaScript, TypeScript, React, and JSX
• React Hooks linting with eslint-plugin-react-hooks
• Accessibility checks with eslint-plugin-jsx-a11y
• Import/export organization with eslint-plugin-import
• TypeScript support with @typescript-eslint
• Prettier integration for consistent code formatting
• Custom rules optimized for Vite + React projects

Key Rules:

• react/react-in-jsx-scope: OFF (unnecessary with Vite)
• no-console: WARN (warns about console statements in code)
• max-lines: 175, excluding empty lines
• @typescript-eslint/no-unused-vars: WARN (ignores variables starting with _)
• simple-import-sort/imports: WARN (automatic import sorting)
• simple-import-sort/exports: WARN (automatic export sorting)
• react-hooks/rules-of-hooks: ERROR (enforces React Hooks rules)
• react-hooks/exhaustive-deps: ERROR (enforces dependency arrays)
• @typescript-eslint/no-floating-promises: WARN (prevents unhandled promises)
• no-duplicate-imports: ERROR (prevents duplicate import statements)
• import/no-cycle: WARN (detects circular dependencies)

✅ Benefits

• One unified config for all Vite + React + TypeScript projects
• ESLint + Prettier integration without conflicts
• Consistent code style and best practices across the team
• Optimized for modern React development (no React import required)
• Accessibility-first approach with jsx-a11y rules
• Clean import organization and TypeScript best practices