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
Decision gist · record as of 2026-01-12
eslint-prettier-config sets up ESLint and Prettier for TypeScript/React projects with integrated linting and formatting. 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.
Use it when
- eslint-prettier-config teaches you to define linting rules in your ESLint configuration—including TypeScript-specific rules.
- eslint-prettier-config shows how to use eslint-config-prettier to disable ESLint rules that conflict with Prettier's formatting.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
patricio0312rev/skills/eslint-prettier-config
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
foundation/eslint-prettier-config/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up ESLint and Prettier for TypeScript/React projects”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
ESLint helps you enforce code quality standards across JavaScript and TypeScript projects through configurable linting rules and automated fixes. Configure rules by severity, apply shared presets for React or Node.js, and use inline comments to manage exceptions.
Coding Standards Enforcer sets up automated style checks across your codebase using ESLint, Prettier, and git hooks. It enforces naming conventions and code quality rules while catching issues before commits, keeping teams aligned on formatting and standards.
Automate code style enforcement by installing and configuring formatters and linters tailored to your stack. The skill detects your language, selects appropriate tools, generates configuration files, and integrates git hooks and CI workflows to maintain consistency across your team.
This skill establishes a TypeScript development environment with strict compiler options, ESLint rules, and Jest test coverage. It provides project structure templates, tooling configuration, and GitHub Actions workflows to maintain code quality and type safety across your codebase.
Configure pre-commit, commit-msg, and pre-push hooks to standardize your team's development workflow. Supports both husky and native git hooks, with built-in linting, code formatting, commit message validation, and secret detection to catch issues before they reach your repository.
Biome combines linting and formatting into one Rust-powered tool designed for JavaScript and TypeScript projects. It eliminates the need for separate ESLint and Prettier setups while delivering dramatically faster performance and sensible defaults out of the box.
More skills Linter Formatter Init (unlicensed) · monorepo-setup (MIT) · migrate-oxfmt (MIT)