skills.rest
zhangyu1818
zhangyu1818COMMUNITY
Explore all skills by this author →
WebsiteGitHub

setup-eslint

Configure ESLint for JavaScript/TypeScript projects with detected presets.

1|Updated Jun 10, 2024
Search Tags:#typescript#linting#react#eslint#config#setup#package-manager
One-click install
npx skills add https://github.com/zhangyu1818/eslint-config --skill setup-eslint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-eslint
Source: https://github.com/zhangyu1818/eslint-config/tree/main/setup-eslint
Command: npx skills add https://github.com/zhangyu1818/eslint-config --skill setup-eslint

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the setup and configuration of ESLint for JavaScript/TypeScript projects, ensuring a consistent linting baseline and ready-to-use config.

Core Features & Use Cases

  • Auto-detect project stack (React, Next.js, TypeScript, TailwindCSS, Prettier, test frameworks) and enable corresponding ESLint presets.
  • Install missing dependencies (eslint and @zhangyu1818/eslint-config) via the detected package manager and generate or update eslint.config.* accordingly.
  • Add or update lint scripts in package.json when missing, and provide guidance for running lint locally or in CI.
  • Support migration scenarios from legacy .eslintrc files to the flat config format and ensure compatibility with existing codebases.

Quick Start

Use the skill on a project root to configure ESLint automatically, deriving presets from detected dependencies and creating or updating eslint.config.* files. If dependencies are missing, the skill installs eslint and @zhangyu1818/eslint-config as devDependencies using the detected package manager and updates lint scripts if needed.

Frequently Asked Questions about setup-eslint

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

FAQPage Schema
How do I set up ESLint flat config for a React and TypeScript project?▼

This skill automates ESLint flat config setup by auto-detecting your React and TypeScript stack, installing missing dependencies via your package manager, and generating an eslint.config.* file with the appropriate presets.

Can I migrate my legacy .eslintrc configuration to the new flat config format?▼

You can migrate legacy .eslintrc files to the flat config format using this skill, which handles the conversion process and ensures compatibility with your existing JavaScript or TypeScript codebase.

Does this ESLint setup tool work with Next.js, TailwindCSS, and Prettier?▼

Yes, the ESLint setup process detects Next.js, TailwindCSS, Prettier, and test frameworks in your project, automatically enabling the corresponding ESLint presets to ensure a consistent linting baseline.

How do I add lint scripts to package.json during ESLint initialization?▼

During ESLint initialization, the skill automatically adds or updates missing lint scripts in your package.json, providing ready-to-use commands for running lint checks locally or within your CI pipeline.

What package managers are supported for installing ESLint dependencies?▼

The ESLint setup supports npm, yarn, and pnpm package managers, detecting the correct one by analyzing your project lockfiles before installing eslint and related config packages as devDependencies.

Related Skills

Explore More Software Engineering Skills→
AratKruglikAratKruglik
9

npm-patterns

Detect package managers from lockfiles and enforce semver ranges and script conventions.

Community
Intermediate
mcclowesmcclowes
4

eslint-config

Configure ESLint flat config with TypeScript parser and custom rules.

Community
Intermediate
VSF-QC-TTSVSF-QC-TTS

typescript-tooling

Automate ESLint, Prettier, Jest, and Vitest setup for TypeScript projects.

Official
Advanced
el-feoel-feo
12

eslint

Configure ESLint for JavaScript and TypeScript projects with flat config and rules.

Community
Intermediate