Ki Editor：一个把代码当乐高玩的编辑器

先说个真事儿

上周我要重构一个项目，把所有 console.log 换成自定义的 logger.debug。大概有200多处。

用 VS Code 的多光标？我得一个个选中。用正则替换？有些 console.log 在字符串里，不该换。折腾了半小时，眼睛都快瞎了。

然后我试了 Ki Editor。

按两下键，选中当前文件所有 console.log 调用——不是文本匹配，是语法识别。字符串里的 console.log 自动跳过。再按两下，全部替换。10秒搞定。

那一刻我才反应过来：传统编辑器看到的只是字符，Ki Editor 看到的是代码的结构。

Ki Editor 是什么

Ki Editor 是一个「结构化编辑器」。

传统编辑器看到的是字符流：f-u-n-c-t-i-o-n。Ki Editor 看到的是语法树：这是一个函数声明，里面有参数列表，参数列表里有三个标识符。

就像你看乐高积木。普通人看到的是塑料块，老玩家看到的是「2x4的红色砖块」和「1x2的透明斜面」。Ki Editor 就是那个老玩家视角的编辑器。

它用 Tree-sitter 解析代码，把每个文件变成一棵语法树。你的光标不是在字符之间移动，而是在语法节点之间跳跃。

核心概念：选区即语法

Ki Editor 最核心的概念是「一等语法选区」。

传统编辑器的选区是「从第3行第5列到第7行第12列」。这是一个矩形，没有任何语义。

Ki Editor 的选区是「当前这个函数的整个函数体」或者「当前这个 if 语句的条件表达式」。这是语法单元，有明确的边界和含义。

比如这段 JavaScript：

function greet(name) {
  if (name) {
    return `Hello, ${name}!`;
  }
  return "Hello, stranger!";
}

在 Ki Editor 里，你可以：

把光标放在 name 上，按一下键，选区扩展到整个参数列表 (name)
再按一下，选区扩展到整个函数签名 function greet(name)
再按一下，选区扩展到整个函数体 { ... }

这不是「选中更多字符」，而是「选中更大的语法单元」。

多光标：终于不用对齐了

传统多光标编辑有个痛点：你得手动把光标放到「对齐」的位置。

比如你想同时编辑三个函数的名字：

function getUser() {}
function getOrder() {}
function getProduct() {}

在 VS Code 里，你得按住 Alt 一个个点击。要是这三个函数中间隔了50行代码呢？点到手抽筋。

Ki Editor 的做法是：先选中一个函数名，然后按「添加同类型节点」快捷键。它会自动找到所有同级函数，给每个都加上光标。

因为它知道这三个是「同级函数声明」，所以能自动识别。

更骚的是，你可以「选中所有 if 语句的条件部分」，然后一次性给所有条件加上类型检查。它靠的是语法结构，不是文本对齐。

快捷键：位置比名字好记

Ki Editor 用的是「位置键位」而不是「助记键位」。

传统编辑器的快捷键是「功能名」：Ctrl+F 是 Find，Ctrl+D 是 Delete。你得记住功能名对应的字母。

Ki Editor 的逻辑是：你的手放在键盘上，每个手指能按到的键是固定的。J 是向左（伸出一根手指），K 是向下（弯曲一根手指），L 是向右。

扩展选区的快捷键是 Space，收缩是 Backspace。添加光标是 Shift + 方向键。

这不是让你背快捷键，而是让你形成肌肉记忆。用了一周，我基本不看键盘了。

Tree-sitter：为什么它这么快

Ki Editor 用 Tree-sitter 做语法解析。

Tree-sitter 是个神奇的库。它能在你打字的瞬间完成语法分析，而且只重新解析受影响的部分。

这意味着：

打开一个 10 万行的文件，瞬间就能开始结构化编辑
你输入的同时，语法树就在实时更新
支持增量解析，不会因为一个字符改动就重新解析整个文件

目前 Ki Editor 支持几十种语言：JavaScript、TypeScript、Python、Rust、Go、Ruby 等等。只要是 Tree-sitter 支��的语言，Ki Editor 就能用。

实战：重构一个组件

举个实际例子。我有个 React 组件，想把它所有的 props.xxx 改成解构后的 xxx。

function UserCard(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.email}</p>
      <span>{props.role}</span>
    </div>
  );
}

在 Ki Editor 里：

光标放在 props 上，扩展选区到参数列表
把 props 改成 { name, email, role }
选中函数体里所有的 props. 前缀
删除

最终结果：

function UserCard({ name, email, role }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>{email}</p>
      <span>{role}</span>
    </div>
  );
}

整个过程不用写正则，不用担心选错，因为 Ki Editor 知道哪些是「属性访问表达式」。

安装和上手

Ki Editor 目前支持 macOS 和 Linux。Windows 版本还在开发中。

最简单的安装方式是下载预编译的二进制文件，或者从源码编译：

git clone https://github.com/ki-editor/ki-editor
cd ki-editor
cargo install --path .

第一次启动会进入教程模式，教你基本的选区操作和多光标用法。建议花 20 分钟走完教程，比自己摸索快得多。

什么时候不该用

Ki Editor 不是万能的。

如果你主要写 markdown、写文档、写长篇文章，传统编辑器更合适。毕竟那些内容没有语法结构，Ki Editor 的优势发挥不出来。

另外，Ki Editor 目前还在早期开发阶段。插件生态、LSP 集成、调试功能都还不完善。如果你的工作流重度依赖某个 VS Code 插件，可能得等等。

但如果你每天都在重构代码、批量修改变量、在多个位置同时编辑——Ki Editor 值得一试。

小结

Ki Editor 做对了一件事：把编辑器从「文本处理工具」升级成了「代码理解工具」。

选中语法单元而不是字符，操作表达式和语句而不是行和列——写代码的感觉会完全不一样。

第一次用 Git 的时候也有类似的感觉：以前复制文件夹做版本控制也能凑合用，但用了 Git 之后，就再也回不去了。

常见问题

Q: Ki Editor 能完全替代 VS Code 吗？

目前还不能。Ki Editor 还在早期阶段，插件生态和调试功能都不如 VS Code 成熟。建议把它作为「第二编辑器」，专门用来做重构和批量编辑。

Q: 学习曲线陡吗？

位置键位需要几天适应时间。但一旦形成肌肉记忆，效率提升很明显。内置教程大概 20 分钟能走完。

Q: 支持哪些编程语言？

支持 Tree-sitter 有语法定义的语言，包括 JavaScript、TypeScript、Python、Rust、Go、Ruby、Java、C/C++ 等几十种。Ki Editor 在 GitHub 上已经有 488+ stars，社区还在持续添加新语言支持。

Q: 和 Vim 的 text objects 有什么区别？

Vim 的 text objects 是基于正则和简单规则的，Ki Editor 是基于完整语法树的。Vim 能识别「括号里的内容」，Ki Editor 能识别「这个函数的所有参数」。后者语义更精确，但也更依赖语言支持。

先说个真事儿#

Ki Editor 是什么#

核心概念：选区即语法#

多光标：终于不用对齐了#

快捷键：位置比名字好记#

Tree-sitter：为什么它这么快#

实战：重构一个组件#

安装和上手#

什么时候不该用#

小结#

常见问题#