eslint-prettier-config

Configure ESLint and Prettier with TypeScript, React, and pre-commit hooks.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/Camilo8902/GabyCosmetics --skill eslint-prettier-config-camilo8902
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: eslint-prettier-config
Source: https://github.com/Camilo8902/GabyCosmetics/tree/main/.claude/skills/eslint-prettier-config
Command: npx skills add https://github.com/Camilo8902/GabyCosmetics --skill eslint-prettier-config-camilo8902

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @eslint/js, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-config-prettier, eslint-import-resolver-typescript, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-react-refresh, prettier, typescript, husky, lint-staged, @commitlint/config-conventional, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining consistent code quality and formatting across a project, reducing bugs and improving developer collaboration.

Core Features & Use Cases

  • Automated Linting: Enforces code style rules using ESLint.
  • Automated Formatting: Ensures consistent code appearance with Prettier.
  • TypeScript & React Support: Optimized configurations for modern web development stacks.
  • Pre-commit Hooks: Integrates with Husky and lint-staged to validate code before commits.
  • Use Case: When starting a new React project, use this Skill to set up a robust ESLint and Prettier configuration that automatically lints and formats your code on save and before commits.

Quick Start

Apply the eslint-prettier-config skill to set up ESLint and Prettier for your project.

Frequently Asked Questions about eslint-prettier-config

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure ESLint and Prettier for a React and TypeScript project?

To configure ESLint and Prettier for React and TypeScript, you need to set up parsers, plugins, and shared configs. This setup enforces code quality rules and ensures consistent formatting across your modern web stack.

How do I run ESLint formatting checks before a Git commit?

To run ESLint checks before a Git commit, integrate Husky and lint-staged in your project. This validates staged files automatically, ensuring code style rules are enforced before any changes are committed.

What is the best way to avoid conflicts between ESLint and Prettier rules?

The best way to avoid conflicts between ESLint and Prettier rules is using eslint-config-prettier. It disables ESLint formatting rules that interfere with Prettier, allowing both tools to work together seamlessly.

Does this ESLint and Prettier setup include accessibility and React hooks linting?

Yes, this ESLint and Prettier setup includes accessibility and React hooks linting. It utilizes eslint-plugin-jsx-a11y and eslint-plugin-react-hooks to enforce best practices and catch runtime errors.

Why should I use lint-staged with Husky for code formatting?

You should use lint-staged with Husky for code formatting to optimize pre-commit hooks. Lint-staged only runs linters on staged files, making the validation process faster and ensuring code quality before commits.

Can I enforce conventional commit messages alongside ESLint and Prettier?

Yes, you can enforce conventional commit messages alongside ESLint and Prettier. The setup integrates commitlint to validate commit formats, maintaining a consistent and standardized project history.