eslint-prettier-config

Name: eslint-prettier-config
Availability: InStock
Author: mohamed-g-shoaib

Configure ESLint and Prettier for TypeScript and React projects.

1|Updated Dec 12, 2025

Search Tags:#typescript #react #eslint #config #prettier #code-quality #lint

Ready to run

npx skills add https://github.com/mohamed-g-shoaib/forge --skill eslint-prettier-config-mohamed-g-shoaib

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: eslint-prettier-config
Source: https://github.com/mohamed-g-shoaib/forge/tree/main/.agents/skills/eslint-prettier-config
Command: npx skills add https://github.com/mohamed-g-shoaib/forge --skill eslint-prettier-config-mohamed-g-shoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ESLint and Prettier are essential for maintaining consistent code quality across TypeScript and React projects. This skill sets up and configures these tools to enforce standardized linting and formatting across a codebase, reducing review time and errors.

Core Features & Use Cases

Flat ESLint configuration that supports TypeScript, React, and modern tooling.
Integrated Prettier formatting with rules aligned to project standards.
TypeScript-aware linting, import ordering, and React-specific rules to prevent common issues.
Hooks, formatting, and pre-commit checks via Husky and lint-staged.
CI-ready validation ensuring lint, typecheck, and format checks in pipelines.

Quick Start

Install the ESLint-Prettier config package and run the lint/format scripts to establish coding standards.

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 TypeScript React project?▼

To configure ESLint and Prettier for a TypeScript React project, install the required dependencies, generate flat ESLint configurations with integrated Prettier formatting, and add npm scripts to enforce standardized linting and formatting rules.

Can I use Husky pre-commit hooks to run lint and format checks?▼

Yes, you can use Husky and lint-staged to automate pre-commit checks. This setup runs lint, formatting, and typecheck validations before code is committed, ensuring consistent code quality across your codebase.

Does this ESLint Prettier configuration work with Next.js and Vite?▼

Yes, this ESLint Prettier configuration is widely applicable to frontend apps using TypeScript with React frameworks, including Next.js, Vite, and standard React setups, providing TypeScript-aware linting and React-specific rules.

What's the best way to enforce code quality in a TypeScript React codebase?▼

The best way to enforce code quality is by integrating flat ESLint configurations with Prettier formatting, TypeScript-aware linting, import ordering rules, and CI-ready validation pipelines for lint, typecheck, and format checks.

How do I integrate ESLint formatting with VS Code for React development?▼

Integrating ESLint with VS Code for React development involves configuring extension settings to apply flat ESLint configurations and integrated Prettier formatting, enabling automatic code formatting and linting feedback during development.

Why do I need TypeScript-aware linting in my React ESLint setup?▼

TypeScript-aware linting in your React ESLint setup prevents common issues by applying React-specific rules, enforcing import ordering, and validating types, which reduces code review time and catches errors early.