typescript-eslint配置模板：行业最佳实践集合

郦祺嫒Amiable

817人浏览 · 2025-09-04 07:13:07

郦祺嫒Amiable · 2025-09-04 07:13:07 发布

typescript-eslint配置模板：行业最佳实践集合

【免费下载链接】typescript-eslint :sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript 项目地址: https://gitcode.com/GitHub_Trending/ty/typescript-eslint

还在为TypeScript项目的ESLint配置而头疼吗？面对数百条规则和复杂的配置选项，如何选择最适合项目的规则集？本文将为你提供一套完整的typescript-eslint配置模板，汇集行业最佳实践，让你的TypeScript代码质量提升到新高度。

🎯 读完本文你将获得

4种不同严格级别的配置模板
类型检查与非类型检查配置的区别
常见项目场景的最佳配置方案
性能优化和定制化配置技巧
完整的配置示例代码

📊 typescript-eslint配置体系概览

typescript-eslint提供了多层次的配置体系，从基础配置到严格类型检查配置，满足不同项目的需求：

mermaid

🏗️ 基础配置模板

1. 基础配置 (Base)

最基本的配置，只包含解析器和插件设置：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
  },
  plugins: ['@typescript-eslint'],
  extends: [],
};

2. 推荐配置 (Recommended)

适合大多数项目的平衡配置：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
  ],
};

🔍 类型检查配置模板

3. 推荐类型检查配置 (Recommended Type-Checked)

启用TypeScript类型检查的推荐配置：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
    project: './tsconfig.json', // 启用类型检查
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended-type-checked',
  ],
};

4. 严格类型检查配置 (Strict Type-Checked)

最高级别的代码质量要求：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/strict-type-checked',
    '@typescript-eslint/stylistic-type-checked',
  ],
};

📋 配置规则对比表

配置类型	规则数量	类型检查	严格程度	适用场景
Base	0	❌	⭐	基础设置
Recommended	~25	❌	⭐⭐	一般项目
Recommended Type-Checked	~40	✅	⭐⭐⭐	生产项目
Strict Type-Checked	~60+	✅	⭐⭐⭐⭐⭐	高质量要求项目

🎨 样式相关配置

5. 样式配置 (Stylistic)

专注于代码风格的配置：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    '@typescript-eslint/stylistic',
  ],
};

6. 样式类型检查配置 (Stylistic Type-Checked)

结合类型检查的样式配置：

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    '@typescript-eslint/stylistic-type-checked',
  ],
};

🚀 项目场景最佳实践

7. React + TypeScript项目配置

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  plugins: [
    '@typescript-eslint',
    'react',
    'react-hooks',
  ],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended-type-checked',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
};

8. Node.js后端项目配置

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
    project: './tsconfig.json',
  },
  env: {
    node: true,
    es2022: true,
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/strict-type-checked',
  ],
  rules: {
    '@typescript-eslint/no-unsafe-argument': 'warn',
    '@typescript-eslint/no-unsafe-assignment': 'warn',
  },
};

⚡ 性能优化配置

9. 高性能配置模板

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    // 选择性启用类型检查
    project: process.env.ESLINT_TYPE_CHECK 
      ? './tsconfig.json' 
      : false,
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    // 条件性扩展类型检查配置
    ...(process.env.ESLINT_TYPE_CHECK
      ? ['@typescript-eslint/recommended-type-checked']
      : ['@typescript-eslint/recommended']),
  ],
};

🔧 自定义规则配置

10. 企业级定制配置

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended-type-checked',
  ],
  rules: {
    // 自定义规则配置
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/explicit-function-return-type': [
      'warn',
      { allowExpressions: true },
    ],
    '@typescript-eslint/consistent-type-imports': [
      'error',
      { prefer: 'type-imports' },
    ],
    // 禁用某些过于严格的规则
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/no-unsafe-call': 'off',
  },
};

📝 配置选择指南

mermaid

🎯 最佳实践总结

渐进式采用：从Recommended开始，逐步过渡到Type-Checked配置
性能考量：在CI/CD中启用完整类型检查，开发时酌情禁用
团队协作：选择适合团队水平的严格程度
定期审查：每季度回顾规则配置，根据项目进展调整
文档化：为自定义规则添加注释说明

📦 完整配置示例

// 企业级TypeScript项目完整配置
module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended-type-checked',
    '@typescript-eslint/stylistic-type-checked',
  ],
  rules: {
    // 代码质量规则
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/no-unused-vars': [
      'error',
      { argsIgnorePattern: '^_' },
    ],
    
    // 类型安全规则
    '@typescript-eslint/no-unsafe-argument': 'warn',
    '@typescript-eslint/no-unsafe-assignment': 'warn',
    
    // 代码风格规则
    '@typescript-eslint/consistent-type-imports': 'error',
    '@typescript-eslint/consistent-type-definitions': [
      'error',
      'interface',
    ],
  },
  overrides: [
    {
      files: ['*.test.ts', '*.spec.ts'],
      rules: {
        '@typescript-eslint/no-unsafe-assignment': 'off',
        '@typescript-eslint/no-unsafe-call': 'off',
      },
    },
  ],
};

通过这套配置模板，你可以快速为任何TypeScript项目建立专业的代码质量保障体系。记住，最好的配置是适合你团队和项目需求的配置！

三连提醒：如果本文对你有帮助，请点赞、收藏、关注，我们将持续分享更多TypeScript和工程化最佳实践！

【免费下载链接】typescript-eslint :sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript 项目地址: https://gitcode.com/GitHub_Trending/ty/typescript-eslint