Angular CLI webpack不显示未使用变量警告，能否自定义CLI实现create-react-app同款提示？

我来帮你搞定这个问题！Angular CLI其实完全可以实现像create-react-app那样的未使用变量警告，只需要调整代码检查工具的配置就行，具体步骤分两种主流情况来看：

针对使用ESLint的Angular 10+项目（当前主流） #

现在新版本的Angular CLI默认用ESLint做代码质量检查，配置起来很简单：

1. 确认ESLint配置文件存在
   项目根目录如果没有.eslintrc.json或.eslintrc.js，可以通过Angular CLI的命令生成（如果是从TSLint迁移过来也能用这个命令）：

   ng add @angular-eslint/schematics
   

2. 启用未使用变量警告规则
   打开你的ESLint配置文件，在rules节点下添加或修改这条规则：

   {
     "rules": {
       "@typescript-eslint/no-unused-vars": "warn"
     }
   }
   

   • 用"warn"会把未使用变量标记为警告，不会阻止项目构建；
   • 如果想更严格，改成"error"就能让未使用变量直接触发报错，阻止构建。

针对仍使用TSLint的旧版Angular项目（Angular 9及以前） #

如果你的项目还在使用TSLint，修改根目录的tslint.json文件即可：

{
  "rules": {
    "no-unused-variable": true
  }
}

这个规则会自动检测未使用的变量并给出警告提示。

验证配置生效 #

保存配置文件后，重启你的开发服务器：

ng serve

现在只要代码里出现未使用的变量，终端就会弹出对应的警告，和create-react-app的效果完全一致！

另外小提示：如果想在IDE（比如VS Code）里实时看到这个警告，记得安装对应的ESLint或TSLint插件，这样写代码的时候就能即时收到提示，效率更高。

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