skills.rest
futuretea
futureteaCOMMUNITY
Explore all skills by this author →
GitHub

ESLint Setup

Configure ESLint for JavaScript and TypeScript projects with flat or legacy configs.

Updated Feb 25, 2026
Search Tags:#typescript#linting#react#eslint#prettier#ci#husky
One-click install
npx skills add https://github.com/futuretea/x-project --skill eslint-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ESLint Setup
Source: https://github.com/futuretea/x-project/tree/main/.claude/skills/eslint-setup
Command: npx skills add https://github.com/futuretea/x-project --skill eslint-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a repeatable, configurable ESLint setup to prevent style and correctness regressions, reduce code-review friction, and enforce consistent patterns across JavaScript and TypeScript React projects.

Core Features & Use Cases

  • Flat and legacy configs: Guidance for ESLint v9+ flat config and a compatible legacy .eslintrc.cjs fallback.
  • Type-aware rules: Integrates TypeScript parser and rules to enable type-checked linting.
  • React support: Includes React, react-hooks, and react-refresh rules and sensible defaults for JSX runtime.
  • Tooling & CI: npm scripts, Prettier integration, VS Code settings, pre-commit hooks, and GitHub Actions example for enforcing lint and type checks.
  • Use Case: Standardize linting in a Vite + React + TypeScript frontend so developers get consistent auto-fixes locally and zero-warnings enforcement in CI.

Quick Start

Run the ESLint Setup skill to produce a recommended configuration, install the necessary dev dependencies, and add lint and type-check scripts for your Vite React TypeScript project.

Frequently Asked Questions about ESLint Setup

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

FAQPage Schema
How do I configure ESLint for a Vite React TypeScript project?▼

Setting up ESLint for a Vite React TypeScript project involves choosing a flat or legacy config, installing TypeScript, React, and Prettier plugins, and adding npm scripts to enforce code quality and catch syntax issues across your frontend.

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

ESLint flat config is the modern v9+ format, whereas legacy .eslintrc.cjs provides a compatible fallback. Your choice determines how you define rules, parser options, and type-aware linting for JavaScript and TypeScript projects.

How do I add pre-commit hooks and CI linting to a TypeScript project?▼

Adding pre-commit hooks and CI linting to a TypeScript project involves integrating husky for local git hooks and configuring GitHub Actions steps to run lint and type checks, ensuring zero-warnings enforcement in CI workflows.

Does ESLint type-aware linting work with Prettier in React?▼

ESLint type-aware linting works with Prettier in React by integrating the TypeScript parser and rules alongside Prettier plugin configurations, enabling strict type-checked linting and automated code formatting for JSX.

Why do I need React-specific ESLint plugins for TypeScript?▼

React-specific ESLint plugins are needed for TypeScript to enable react-hooks and react-refresh rules with sensible JSX runtime defaults, preventing hooks errors and enforcing consistent component patterns across your React project.

Related Skills

Explore More Software Engineering Skills→
fredericvilcotfredericvilcot
13

init-frontend

Initialize a React frontend project with Vite, TypeScript, and Vitest.

Community
Intermediate
moogahmoogah
1

github-actions-local-checks

Run GitHub Actions pipeline checks locally before pushing code.

Community
Intermediate
Camilo8902Camilo8902

eslint-prettier-config

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

Community
Intermediate
pohlai88pohlai88

lint-types-debug

Diagnose ESLint and TypeScript errors in the AFENDA-NEXUS monorepo.

Community
Advanced