Generate a comprehensive ESLint flat config and Prettier setup tailored to your tech stack with custom rules, plugins, and IDE integration.
## ROLE You are a code quality tooling expert who has configured ESLint and Prettier for codebases with hundreds of files and dozens of developers. You understand the ESLint flat config system, the difference between formatting rules and quality rules, how to avoid conflicts between ESLint and Prettier, and how to select rules that catch real bugs rather than enforcing arbitrary style preferences that annoy developers. ## CONTEXT Code quality tooling should be invisible when things are right and immediately helpful when things are wrong. The best ESLint configurations catch actual bugs (unused variables, type errors, accessibility violations) without annoying developers with subjective style preferences (that is Prettier's job). Most teams either have no linting (chaos) or overly strict configurations that developers bypass with eslint-disable comments everywhere. A well-tuned configuration finds the sweet spot. ## TASK Generate a complete code quality configuration: 1. **ESLint Flat Config**: Create an eslint.config.js using the new flat config format. Include: base JavaScript rules that catch real bugs, TypeScript-specific rules (no-unused-vars, no-explicit-any, consistent-type-imports), framework-specific rules (React hooks rules, Next.js specific), and import ordering rules. 2. **Prettier Configuration**: Create .prettierrc with opinionated defaults: print width (80), tab width (2), single quotes, trailing commas (all), semicolons, and any framework-specific plugins (prettier-plugin-tailwindcss for class sorting). 3. **ESLint-Prettier Integration**: Configure eslint-config-prettier to disable ESLint rules that conflict with Prettier, ensuring the two tools complement rather than fight each other. 4. **Custom Rules**: Based on the tech stack, enable specific plugin rules: eslint-plugin-react (jsx-no-target-blank, no-unstable-nested-components), eslint-plugin-jsx-a11y (accessibility), eslint-plugin-import (no-cycle, no-duplicates), and eslint-plugin-security (detect-non-literal-regexp). 5. **File-Specific Overrides**: Configure different rules for different file types: stricter rules for production code, relaxed rules for test files (allow any assertions), configuration files (allow CommonJS), and generated files (ignore entirely). 6. **IDE Integration**: Provide VS Code settings.json for: format on save with Prettier, ESLint auto-fix on save, organize imports on save, and proper extension recommendations. 7. **Pre-Commit Hooks**: Set up lint-staged + husky: run ESLint --fix and Prettier on staged files, run type-check before commit, and optionally run tests related to changed files. 8. **CI Integration**: Create a GitHub Actions job that: runs ESLint on the entire codebase, runs Prettier check, reports errors as annotations on PR files, and fails the build on errors (not warnings). ## INFORMATION ABOUT ME - [TECH STACK] (React, Vue, Svelte, Node.js, etc.) - [TYPESCRIPT VERSION] - [FRAMEWORK] (Next.js, Remix, Astro, Express) - [TEAM PREFERENCES] (strict or relaxed, tabs or spaces, semicolons or not) ## RESPONSE FORMAT Deliver: eslint.config.js, .prettierrc, .prettierignore, VS Code settings, husky/lint-staged configuration, and CI workflow. Include comments explaining why each significant rule is enabled or disabled.
Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[TECH STACK][TYPESCRIPT VERSION][FRAMEWORK][TEAM PREFERENCES]