eslint-plugin-perfectionist 项目新增 Angular Signal 支持的技术解析

eslint-plugin-perfectionist 是一款专注于代码风格一致性和完美排序的 ESLint 插件。近期该项目发布了 v4.0.0 版本，其中包含了对 Angular Signal 的重要支持更新。

背景与问题

在 Angular 17 中引入的 Signal 特性为响应式编程带来了新的范式。开发者在使用私有类字段（以#前缀标识）结合 Signal 时会遇到一个特定问题：当自定义排序规则应用于这些字段时，插件无法正确识别字段之间的依赖关系。

典型场景出现在当一个 Signal 依赖于另一个 Signal 的值时，如以下代码示例所示：

#languages = signal<AddLanguage[]>(
  this.#languagesStore.languages().map((language: Language) => ({
    ...language,
    isSelected: this.#selectedLanguageIds().includes(language.id),
    translatedLang: this.#translocoService.translate(`LANGUAGES.${language.lang}`),
  })),
);

#selectedLanguageIds = computed(() => {
  const transformedDocuments = this.#documentsListStore.transformedDocuments();
  const selectedDocument = transformedDocuments.find((document) => document.id === this.#dialogData.documentId);
  return selectedDocument?.languages.map((language) => language.id) ?? [];
});

在这个例子中，#languages Signal 依赖于 #selectedLanguageIds Signal 的值。虽然代码逻辑正确且排序合理，但由于插件无法识别私有字段间的依赖关系，会导致误报或排序问题。

解决方案

v4.0.0 版本的核心改进是增强了依赖检测机制，使其能够正确处理以下情况：

1. 识别以#开头的私有类字段
2. 分析 Signal 之间的依赖关系链
3. 确保排序时考虑初始化顺序约束

这项改进使得插件能够：

• 正确理解 Angular 组件中 Signal 的初始化顺序
• 避免对存在合理依赖关系的代码报错
• 保持代码风格一致性同时不破坏功能逻辑

技术意义

这一更新对于 Angular 开发者具有重要意义：

1. 现代化支持：跟上了 Angular 17+ 的最新特性，特别是 Signal 的广泛采用
2. 开发体验：减少了因工具链限制而产生的虚假错误，提升开发效率
3. 代码质量：在保证功能正确性的前提下，依然可以强制执行一致的代码风格

最佳实践

升级到 v4.0.0 后，开发者可以：

1. 安全地在 Angular 项目中使用私有字段和 Signal
2. 继续享受自动排序带来的代码一致性好处
3. 无需在代码中添加特殊注释来绕过依赖检查

这项改进体现了 eslint-plugin-perfectionist 项目对前端生态发展的快速响应能力，也展示了其对开发者实际需求的关注。对于重度依赖 Angular Signal 的项目，升级到最新版本将显著改善开发体验。