Angular 15项目'$localize'未定义的ESLint错误修复求助

你遇到的问题是ESLint无法识别$localize全局变量——尽管@angular/localize/init已经在polyfills中导入并在运行时生效，但ESLint默认不知道这个全局注入的变量。以下是几种可行的修复方式：

方法一：在ESLint配置中声明全局变量 #

直接在.eslintrc.json的全局配置里添加$localize，让ESLint将其视为合法的全局变量：

修改你的配置文件，在env同级添加globals字段：

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "env": {
    "browser": true
  },
  "globals": {
    "$localize": "readonly"
  },
  // ... 其他配置内容不变
}

如果只想针对TypeScript文件生效，也可以在对应的overrides块中添加globals：
比如第一个针对*.ts的override里：

{
  "files": [
    "*.ts"
  ],
  "parserOptions": {
    "project": [
      "tsconfig.json"
    ],
    "createDefaultProgram": true
  },
  "globals": {
    "$localize": "readonly"
  },
  // ... 其他extends和rules不变
}

方法二：通过TypeScript类型声明辅助ESLint识别 #

确保你的tsconfig.json中包含@angular/localize的类型，这样TypeScript（以及依赖它的ESLint插件）能正确识别$localize：

在tsconfig.json的compilerOptions.types数组中添加@angular/localize：

{
  "compilerOptions": {
    // ... 其他配置
    "types": [
      "@angular/localize"
    ]
  }
}

结合方法一使用，能同时解决类型提示和ESLint检查的问题。

验证修复 #

修改配置后，重启ESLint服务（或重新运行lint命令），no-undef错误应该会消失。

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