eslint-prettier-config

Configures ESLint and Prettier for TypeScript and React code quality enforcement.

2|Updated Jun 5, 2026
One-click install
npx skills add https://github.com/sathishssj3/NexVR-Engine --skill eslint-prettier-config-sathishssj3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: eslint-prettier-config
Source: https://github.com/sathishssj3/NexVR-Engine/tree/main/.agents/skills/eslint-prettier-config
Command: npx skills add https://github.com/sathishssj3/NexVR-Engine --skill eslint-prettier-config-sathishssj3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up consistent linting and formatting across a JavaScript or TypeScript project requires juggling many config files, plugins, and editor integrations, and misconfigurations cause rule conflicts and inconsistent code style across teams. ## Core Features & Use Cases - ESLint Configuration: Provides both flat config (v9+) and legacy .eslintrc setups with TypeScript, React, React Hooks, and import ordering rules. - Prettier Integration: Supplies .prettierrc, .prettierignore, and eslint-config-prettier wiring so formatting never conflicts with lint rules. - Automation Hooks: Includes Husky pre-commit hooks, lint-staged, commitlint, VS Code settings, and npm scripts for lint/format/typecheck. - Use Case: When bootstrapping a new React + TypeScript app, apply this Skill to generate the full ESLint flat config, Prettier settings, and pre-commit validation in one pass. ## Quick Start Set up ESLint and Prettier with TypeScript and React support, including pre-commit hooks, for my 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 set up ESLint and Prettier together in a TypeScript project?▼

Install eslint, prettier, and eslint-config-prettier, then place the prettier config last in your ESLint extends array to disable conflicting formatting rules. Add .prettierrc for formatting options and npm scripts for lint and format commands.

What is the difference between ESLint flat config and .eslintrc?▼

Flat config (eslint.config.mjs) is the ESLint v9+ format using JavaScript modules with explicit plugin imports and file-scoped rule blocks. Legacy .eslintrc uses JSON with extends and plugins arrays, and is still supported for older setups.

Does this ESLint setup work with Next.js?▼

Yes, a Next.js specific configuration extends next/core-web-vitals alongside TypeScript-ESLint recommended rules and prettier. It keeps import ordering and consistent type imports enabled for Next.js project structure.

How do I run ESLint automatically before each commit?▼

Install husky and lint-staged, then add a pre-commit hook that runs npx lint-staged. Configure lint-staged in package.json to run eslint --fix and prettier --write on staged TypeScript files.

Why do ESLint and Prettier rules conflict?▼

Conflicts happen when ESLint formatting rules (like indentation or quotes) overlap with Prettier's output. Extending eslint-config-prettier last in your config disables all ESLint rules that would fight Prettier's formatting decisions.