入门 Zed Industries 2026-09-14 17:42:20 · 0 阅读

第141章如何从 WebStorm 迁移到 Zed

安装 Zed

Zed 支持 macOS、Windows 和 Linux。

macOS 用户可从 zed.dev/download 下载，或通过 Homebrew 安装：

brew install --cask zed

Windows 用户可从 zed.dev/download 下载安装包，或通过 winget 安装：

winget install Zed.Zed

对于大多数 Linux 用户，通过安装脚本安装 Zed 最为简便：

curl -f https://zed.dev/install.sh | sh

安装完成后，你可以通过“应用程序”文件夹（macOS）、“开始”菜单（Windows）启动 Zed，或在终端中运行 zed . 直接打开当前目录。

配置 JetBrains 快捷键布局

如果你从 WebStorm 转过来，最快的适应方式是使用 JetBrains 快捷键布局。在引导设置中可直接选择它作为基础布局；若错过该步骤，也可随时更改：

按 {#kb zed::OpenSettings} 打开设置
搜索 Base Keymap
选择 JetBrains

该布局支持熟悉的快捷键，例如 {#kb:jetbrains project_symbols::Toggle} 用于跳转到类，{#kb:jetbrains command_palette::Toggle} 用于查找操作。

在编辑器中，JetBrains 布局还支持 Alt+Left / Alt+Right 和 Shift+Alt+Left / Shift+Alt+Right 按子单词移动和选择，使 camelCase 和 snake_case 等标识符的操作与 WebStorm 的驼峰导航行为一致。

配置编辑器偏好设置

大多数设置可在设置编辑器（{#kb zed::OpenSettings}）中配置。如需高级配置，可通过命令面板运行 {#action zed::OpenSettingsFile} 直接编辑设置文件。

WebStorm 用户通常优先配置以下设置：

Zed 设置项	功能说明
`format_on_save`	保存时自动格式化，设为 `"on"` 启用。
`soft_wrap`	长行换行。可选值：`"none"`、`"editor_width"`、`"preferred_line_length"`。
`preferred_line_length`	换行和标尺线的列宽，默认为 80。
`inlay_hints`	在代码中内联显示参数名和类型提示，类似 WebStorm 的 hints。
`relative_line_numbers`	如果你是从 IdeaVim 过来的，这个会很有用。

Zed 还支持项目级设置。在项目根目录下创建 .zed/settings.json 文件，即可针对该项目覆盖全局设置，类似 WebStorm 中的 .idea 文件夹。

提示：如果你加入的是一个已有项目，第一次提交前先检查一下 format_on_save。否则可能只想改一行代码，结果整个文件都被重新格式化了。

打开或创建项目

完成设置后，使用 {#kb:jetbrains file_finder::Toggle} 打开一个文件夹，它就会成为你在 Zed 中的工作区。和 WebStorm 不同，这里没有项目配置向导、没有框架选择对话框，也不需要设置项目结构。

要新建项目，先用终端或文件管理器创建一个目录，然后在 Zed 中打开它。编辑器会把这个文件夹当作项目根目录。新项目通常先运行 npm init、pnpm create 或框架的 CLI 工具，再用 Zed 打开生成的文件夹。

你也可以在任意文件夹下通过终端运行以下命令启动 Zed： zed .

进入项目后：

用 {#kb:jetbrains file_finder::Toggle} 快速切换文件（类似 WebStorm 的"Recent Files"）
用 {#kb:jetbrains command_palette::Toggle} 打开命令面板（类似 WebStorm 的"Search Everywhere"）
用 {#kb:jetbrains project_symbols::Toggle} 搜索符号（类似 WebStorm 的"Go to Symbol"）

打开的文件会以标签页形式显示在顶部。Project Panel 展示文件树和 Git 状态，用 {#kb:jetbrains project_panel::ToggleFocus} 可以切换显示（就像 WebStorm 的 Project 工具窗口）。

快捷键差异

如果你在初始设置时选择了 JetBrains 键位映射，大部分快捷键应该已经很熟悉了。下面是启用 JetBrains 键位映射时常用操作的快捷键速查。

通用共享快捷键

这个片段主要是一个关于快捷键对照的表格，包含很多代码格式（{#kb:...}）和 HTML 标签。按照规则： 1. 保留所有 HTML 标签。 2. 保留 {#kb:...} 这种类似 LaTeX 或特殊标记的内容（虽然它们不是标准的 LaTeX 公式，但在 Zed 文档中这是宏，必须原样保留，不能翻译或改动内部）。 3. 翻译表格中的英文文本（如 "Search Everywhere", "Go to File" 等）。 4. 标题 "Different Keybindings (WebStorm → Zed)" 需要翻译。 5. 表格头 "Action", "WebStorm", "Zed (JetBrains keymap)" 需要翻译。让我们逐行处理：第一段表格部分（虽然没有 `

操作	Zed 快捷键

` 开始标签，但给了 `` 后面的内容，实际上可能是接在上文表格的 `` 里，或者是一个新表格的开始。看输入，它从 `` 开始，说明是表格的后半部分或正文部分）。 **表格内容翻译映射：** - Search Everywhere -> 全局搜索 - Find Action / Command Palette -> 查找操作 / 命令面板 - Go to File -> 转到文件 - Go to Symbol -> 转到符号 - Recent Files -> 最近文件 - Go to Definition -> 跳转到定义 - Find Usages -> 查找引用 - Rename Symbol -> 重命名符号 - Reformat Code -> 重新格式化代码 - Toggle Project Panel -> 切换项目面板 - Toggle Terminal -> 切换终端 - Duplicate Line -> 复制行 - Delete Line -> 删除行 - Move Line Up/Down -> 上移/下移行 - Expand/Shrink Selection -> 扩大/缩小选区 - Move by subword -> 按子词移动 - Select by subword -> 按子词选择 - Comment Line -> 切换行注释 - Go Back / Forward -> 后退 / 前进 - Toggle Breakpoint -> 切换断点 **第二部分标题：** - Different Keybindings (WebStorm → Zed) -> 不同的键盘映射 (WebStorm → Zed) **第二部分表格头：** - Action -> 操作 - WebStorm -> WebStorm - Zed (JetBrains keymap) -> Zed (JetBrains 键盘映射) **第二部分表格内容：** - File Structure -> 文件结构 - Navigate to Next Error -> 跳转到下一个错误 - Run -> 运行 - Debug -> 调试注意： - `{#kb:jetbrains ...}` 必须原样保留。 - `Cmd + F12` 等代码块内容保持不变，但如果旁边有注释如 `(outline)` 或 `(tasks)` 需要翻译。 - `(outline)` -> (大纲) - `(tasks)` -> (任务) 开始构建输出。注意：输入片段从 `` 开始，这通常意味着前面有一个 `

...`。由于输入只给了从 `` 开始的部分，我应该只翻译这部分，并保持结构。等等，仔细看输入：输入开始于 ``，然后是多行 `...`。接着是 `` ... `` `

`。然后是 `

...`。然后是 `` ... 直到片段结束（未闭合）。所以我要翻译的内容包括： 1. 第一个表格的剩余行（在 `` 之后）。 2. 第二个标题 `
`。 3. 第二个表格的开头部分（`
` 到 `` 内的内容）。让我们执行翻译。片段 1 (Table Body 1): `` `` `` `` `` `` ... `` `` `` `` ... `` `` (Comment Line 通常指 Toggle Comment，即切换注释。为了准确，可以用“切换行注释”) `` `` ... 片段 2 (H3 and Table 2 Header): `
不同的键盘映射 (WebStorm → Zed)
` `
全局搜索 {#kb:jetbrains command_palette::Toggle}
查找操作 / 命令面板 {#kb:jetbrains command_palette::Toggle}
注释行 {#kb:jetbrains editor::ToggleComments}
` `` `` `` `` `` `` `` `` `` `` `` `` `` ... 检查细节： - "Comment Line" 在 WebStorm 里通常是 Toggle Line Comment。翻译为“切换行注释”更准确。 - "Run" 对应 "Ctrl + R" (WebStorm) 和 "Ctrl + Alt + R" (Zed tasks)。Zed 里的 task 是“任务”。 - "Debug" 对应 "Ctrl + D" 和 "Alt + Shift + F9"。确认 HTML 结构完整。开始生成。
操作 WebStorm Zed (JetBrains 键盘映射)
文件结构 `Cmd + F12` `Cmd + F12` (大纲)

停止 `Cmd + F2` `Ctrl + F2`

操作	WebStorm	Zed (JetBrains 键盘映射)
文件结构	`Cmd + F12`	`Cmd + F12` (大纲)
停止	`Cmd + F2`	`Ctrl + F2`

Zed 独有功能

操作	快捷键	说明
切换右侧停靠区	{#kb workspace::ToggleRightDock}	Agent 面板、通知
向右分屏	{#kb pane::SplitRight}	使用其他方向键可创建不同方向的分屏

如何自定义快捷键

打开命令面板（{#kb:jetbrains command_palette::Toggle}）
运行 {#action zed::OpenKeymap}

这将打开所有可用快捷键的列表。你可以覆盖单个快捷键或移除冲突设置。

Zed 还支持按键序列（多键快捷键）。

用户界面的差异

无需索引

如果你用过 WebStorm 处理大型项目，就会熟悉那种等待。打开一个依赖繁多的项目时，你可能需要盯着“正在索引...”的提示，时间从 30 秒到几分钟不等。WebStorm 会对整个代码库和 node_modules 建立索引以支持代码智能功能，并在依赖变化时重新索引。

Zed 不进行索引。你打开文件夹后即可立即开始编码——没有进度条，也没有“索引已暂停”的横幅。无论项目规模多大或 node_modules 依赖多少，文件搜索和导航始终保持快速。

WebStorm 的索引支持跨整个代码库查找所有引用、追踪导入层级以及标记未使用的导出等高级功能。Zed 依赖语言服务器进行此类分析，其覆盖范围可能较窄。

如何适应：

使用 {#kb:jetbrains project_symbols::Toggle} 在整个项目中搜索符号（由 TypeScript 语言服务器提供支持）
使用 {#kb:jetbrains file_finder::Toggle} 按名称查找文件
使用 {#kb pane::DeploySearch} 进行文本搜索——即使在大型 monorepo 中也保持快速
当需要更深入的整项目分析时，在终端运行 tsc --noEmit 或 eslint .

LSP 与原生语言智能

WebStorm 拥有由 JetBrains 构建的专用 JavaScript 和 TypeScript 分析引擎。该引擎能深入理解代码：解析类型、追踪数据流、识别框架特定模式并提供专门的代码重构。

Zed 通过 Language Server Protocol（LSP）提供代码智能支持。对于 JavaScript 和 TypeScript，Zed 支持：

vtsls（默认）— 性能出色的快速 TypeScript 语言服务器
typescript-language-server — 标准的 TypeScript LSP 实现
ESLint — 代码检查集成
Prettier — 代码格式化（内置）

TypeScript 的 LSP 体验相当成熟，补全、类型检查、跳转定义、查找引用都很准确，整体感受和 VS Code 相当——两者底层用的是同一套 TypeScript 服务。

可能存在差异的地方：

框架专属的智能支持（Angular 模板、Vue SFC）集成度可能较低
一些复杂的重构操作（如提取组件并自动处理导入）可能没那么智能
自动导入建议取决于语言服务器对你项目的了解程度

如何适应：

用 {#kb:jetbrains editor::ToggleCodeActions} 查看可用的代码操作——具体列表因语言服务器而异
确保 tsconfig.json 配置正确，语言服务器才能理解你的项目结构
用 Prettier 保持格式统一（JS/TS 默认已启用）
想要类似 WebStorm「Inspect Code」的代码检查功能，可以查看 Diagnostics 面板（{#kb:jetbrains diagnostics::Deploy}）——ESLint 加 TypeScript 能覆盖大部分同类问题

没有项目模型

WebStorm 通过 .idea 文件夹（内含 XML 配置文件）、框架检测和运行配置来管理项目。这套机制让 WebStorm 能记住你的项目设置、在 UI 中管理 npm 脚本、保存运行/调试配置。

Zed 的思路不同：项目就是一个文件夹。没有设置向导，没有框架检测弹窗，也没有项目结构需要配置。

实际影响如下：

没有运行配置的概念。可复用的命令请在 tasks.json 中定义。注意，你现有的 .idea/ 配置不会自动迁移，需要按需重新设置。
npm 脚本直接在终端里跑。npm run dev、pnpm build、yarn test 直接执行即可——没有专门的 npm 面板。

如何适应：

在项目根目录创建 .zed/settings.json 以配置项目专属设置
在 tasks.json 中定义常用命令（可通过命令面板打开：{#action zed::OpenTasks}）：

[
  {
    "label": "dev",
    "command": "npm run dev"
  },
  {
    "label": "build",
    "command": "npm run build"
  },
  {
    "label": "test",
    "command": "npm test"
  },
  {
    "label": "test current file",
    "command": "npm test -- $ZED_FILE"
  }
]

使用 {#kb:jetbrains task::Spawn} 快速运行任务
对于任务未覆盖的操作，请依赖终端（{#kb:jetbrains terminal_panel::Toggle}）

缺少框架集成

WebStorm 在 Web 开发方面的价值主要源于其框架集成能力。React 组件会获得特殊处理，Angular 拥有专用工具链，Vue 单文件组件能被完整理解，npm 工具窗口则显示所有脚本。

Zed 并不内置这些功能。TypeScript 语言服务器仅将代码视为 TypeScript，它无法识别某个函数是 React 组件，或某个文件是 Angular 服务。

如何适应：

大量使用 grep 和文件搜索功能。通过 {#kb pane::DeploySearch} 配合正则表达式，可查找组件定义、路由配置或 API 端点。
依靠语言服务器的“查找引用”功能（{#kb:jetbrains editor::FindAllReferences}）进行导航——虽然有效，但缺乏框架上下文
考虑在 Zed 终端中调用框架特定的 CLI 工具（如 ng、next、vite）
对于 React 项目，JSX/TSX 语法和 TypeScript 类型仍能提供良好的智能提示

提示： 对于配置复杂的项目，建议手边保留框架文档。Zed 速度优势的背后，是较少的框架特定功能引导。

工具窗口与停靠面板

WebStorm 将辅助视图组织为编号的工具窗口。Zed 使用类似的概念，称为“停靠面板”（docks）：

WebStorm 工具窗口	Zed 对应功能	Zed 快捷键
项目	项目面板	{#kb:jetbrains project_panel::ToggleFocus}
Git	Git 面板	{#kb:jetbrains git_panel::ToggleFocus}
终端	终端面板	{#kb:jetbrains terminal_panel::Toggle}
结构	大纲面板	{#kb:jetbrains outline_panel::ToggleFocus}
问题	诊断	{#kb:jetbrains diagnostics::Deploy}
调试	调试面板	{#kb:jetbrains debug_panel::ToggleFocus}

Zed 支持左侧、底部和右侧三种停靠位置。可通过拖拽或在设置中移动面板到不同的停靠区域。

Zed 没有专门的 npm 工具窗口。建议使用终端或为常用的 npm 脚本定义任务来管理依赖。

调试

WebStorm 和 Zed 均支持 JavaScript 和 TypeScript 的集成调试：

Zed 使用 vscode-js-debug（与 VS Code 相同的调试适配器）
按 {#kb:jetbrains editor::ToggleBreakpoint} 设置断点
按 {#kb:jetbrains debugger::Start} 启动调试
使用 {#kb:jetbrains debugger::StepInto}（单步进入）、{#kb:jetbrains debugger::StepOver}（单步跳过）和 {#kb:jetbrains debugger::StepOut}（单步跳出）逐步执行代码
按 {#kb:jetbrains debugger::Continue} 继续执行

Zed 支持调试：

Node.js 应用和脚本
Chrome/浏览器中的 JavaScript
Jest、Mocha、Vitest 等测试框架
Next.js（包括服务端和客户端）

需要更精细控制时，创建 .zed/debug.json 文件：

[
  {
    "label": "Debug Current File",
    "adapter": "JavaScript",
    "program": "$ZED_FILE",
    "request": "launch"
  },
  {
    "label": "Debug Node Server",
    "adapter": "JavaScript",
    "request": "launch",
    "program": "${workspaceFolder}/src/server.js"
  },
  {
    "label": "Attach to Chrome",
    "adapter": "JavaScript",
    "request": "attach",
    "port": 9222
  }
]

Zed 还能识别 .vscode/launch.json 配置，所以现有的 VS Code 调试配置通常开箱即用。

运行测试

WebStorm 有专门的测试运行器，带可视化界面，能显示每个测试的通过/失败状态。Zed 通过以下方式运行测试：

边栏图标 — 点击测试函数或 describe 块旁边的播放按钮
任务 — 在 tasks.json 中定义测试命令
终端 — 直接运行 npm test、jest、vitest 等命令

Zed 支持自动识别常见的测试框架：

Jest
Mocha
Vitest
Jasmine
Bun test
Node.js test runner

测试输出显示在终端面板中。使用 Jest 时，可以加 --verbose 参数获取详细输出，或用 --watch 在开发过程中持续运行测试。

扩展与插件

WebStorm 有一个插件目录，涵盖额外的语言支持、主题和工具集成。

Zed 的扩展目录更小，也更专注：

语言支持和语法高亮
主题
Context servers

WebStorm 中需要插件才能实现的不少功能，Zed 都已内置：

支持语音聊天的实时协作
AI 编程辅助
内置终端
任务运行器
基于 LSP 的代码智能
Prettier 格式化
ESLint 集成

Zed 没有的功能

先明确一下预期：以下是 WebStorm 提供但 Zed 没有的功能：

npm 工具窗口 — 改用终端或任务
HTTP Client — 改用 Postman、Insomnia 或 curl 等工具
数据库工具 — 改用 DataGrip、DBeaver 或 TablePlus
框架专属工具（Angular schematics、React 重构）— 改用 CLI 工具
可视化 package.json 编辑器 — 直接编辑文件
内置 REST 客户端 — 改用外部工具或扩展
Profiler 集成 — 改用 Chrome DevTools 或 Node.js 性能分析工具

Zed 与 WebStorm 的协作功能对比

WebStorm 通过一个单独的功能 Code With Me 提供协作。Zed 则把协作直接内置在核心体验中。

在左侧停靠区打开协作面板
创建频道，并邀请协作者加入
直接共享你的屏幕或代码库

连接建立后，你可以实时查看彼此的光标、选区及编辑操作。内置语音聊天功能，无需额外工具或第三方登录。

在 Zed 中使用 AI

如果你习惯在 WebStorm 中使用 AI 助手（如 GitHub Copilot、JetBrains AI Assistant 或 Junie），Zed 提供了类似的功能，且灵活性更高。

配置 GitHub Copilot

使用 {#kb zed::OpenSettings} 打开设置
导航至 AI → Edit Predictions
点击“Configure Providers”旁边的 Configure
在 GitHub Copilot 下，点击 Sign in to GitHub

登录成功后，直接开始输入即可。Zed 会提供内联建议，供你选择接受。

其他 AI 选项

若要在 Zed 中使用其他 AI 模型，你有以下几种选择：

使用 Zed 托管的模型，拥有更高的速率限制。需要身份验证，并通过 Zed Pro 访问。
使用自己的API 密钥，无需身份验证
使用外部智能体，如 Claude Agent

高级配置与效率优化

对于希望微调环境的进阶用户，Zed 提供了高级设置选项。

以下是针对 JavaScript/TypeScript 开发者的几项实用调整：

保存时格式化：

"format_on_save": "on"

将 Prettier 配置为默认格式化器（需手动编辑 JSON）：

{
  "formatter": {
    "external": {
      "command": "prettier",
      "arguments": ["--stdin-filepath", "{buffer_path}"]
    }
  }
}

启用 ESLint 代码操作（需手动编辑 JSON）：

{
  "lsp": {
    "eslint": {
      "settings": {
        "codeActionOnSave": {
          "rules": ["import/order"]
        }
      }
    }
  }
}

配置 TypeScript 严格模式提示：

在 tsconfig.json 中启用严格模式，以获得更好的类型检查效果：

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true
  }
}

启用 direnv 支持（适用于使用 direnv 管理环境变量）：

"load_direnv": "shell_hook"

下一步

完成初始设置后，这里列出了一些资源，帮助更高效地使用 Zed：

所有设置 — 自定义设置、主题和编辑器行为
按键绑定 — 学习如何自定义和扩展按键映射
任务 — 为项目配置构建和运行命令
AI 功能 — 探索 Zed 在代码补全之外的 AI 能力
协作 — 实时共享项目并协同编写代码
Zed 中的 JavaScript — JavaScript 专属设置和配置
Zed 中的 TypeScript — TypeScript 专属设置和配置

第140章如何从 PyCharm 迁移到 Zed

第142章指南：如何从 RustRover 迁移到 Zed

本篇用到的工具

Zed

Zed 是一款面向速度和协作的极简 code editor，专为现代开发者打造。它原生支持与 AI agent 实时 pair programming，并内置多人协作编辑功能，让团队成员能在同一文件中同步 coding。极低延迟与轻量架构使其在大型项目与多文件操作中依然保持流畅响应，适用于 macOS、Linux 等跨平台开发场景。

全局搜索	{#kb:jetbrains command_palette::Toggle}
查找操作 / 命令面板	{#kb:jetbrains command_palette::Toggle}
注释行	{#kb:jetbrains editor::ToggleComments}

第141章 如何从 WebStorm 迁移到 Zed

安装 Zed

配置 JetBrains 快捷键布局

配置编辑器偏好设置

打开或创建项目

快捷键差异

通用共享快捷键

`。 3. 第二个表格的开头部分（`

不同的键盘映射 (WebStorm → Zed)

Zed 独有功能

如何自定义快捷键

用户界面的差异

无需索引

LSP 与原生语言智能

没有项目模型

缺少框架集成

工具窗口与停靠面板

调试

运行测试

扩展与插件

Zed 没有的功能

Zed 与 WebStorm 的协作功能对比

在 Zed 中使用 AI

配置 GitHub Copilot

其他 AI 选项

高级配置与效率优化

下一步

本篇用到的工具

评论 (0)

第141章如何从 WebStorm 迁移到 Zed