园子博客后台升级至 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
命令可以正常执行了。
后续改进(2024年12月28日更新)
上面采用的是兼容旧版的配置,还是有些问题,后来改为了 flat config
安装 angular-eslint 相关 npm 包
npm i angular-eslint
npm i typescript-eslint
卸载不需要的 npm 包
npm uninstall @eslint/compat globals @eslint/eslintrc -D
npm uninstall @angular-eslint/builder @angular-eslint/eslint-plugin -D
angular.json 中修改 cli 部分的配置
{
"cli": {
"schematicCollections": [
"angular-eslint"
]
}
}
换成采用 flat config 的 eslint.config.mjs,参考自 thingsboard
import eslintJS from '@eslint/js';
import angular from 'angular-eslint';
import tsEslint from 'typescript-eslint';
export default tsEslint.config({
files: ['**/*.ts'],
ignores: ['**/.prettierrc.js', '**/apiMocks', '**/src/assets/'],
languageOptions: {
parserOptions: {
project: true,
tsconfigRootDir: import.meta.dirname,
},
},
extends: [
eslintJS.configs.recommended,
...tsEslint.configs.recommended,
...tsEslint.configs.stylistic,
...angular.configs.tsRecommended,
],
processor: angular.processInlineTemplates,
rules: {
'@typescript-eslint/explicit-member-accessibility': [
'off',
{
accessibility: 'explicit',
},
],
'arrow-parens': ['off', 'always'],
'@angular-eslint/component-selector': [
'error',
{
prefix: ['tb'],
},
],
'import/order': 'off',
'@typescript-eslint/member-ordering': 'off',
'no-underscore-dangle': 'off',
'@typescript-eslint/naming-convention': 'off',
'jsdoc/newline-after-description': 0,
'@typescript-eslint/consistent-indexed-object-style': 'off',
'@typescript-eslint/array-type': 'off',
'no-extra-boolean-cast': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-inferrable-types': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'no-case-declarations': 'off',
'no-prototype-builtins': 'off',
'@typescript-eslint/consistent-type-definitions': 'off',
'@angular-eslint/contextual-lifecycle': 'off',
'@typescript-eslint/adjacent-overload-signatures': 'off',
'@angular-eslint/prefer-standalone': 'off',
'@angular-eslint/no-empty-lifecycle-method': 'off',
},
});
参考资料:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
2007-12-22 [收藏]中国惠普前总裁孙振耀谈人生
2005-12-22 百度发布中国Blog权威数据, 博客园名列中国Blog服务商TOP10 [收藏]