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已经成为主流选择，但仅仅使用TypeScript编译器进行类型检查是不够的。你还在为以下问题困扰吗？

• 代码风格不统一，团队协作困难
• 潜在bug难以发现，运行时错误频发
• 类型安全无法完全保证
• 代码质量参差不齐

typescript-eslint正是解决这些痛点的终极方案！ 本文将带你从零开始，全面掌握这个强大的代码检查工具。

学习收获清单

读完本文，你将获得：

• ✅ typescript-eslint核心概念和架构理解
• ✅ 完整的环境搭建和配置指南
• ✅ 常用规则详解和最佳实践
• ✅ 类型感知linting的高级用法
• ✅ 性能优化和疑难问题解决
• ✅ 实际项目集成方案

第一章：核心架构解析

1.1 项目组成结构

typescript-eslint是一个monorepo项目，包含多个核心包：

1.2 工作原理流程

第二章：环境搭建实战

2.1 基础安装

# 使用npm
npm install --save-dev eslint @eslint/js typescript typescript-eslint

# 使用yarn
yarn add --dev eslint @eslint/js typescript typescript-eslint

# 使用pnpm
pnpm add --save-dev eslint @eslint/js typescript typescript-eslint

2.2 配置文件详解

创建 eslint.config.mjs 配置文件：

// @ts-check

import eslint from '@eslint/js';
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';

export default defineConfig(
  // ESLint推荐配置
  eslint.configs.recommended,
  
  // typescript-eslint推荐配置
  tseslint.configs.recommended,
  
  // 严格模式配置（可选）
  tseslint.configs.strict,
  
  // 代码风格配置（可选）
  tseslint.configs.stylistic,
  
  // 自定义规则覆盖
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/explicit-function-return-type': 'warn',
    },
  }
);

2.3 运行lint检查

# 检查所有文件
npx eslint .

# 检查特定文件
npx eslint src/**/*.ts

# 自动修复问题
npx eslint . --fix

# 生成详细报告
npx eslint . --format=html > report.html

第三章：核心规则分类详解

3.1 类型安全规则

规则名称	作用	推荐级别
no-unsafe-call	禁止不安全的函数调用	🔴 Error
no-unsafe-member-access	禁止不安全的成员访问	🔴 Error
no-unsafe-return	禁止不安全的返回值	🔴 Error
no-unsafe-assignment	禁止不安全的赋值	🔴 Error

3.2 代码质量规则

// 不好的代码示例
function processData(data: any) {
  return data.map(x => x * 2); // any类型，不安全
}

// 好的代码示例
function processData(data: number[]) {
  return data.map(x => x * 2); // 明确类型，安全
}

3.3 最佳实践规则

表格：常用最佳实践规则配置

规则名称	描述	推荐值	适用场景
prefer-const	推荐使用const	error	所有场景
no-var	禁止使用var	error	所有场景
prefer-template	推荐模板字符串	warn	字符串拼接
arrow-parens	箭头函数参数括号	as-needed	代码简洁性

第四章：类型感知Linting高级用法

4.1 配置类型信息

启用类型感知需要配置 parserOptions.project：

export default defineConfig({
  languageOptions: {
    parserOptions: {
      project: './tsconfig.json',
      tsconfigRootDir: import.meta.dirname,
    },
  },
  rules: {
    '@typescript-eslint/no-floating-promises': 'error',
    '@typescript-eslint/await-thenable': 'error',
  },
});

4.2 性能优化配置

// 高性能配置示例
export default defineConfig({
  languageOptions: {
    parserOptions: {
      projectService: true, // 使用Project Service
      cacheLifetime: {
        glob: 300, // 缓存5分钟
      },
    },
  },
});

4.3 多项目配置

对于monorepo项目：

export default defineConfig({
  languageOptions: {
    parserOptions: {
      project: ['./packages/*/tsconfig.json', './apps/*/tsconfig.json'],
      projectFolderIgnoreList: ['**/node_modules/**', '**/dist/**'],
    },
  },
});

第五章：实战案例解析

5.1 React项目集成

// React专用配置
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';

export default defineConfig(
  tseslint.configs.recommended,
  react.configs.recommended,
  {
    plugins: {
      'react-hooks': reactHooks,
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
    },
  }
);

5.2 Node.js后端项目

// Node.js项目配置
export default defineConfig(
  tseslint.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    rules: {
      '@typescript-eslint/no-require-imports': 'error',
      '@typescript-eslint/no-var-requires': 'error',
    },
  }
);

第六章：性能优化和疑难解答

6.1 常见性能问题解决

flowchart TD
    A[Linting速度慢] --> B{检查配置}
    B --> C[使用projectService]
    B --> D[调整cacheLifetime]
    B --> E[排除node_modules]
    
    C --> F[速度提升20-30%]
    D --> G[合理设置缓存时间]
    E --> H[减少文件扫描范围]

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