CodeMirror 6 自定义 Lint 工具提示隐藏行为配置指南

在 CodeMirror 6 编辑器的使用过程中，lint 工具提示（tooltips）是一个重要的功能，它能够实时显示代码中的错误或警告信息。然而，默认的提示隐藏行为可能并不总是符合所有开发场景的需求。

问题背景

CodeMirror 6 的 lint 包提供了一个默认的工具提示实现，但开发者无法灵活控制这些提示何时应该隐藏。特别是在协作编辑场景中，当其他用户进行远程编辑时，我们可能希望保持 lint 提示的显示状态，而不是按照默认行为隐藏。

解决方案

最新版本的 CodeMirror 6（6.6.0 及以上）已经增加了对 lint 工具提示隐藏行为的自定义支持。开发者现在可以通过配置 hideOn 选项来精确控制 lint 提示的隐藏时机。

配置示例

以下是一个典型的配置示例，展示了如何自定义 lint 提示的隐藏行为：

import { linter } from "@codemirror/lint"
import { Transaction } from "@codemirror/state"

const customLinter = linter(async (view) => {
  // 你的 lint 逻辑
}, {
  tooltipFilter: (tooltips) => tooltips,
  hideOn: (tr: Transaction) => {
    // 远程事务不隐藏提示
    if (tr.annotation(Transaction.remote)) {
      return false
    }

    // 用户输入、删除或选择操作时隐藏
    if (
      tr.isUserEvent('input') ||
      tr.isUserEvent('delete') ||
      tr.isUserEvent('select')
    ) {
      return true
    }

    // 其他情况保持默认行为
    return false
  }
})

配置选项详解

1. 远程事务处理：通过检查事务是否带有 Transaction.remote 注解，可以识别来自其他用户的编辑操作，保持提示显示。

2. 用户事件处理：对于本地用户的输入、删除和选择操作，可以配置为立即隐藏提示，提供更流畅的编辑体验。

3. 默认行为：对于未明确处理的情况，可以返回 false 保持默认行为，或者根据具体需求返回 true/false。

应用场景

这种自定义配置特别适用于以下场景：

• 协作编辑环境：在多用户同时编辑文档时，保持 lint 提示的稳定性
• 复杂编辑流程：需要根据特定编辑操作调整提示行为的专业开发环境
• 自定义用户体验：为特定用户群体优化编辑器交互方式

版本兼容性

此功能需要 CodeMirror 6.6.0 或更高版本。如果使用的是早期版本，开发者需要自行实现 lint 扩展来达到类似效果。

通过这种灵活的配置方式，开发者可以更好地控制 lint 提示的显示行为，从而为终端用户提供更加精准和符合场景需求的代码检查体验。