适用于Angular项目的Typescript代码设计异味检测工具有哪些？

首先明确：不存在可以100%检出全部设计异味的工具，以下工具组合可以覆盖绝大多数常见的TypeScript通用设计问题、Angular框架专属设计问题，满足绝大多数项目的排查需求：

基础校验层 #

• 首先开启tsconfig.json中的strict: true严格模式，Angular 12+版本新建项目默认开启，老项目可以通过逐步开启strictNullChecks、noImplicitAny等子规则的方式渐进式接入，可以提前检出隐式类型错误、空值未处理、类型不匹配等基础设计缺陷。

代码规则校验工具 #

• 优先使用ESLint作为核心校验工具，搭配对应规则集即可覆盖大部分设计异味：
  • 安装@typescript-eslint相关插件，开启对应规则可以检出未使用变量、冗余类型声明、不合理类型断言、循环依赖、函数参数过多等通用TS设计坏味道
  • 安装@angular-eslint相关插件，开启Angular专属规则，可以检出组件生命周期滥用、输入输出命名不规范、依赖注入方式错误、NgModule声明冗余、模板语法错误等Angular框架专属的设计问题
  • 安装eslint-plugin-sonarjs插件，开启对应规则可以检出重复代码块、圈复杂度过高、过深嵌套逻辑、冗余条件判断、不合理循环结构等中高级设计异味

全量静态扫描工具 #

• 本地部署SonarQube做全项目静态扫描，除了上述基础问题之外，还能检测模块耦合度过高、代码重复率超标、未处理异常、不安全类型操作等问题，还支持自定义规则适配团队专属编码规范。

实时编码提示 #

• VS Code等主流IDE可以直接安装ESLint对应扩展，在编码阶段实时提示设计异味，不需要全量扫描即可提前修复问题。

补充说明：自动化工具仅能覆盖通用规则类的设计问题，和业务逻辑相关的自定义设计缺陷需要结合人工Code Review补充排查，二者结合才能最大程度减少项目中的设计异味。

内容的提问来源于stack exchange，提问作者Ashok