Angular由一个bug说起之十八：伴随框架升级而升级ESLint遇到的问题与思考_来一份标准angular20的eslint.config.js配置-优快云博客

请添加图片描述

伴随框架升级而升级ESLint遇到的问题与思考

对于eslint这个前端事实上的代码检查工具标准，大家可能是再熟悉不过了。几乎是在编码的时时刻刻都在和它接触。在我们开发维护长达十年的项目中自然也是采用了ESLint，在从 AngularJS 一路到今天现代化的 Angular V20。为了保持项目的活力和能够利用现代化的框架特性，我们持续跟随 Angular 的版本更新。在这么长时间的版本变动中，ESLint作为项目必不可少的一部分自然也经历了许多变动。我们也遇到过一些问题自然也有一些心得，今天就在这里和大家分享一下。

Lint 工具的变迁

在 AngularJS 时代

在这个古早的版本时期，如今大名鼎鼎甚至开始过气的Webpack还只有个初级的版本。AngularJS本身还没有如今基于Webpack的这一套打包工具，我们的项目中依赖的是gulp，使用gulp-eslint插件来做linter。

Angular V4-V11

这一时期AngularJS被废弃，谷歌发布了现代化标准的Angular框架同时从JS转向了类型安全的Typescript，但是对于传统的面向Javascript的ESLint此时被替换为了TSLint并成为了Angular的默认linter。这一时期改变巨大并且是web技术高速发展的时期，所以Angular的发展有些混乱。它全面转向TS，框架完全重做还要有很大的精力来开发让开发者能顺利从AngularJS顺利升级到新的Angular的技术。我们从ESLint规则转向了TSLint的规则，由于TS的语言特性我们还加了一些TS专有的规则。

Angular v12-v18

在经过几年的发展以后TSlint 团队在2019年突然宣布废弃项目，究其原因主要是TSLint 无法复用 JavaScript 生态系统中围绕 ESLint 所做的任何工作。TSLint 不得不重新实现所有功能，从编辑器扩展到自动修复，再到规则。这个重大变化又导致Angular重新转向了angular-eslint，在而它依赖的是typescript-eslint.

在这里插入图片描述

Angular V18 - 现在

从Angular V18 开始angular-eslint开始使用 ESLint V9，从v9开始ESLint开始使用所谓扁平化设置。
从原来的JSON配置，变成默认使用 eslint.config.js

一个典型的eslint.config.js设置：

// @ts-check

// Allows us to bring in the recommended core rules from eslint itself
const eslint = require('@eslint/js');

// Allows us to use the typed utility for our config, and to bring in the recommended rules for TypeScript projects from typescript-eslint
const tseslint = require('typescript-eslint');

// Allows us to bring in the recommended rules for Angular projects from angular-eslint
const angular = require('angular-eslint');

// Export our config array, which is composed together thanks to the typed utility function from typescript-eslint
module.exports = tseslint.config(
  {
   
   
    // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
    files: ['**/*.ts'