ESLint、Prettier 与 TypeScript 配置

⚙️ 三个工具各司其职：ESLint 检查代码质量和错误，Prettier 统一格式，TypeScript 提供类型安全。三者协同工作才能发挥最大效果。

推荐工具链

// package.json 开发依赖
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm i -D prettier eslint-config-prettier
npm i -D lint-staged husky

---

ESLint 配置

// eslint.config.js（Flat Config）
import tseslint from 'typescript-eslint'
import prettierConfig from 'eslint-config-prettier'

export default [
  ...tseslint.configs.recommended,
  prettierConfig,   // 必须最后，关闭与 Prettier 冲突的规则
  {
    rules: {
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/consistent-type-imports': 'error',  // 统一类型导入方式
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    }
  }
]

常用规则说明

规则	作用
no-unused-vars	未使用变量报错
no-explicit-any	禁止 any 类型
consistent-type-imports	import type vs import 统一
prefer-const	应用 const 则用 const

---

Prettier 配置

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "always"
}

忽略文件

# .prettierignore
dist/
build/
*.min.js
*.map

---

TypeScript 核心配置

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,           // 开启所有严格模式
    "exactOptionalPropertyTypes": true,  // 可选属性必须显式
    "noUncheckedIndexedAccess": true,    // 数组索引返回 T | undefined
    "noImplicitOverride": true,          // override 必须显式声明
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

常用属性说明

属性	作用
strict: true	包含 noImplicitAny、strictNullChecks 等
isolatedModules	确保每个文件可独立编译
declaration	生成 .d.ts 类型声明文件
noEmit	只做类型检查不生成文件

---

Git Hooks 与 Pre-commit

# 配置 husky
npx husky init

# .husky/pre-commit
#!/bin/sh
npx lint-staged

// package.json
"lint-staged": {
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,md,css}": ["prettier --write"]
}

---

常见误区

• ESLint 和 Prettier 规则冲突（格式问题被两者同时报错）：必须安装 eslint-config-prettier
• tsconfig.json 路径别名配置了但构建工具没对应配置，导致运行时路径无法解析
• strict: true 已开但 as any 满天飞，和没开一样