VS Code能否实现类似IntelliJ的类与方法间水平分隔线效果？

功能实现的核心逻辑 #

你想要的这种类IDE风格的代码块分隔标尺，核心作用是在类、方法的起始位置渲染横跨编辑区的水平细线，帮使用者快速定位代码边界，实现路径主要分为两类：

• 基于语法树的精准识别：对接对应语言的语言服务，通过抽象语法树直接定位不同层级的类、方法节点，识别准确率接近原生体验
• 基于文本的正则匹配：通过逐行匹配文本特征筛选符合类/方法结构的代码行，给匹配行添加上边框装饰，模拟分隔线效果

目前的落地限制 #

• 该需求目前暂未作为原生功能内置在VS Code中，相关功能提案仍处于官方迭代队列，现阶段需要通过第三方扩展或者自定义配置实现。
• 纯正则匹配的方案天然存在兼容短板：在Java这类语法规则相对固定的语言中，正则规则可以覆盖绝大多数常见类、方法声明场景，能达到和参考示例效果一致的渲染表现；但在Dart这类语法灵活、存在大量特殊修饰符、泛型、可选参数的语言中，固定正则很难覆盖所有语法变体，容易出现漏匹配、误匹配的问题，无法实现100%的识别准确率。

具体配置方法 #

方法1：安装语法树驱动的专用分隔线扩展 #

这类扩展会直接对接对应语言的语言服务，读取语法树节点位置渲染分隔线，不需要手动编写正则规则，是体验最接近IntelliJ原生功能的方案：

• 扩展自带配置项支持自定义分隔线的颜色、粗细、上下边距，可自由调整哪些层级的代码节点（顶级类、内部类、成员方法、独立函数等）需要显示分隔线
• 对Java、TypeScript、Python等主流语言的兼容度较高，基本能做到和IDE内置功能一致的识别准确率

方法2：自定义正则规则模拟分隔线效果 #

如果不想安装额外扩展，可以通过VS Code的行装饰能力，用正则匹配类/方法的声明行，给匹配到的行添加上边框模拟分隔线。示例配置片段如下：

"editor.decorations": [
  {
    "name": "类声明分隔线",
    "lineHeight": 0,
    "topBorder": "1px solid rgba(136, 136, 136, 0.35)",
    "matchPattern": "^\\s*(abstract\\s+|final\\s+)?(class|interface|enum|mixin)\\s+\\w+"
  },
  {
    "name": "方法声明分隔线",
    "lineHeight": 0,
    "topBorder": "1px solid rgba(136, 136, 136, 0.2)",
    "matchPattern": "^\\s+{2,}(public|private|protected|static|async)?\\s*\\w+\\s+\\w+\\([^)]*\\)\\s*\\{$"
  }
]

这种方案需要根据自己常用的编程语言，持续调整正则规则的匹配范围，遇到复杂语法结构（多行声明、嵌套泛型、注解修饰的代码块）时，很容易出现匹配失效的问题。

内容的提问来源于stack exchange，提问作者psygo