eslint-prettier-config
Configure ESLint and Prettier together for unified code quality across TypeScript and React codebases. This skill covers dependency installation, rule configuration, tool integration, and Git hook setup to enforce standards automatically.
eslint-prettier-config sets up ESLint and Prettier for TypeScript/React projects with integrated linting and formatting.
AI-generated summary based on this skill's SKILL.md
Install
patricio0312rev/skills/eslint-prettier-config
git clone https://github.com/patricio0312rev/skills
cp -r skills/foundation/eslint-prettier-config ~/.claude/skills/eslint-prettier-confignpx skillfed install patricio0312rev/skills/eslint-prettier-configFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to setup ESLint and Prettier for TypeScript/React projects?
eslint-prettier-config guides you through installing ESLint and Prettier as dev dependencies, then configuring them for TypeScript and React codebases. Start by installing both tools, create an ESLint config file (flat config or .eslintrc), add TypeScript parser and React plugin, then layer Prettier on top using eslint-config-prettier to disable conflicting ESLint rules. The skill covers dependency selection, initial setup, and integration patterns to avoid formatting conflicts.
How do I configure linting rules and formatting standards?
eslint-prettier-config teaches you to define linting rules in your ESLint configuration—including TypeScript-specific rules, React hooks rules, and import ordering—then set Prettier formatting options like line length and quote style. You'll learn which rules to enable for your project's needs, how to extend shared configs, and how to use .prettierrc or prettier.config.js to centralize formatting preferences across your team.
What's the best way to integrate ESLint with Prettier to avoid conflicts?
eslint-prettier-config shows how to use eslint-config-prettier to disable ESLint rules that conflict with Prettier's formatting. Install eslint-config-prettier, add it as the last item in your ESLint extends array, and optionally add eslint-plugin-prettier to run Prettier as an ESLint rule. This prevents duplicate error reporting and ensures both tools work harmoniously without overriding each other's decisions.
How can I add pre-commit hooks and CI validation for code quality?
eslint-prettier-config covers setting up Git pre-commit hooks using husky and lint-staged to run ESLint and Prettier checks before commits. You'll configure lint-staged to target specific file patterns, integrate the hooks into your CI pipeline (GitHub Actions, GitLab CI, etc.), and ensure code quality gates block commits that fail linting or formatting checks, maintaining consistent standards across your team.
What does eslint-prettier-config cover for TypeScript configuration?
eslint-prettier-config includes TypeScript ESLint setup with @typescript-eslint/parser and @typescript-eslint/eslint-plugin, configuring rules specific to TypeScript syntax and best practices. You'll learn to handle tsconfig.json integration, strict type-checking rules, and React-specific TypeScript patterns, ensuring your linting catches type-related issues and maintains code quality across your TypeScript codebase.
Can eslint-prettier-config help with ESLint flat config migration?
eslint-prettier-config addresses ESLint v9's flat config format as an optional topic, showing how to migrate from legacy .eslintrc files to the new eslint.config.js structure. While the skill's primary focus is unified ESLint and Prettier setup, it acknowledges both configuration approaches so you can choose the format that fits your project's needs and ESLint version.
SKILL.md
rendered from the published skill — quoted content, verbatim
ESLint & Prettier Configuration
Setup consistent code quality and formatting with ESLint and Prettier.
Core Workflow
- Install dependencies: ESLint, Prettier, plugins
- Configure ESLint: Rules and extends
- Configure Prettier: Formatting options
- Integrate tools: ESLint + Prettier
- Setup scripts: Lint and format commands
- Add hooks: Pre-commit validation
ESLint Flat Config (v9+)
```typescript // eslint.config.mjs import js from '@eslint/js'; import typescript from '@typescript-eslint/eslint-plugin'; import tsParser from '@typescript-eslint/parser'; import react from 'eslint-plugin-react'; import reactHooks from 'eslint-plugin-react-hooks'; import reactRefresh from 'eslint-plugin-react-refresh'; import importPlugin from 'eslint-plugin-import'; import prettier from 'eslint-config-prettier';
export default [ // Ignore patterns { ignores: [
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
foundation/eslint-prettier-config/SKILL.md