# 使用 npm
npm install -D eslint
 
# 使用 pnpm
pnpm add -D eslint
 
# 使用 yarn
yarn add -D eslint
 
# 初始化配置（交互式向导）
npx eslint --init
# 或
npm init @eslint/config

// eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import reactPlugin from 'eslint-plugin-react'
 
export default [
  // 全局忽略
  {
    ignores: ['dist/**', 'node_modules/**', 'coverage/**']
  },
 
  // 推荐规则
  js.configs.recommended,
 
  // TypeScript 支持
  ...tseslint.configs.recommended,
 
  // React 支持
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      react: reactPlugin
    },
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: { jsx: true }
      }
    },
    rules: {
      'react/jsx-uses-react': 'error',
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'eqeqeq': ['error', 'always']
    }
  }
]

// eslint.config.js — 最小可运行配置
import js from '@eslint/js'
 
export default [
  js.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'warn',
      'no-undef': 'error'
    }
  }
]

# 运行 ESLint
npx eslint src/
 
# 自动修复
npx eslint src/ --fix
 
# 输出 JSON 格式
npx eslint src/ --format json

// 示例：有问题的代码 (example.js)
var unused = 1       // no-unused-vars → warning
undeclaredVar = 2    // no-undef → error

// 扁平配置核心结构
export default [
  { ignores: ['dist/**'] },          // 全局忽略
  { files: ['**/*.js'], rules: {} }, // 针对 JS 文件
  { files: ['**/*.ts'], rules: {} }, // 针对 TS 文件
]

// 多语言配置示例
import js from '@eslint/js'
import css from '@eslint/css'
import json from '@eslint/json'
import markdown from '@eslint/markdown'
 
export default [
  js.configs.recommended,
  {
    files: ['**/*.css'],
    language: 'css/css',
    plugins: { css },
    rules: { 'css/no-empty-blocks': 'error' }
  },
  {
    files: ['**/*.json'],
    language: 'json/json',
    plugins: { json },
    rules: { 'json/no-duplicate-keys': 'error' }
  }
]

{
  plugins: {
    'my-plugin': {
      rules: {
        'my-rule': {
          create(context) {
            return {
              Identifier(node) {
                if (node.name === 'badName') {
                  context.report({
                    node,
                    message: '禁止使用 badName'
                  })
                }
              }
            }
          }
        }
      }
    }
  }
}

import { defineConfig } from 'eslint/config'
 
export default defineConfig([
  { extends: ['eslint:recommended'] },
  { files: ['**/*.ts'], rules: { 'no-unused-vars': 'warn' } }
])

# 启动 ESLint MCP Server
npx @eslint/mcp

# 抑制所有当前违规，后续新增代码必须遵守规则
npx eslint src/ --suppress-all

import tseslint from 'typescript-eslint'
 
export default [
  ...tseslint.configs.strictTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname
      }
    }
  }
]

import js from '@eslint/js'
import css from '@eslint/css'
import json from '@eslint/json'
 
export default [
  js.configs.recommended,
  { files: ['**/*.css'], language: 'css/css', plugins: { css } },
  { files: ['**/*.json'], language: 'json/json', plugins: { json } }
]

// React + TypeScript + Next.js 配置
import reactPlugin from 'eslint-plugin-react'
import hooksPlugin from 'eslint-plugin-react-hooks'
 
export default [
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: { react: reactPlugin, 'react-hooks': hooksPlugin },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'react/no-unescaped-entities': 'error'
    }
  }
]

// packages/app-a/eslint.config.js
import baseConfig from '../../eslint.config.base.js'
 
export default [
  ...baseConfig,
  {
    rules: {
      // app-a 特有规则覆盖
    }
  }
]

# GitHub Actions
- name: Lint
  run: npx eslint src/ --max-warnings 0 --format github

npx eslint src/ --suppress-all
# 之后只有新引入的违规会报错

# 在 Claude Code、Cursor 等 AI 工具中配置 ESLint MCP
npx @eslint/mcp

// eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import reactPlugin from 'eslint-plugin-react'
import hooksPlugin from 'eslint-plugin-react-hooks'
import importPlugin from 'eslint-plugin-import'
import css from '@eslint/css'
import json from '@eslint/json'
import { defineConfig } from 'eslint/config'
 
export default defineConfig([
  // 全局忽略
  { ignores: ['dist/**', 'node_modules/**', 'coverage/**', '*.config.*'] },
 
  // 基础推荐规则
  js.configs.recommended,
 
  // TypeScript 严格检查
  ...tseslint.configs.strictTypeChecked.map(config => ({
    ...config,
    files: ['**/*.{ts,tsx}']
  })),
 
  // React 规则
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      react: reactPlugin,
      'react-hooks': hooksPlugin,
      import: importPlugin
    },
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: { jsx: true },
        projectService: true,
        tsconfigRootDir: import.meta.dirname
      }
    },
    settings: {
      react: { version: 'detect' }
    },
    rules: {
      // 代码质量
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/consistent-type-imports': 'error',
 
      // React
      'react/jsx-uses-react': 'off', // React 17+ JSX Transform
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
 
      // 导入
      'import/order': ['error', { 'newlines-between': 'always' }],
    }
  },
 
  // CSS 检查
  {
    files: ['**/*.css'],
    language: 'css/css',
    plugins: { css },
    rules: {
      'css/no-empty-blocks': 'error',
      'css/no-invalid-double-slash-comments': 'error'
    }
  },
 
  // JSON 检查
  {
    files: ['**/*.json'],
    language: 'json/json',
    plugins: { json },
    rules: {
      'json/no-duplicate-keys': 'error'
    }
  },
 
  // 测试文件宽松规则
  {
    files: ['**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
      'no-console': 'off'
    }
  }
])

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "lint:ci": "eslint src/ --max-warnings 0 --format github",
    "typecheck": "tsc --noEmit",
    "quality": "pnpm typecheck && pnpm lint:ci"
  }
}

# .github/workflows/lint.yml
name: Lint
on: [push, pull_request]
 
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - run: npm ci
      - run: npx eslint src/ --max-warnings 0 --format github

// lint-staged.config.js
export default {
  '*.{js,jsx,ts,tsx}': ['eslint --fix'],
  '*.css': ['eslint --fix'],
  '*.json': ['eslint --fix']
}

// turbo.json
{
  "tasks": {
    "lint": {
      "inputs": ["src/**/*.ts", "src/**/*.tsx", "eslint.config.js"]
    }
  }
}

# 1. 启用缓存（仅检查变更文件）
npx eslint src/ --cache --cache-location .eslintcache
 
# 2. 使用 --cache-strategy content（基于内容而非时间戳）
npx eslint src/ --cache --cache-strategy content
 
# 3. 利用多线程（v10 新增能力）
# ESLint 2025 年引入多线程 lint 能力，多核 CPU 可获显著加速
 
# 4. 缩小检查范围
# 在配置中精确指定 files 和 ignores
 
# 5. 搭配 Oxlint 做快速扫描
# 日常开发用 Oxlint 快速反馈，CI 用 ESLint 做完整检查

import js from '@eslint/js'
 
export default [
  js.configs.recommended,
  // 逐步添加更多规则
]

import eslintConfigPrettier from 'eslint-config-prettier'
 
export default [
  // ...其他配置
  eslintConfigPrettier // 放在最后，关闭冲突规则
]

import tseslint from 'typescript-eslint'
 
export default [
  ...tseslint.configs.strictTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname
      }
    }
  }
]

# 1. 启用新规则
# 2. 抑制现有违规
npx eslint src/ --suppress-all
# 3. 后续新代码必须遵守规则

import { defineConfig } from 'eslint/config'
 
export default defineConfig([
  { extends: ['eslint:recommended'] },
  {
    files: ['**/*.ts'],
    extends: ['plugin:@typescript-eslint/recommended']
  }
])

// ❌ 错误：在 flat config 中使用旧语法
// module.exports = { rules: {} }
 
// ✅ 正确：使用 ESM 导出
export default [{ rules: {} }]
 
// ❌ 错误：忘记在 parserOptions 中启用 jsx
// parserOptions: {}
 
// ✅ 正确
// languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } }
 
// ❌ 错误：忽略 files 字段导致规则应用于所有文件
// { rules: { 'react/jsx-uses-react': 'error' } }
 
// ✅ 正确：指定文件匹配范围
// { files: ['**/*.{js,jsx,ts,tsx}'], rules: { ... } }