园子博客后台升级至 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',
  },
});

参考资料:

posted @   dudu  阅读(119)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
历史上的今天:
2007-12-22 [收藏]中国惠普前总裁孙振耀谈人生
2005-12-22 百度发布中国Blog权威数据, 博客园名列中国Blog服务商TOP10 [收藏]
点击右上角即可分享
微信分享提示