ESLint Plugin Perfectionist 中的 import 排序注释问题解析

在 JavaScript/TypeScript 开发中，保持代码整洁和一致性是非常重要的。ESLint Plugin Perfectionist 作为一个专注于代码风格优化的插件，提供了强大的 import 语句排序功能。然而，近期发现了一个关于注释影响 import 排序的有趣问题。

问题现象

当开发者使用多行注释块时，相邻的 import 语句不会被重新排序，这是符合预期的行为。例如：

import { b1, b2 } from 'b'

/**
 * 多行注释
 */

import { a } from 'a'
import { c } from 'c'

这种情况下，import 语句保持原样是合理的，因为注释可能包含重要的上下文信息，随意移动可能会破坏代码的可读性。

然而，问题出现在使用行内注释时：

import { b1, b2 } from 'b' // 行内注释

import { a } from 'a'
import { c } from 'c'

这种情况下，import 语句同样不会被重新排序，这与开发者的预期不符。行内注释通常不会像多行注释那样承载重要的上下文信息，因此应该允许排序。

技术背景

在 AST (抽象语法树) 分析中，注释通常被分为几种类型：

1. 多行注释 (BlockComment)
2. 行内注释 (LineComment)
3. JSDoc 注释

ESLint 在处理这些注释时，会根据注释类型和位置做出不同的处理决定。在 import 排序的场景下，合理的做法是：

• 保留多行注释和 JSDoc 注释的位置不变
• 允许移动带有行内注释的 import 语句

解决方案

该问题已在最新版本中修复。修复后的行为是：

1. 多行注释块仍然会阻止相邻 import 的重新排序
2. 行内注释不再阻止 import 语句的排序

这意味着以下代码：

import { b1, b2 } from 'b' // 行内注释
import { a } from 'a'
import { c } from 'c'

将被正确地重新排序为：

import { a } from 'a'
import { b1, b2 } from 'b' // 行内注释
import { c } from 'c'

最佳实践建议

1. 对于重要的上下文说明，使用多行注释或 JSDoc 注释
2. 对于简单的说明性注释，使用行内注释
3. 注意注释位置对代码格式化工具的影响
4. 定期更新 ESLint 及其插件以获取最佳实践支持

这个改进使得 ESLint Plugin Perfectionist 在处理 import 排序时更加智能和符合开发者预期，进一步提升了代码风格的一致性。