Angular-ESLint 配置文件的模块化语法演进

在 Angular 18 项目中配置 ESLint 时，开发者们遇到了一个关于配置文件语法选择的常见问题。本文将深入探讨 Angular-ESLint 对 CommonJS 和 ES Module 两种语法格式的支持情况，以及最佳实践建议。

背景与现状

ESLint 9 引入了全新的扁平化配置系统，要求使用 eslint.config.js 文件。Angular-ESLint 最初默认生成 CommonJS 格式的配置文件，这主要基于以下技术考量：

1. Angular 项目默认不包含 "type": "module" 声明
2. Node.js 环境下默认使用 CommonJS 模块系统
3. 确保与现有 Angular 工具链的无缝集成

然而，随着前端生态向 ES Modules 的全面迁移，许多 ESLint 插件和官方文档都优先展示 ES Module 语法示例，这导致了开发者社区的困惑。

技术实现细节

文件扩展名支持

从 Angular-ESLint 18.4.0 版本开始，已经全面支持三种配置文件格式：

1. eslint.config.js - 默认格式，根据项目配置决定模块类型
2. eslint.config.cjs - 显式声明为 CommonJS 模块
3. eslint.config.mjs - 显式声明为 ES Module

语法选择指南

对于需要保持与现有 Angular 项目兼容性的场景：

• 使用 .js 或 .cjs 扩展名
• 采用 CommonJS 语法（require/module.exports）

对于现代前端项目或需要与其他工具链集成的场景：

• 使用 .mjs 扩展名
• 采用 ES Module 语法（import/export）

实际应用建议

新项目初始化

创建新 Angular 项目时，可以考虑以下策略：

1. 如果项目需要与大量现代前端工具集成，优先选择 .mjs 格式
2. 如果是纯 Angular 项目且不需要特殊模块需求，.js 格式即可满足需求

现有项目迁移

对于已有项目迁移到 ESLint 9：

1. 评估项目中其他工具的模块系统要求
2. 如果已有大量 ES Module 代码，建议采用 .mjs 格式
3. 保持配置文件的模块类型与项目整体一致

常见问题解决方案

问题一：ESLint 迁移工具生成了 .mjs 文件但 Angular 构建器不识别

解决方案：升级到 Angular-ESLint 18.4.0 或更高版本，确保构建器支持所有三种扩展名。

问题二：在混合模块类型的 monorepo 中保持一致性

解决方案：在 Angular 项目中显式使用 .mjs 扩展名，并在 package.json 中为相关子项目添加 "type": "module" 声明。

未来展望

随着前端生态的演进，ES Modules 正逐渐成为标准。Angular 工具链也在逐步增强对现代 JavaScript 特性的支持。开发者可以期待：

1. 更智能的配置检测机制
2. 更完善的类型提示支持
3. 更简单的迁移路径工具

通过理解这些技术细节，开发者可以更自信地在 Angular 项目中配置 ESLint，无论是选择传统的 CommonJS 还是现代的 ES Module 语法。