前端周刊1-EsLint和TypeScript的区别

什么是静态分析工具

• 定义：在不执行代码的情况下检查代码

• 与动态分析的区别：动态分析是在执行源代码的同时检查源代码，可能带来副作用，静态分析安全

ESLint

• 功能：

  • Lint规则

  • 可扩展性：通过插件添加新规则

  • 作用：捕获潜在缺陷，强制执行最佳实践

• 示例：

  • no-fallthrough规则：捕获switch语句中缺少break的错误。

  • jsx-a11y/alt-text规则：检查JSX中<img>标签是否缺少alt属性。

• 配置粒度

  • 可以针对单行、文件或项目级别配置

TypeScript

• 功能：

  • 确保值使用符合类型定义

• 示例：

  • logUppercase(9001)：调用错误，因为函数参数类型不匹配。

• 细粒度配置：

  • 全局配置，可以通过tsconfig.json

  • 不支持文件级别的差异化配置

ESLint和TypeScript对比

• 功能差异：

  • ESLint：强调执行应该做的事情

  • TypeScript：强制执行可以做的事情

• 重叠领域

  • 某些规则既涉及最佳实践，也涉及类型安全

  • 推荐在TypeScript项目中同时使用ESLint和TypeScript

ESLint和TypeScript同时使用

• TypeScript项目中的ESLint配置

  • 使用typescript-eslint插件。

  • 禁用与TypeScript重复的核心ESLint规则。

• 未使用变量的处理：

  • TypeScript的noUnusedLocals和noUnusedParameters。

  • ESLint的no-unused-vars更灵活。

• 类型化Linting：

  • 利用TypeScript的类型信息增强Lint规则。

  • 示例：@typescript-eslint/no-for-in-array。

结语

• ESLint和TypeScript捕获不同类型的代码缺陷。

• ESLint强制执行最佳实践，TypeScript强制执行类型安全。

• 推荐在TypeScript项目中同时使用ESLint和TypeScript。

• 上一篇
• 下一篇