园子博客后台升级至 angular 19 后 eslint 9 迁移记录
最近在将园子的博客后台从 angular 15 升级至 angular 19，升级基本完成后发现 eslint 不能正常工作。
vscode output panel 出现了 eslint 的警告与报错
(node:8724) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.
Error: Could not find config file.
网上搜了一下才知道，在升级 angular 19 的过程中更新 npm 包时将 eslint 从 8 升级到了 9，问题是 eslint 9 的 breaking changes 引起的。
eslint 9 采用了新的 flat config，与之前的配置文件不兼容，园子博客后台之前使用的是 .eslintrc.js，但 eslint 9 不认，所以报错 "Could not find config file"。
幸好 eslint 提供了迁移工具，运行下面的命令可以进行迁移
npx @eslint/migrate-config .eslintrc.js
迁移后生成了 eslint.config.mjs 新配置文件，.eslintignore 与 .eslintrc.js 中配置会被迁移过来。
但迁移工具对我们这里使用的 .eslintrc.js 支持不好，迁移命令出现了下面的警告
WARNING: This tool does not yet work great for .eslintrc.(js|cjs|mjs) files.
It will convert the evaluated output of our config file, not the source code.
Please review the output carefully to ensure it is correct.
另外，迁移命令提示需要安装下面的 npm 包
npm install @eslint/compat globals @eslint/js @eslint/eslintrc -D
这时，vscode 中的 eslint 已经可以正常工作了，problems panel 列出了 eslint 发现的错误。
但 ng lint 报错
(node:10060) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js"
先删除不需要的 .eslintignore 与 .eslintrc.js 文件
git rm .eslintignore .eslintrc.js
这时 ng lint 的报错变成
An unhandled exception occurred: All files matching the following patterns are ignored:
- 'src/**/*.ts'
Please check your '.eslintignore' file.
上面的问题是 angular.json 中的 lint 配置引起的
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts"
]
}
}
新建一个带 eslint 的 angular 19 项目比较一下
ng new angular-103-eslint --routing
cd angular-103-eslint
ng add @angular-eslint/schematics --skip-confirmation
对比发现迁移生成的 eslint.config.mjs 中少了下面的配置
files: ["**/*.ts"]
添加后 ng lint 命令可以正常执行了。
参考资料：
