前端项目工作流

这一章解决什么问题

帮助你在 Zed 中完成一个前端项目的日常闭环：

打开项目 -> 安装依赖 -> 启动开发服务 -> 编辑代码 -> 查看错误 -> 构建检查 -> 提交

Zed 很适合前端项目，因为前端开发高度依赖快速跳转、内置终端、类型提示、全局搜索和 Git diff。

创建或打开项目

创建 Vite 项目

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
zed .

Vue 项目：

npm create vite@latest my-vue-app -- --template vue-ts

如果是已有项目：

cd D:\projects\my-app
npm install
zed .

第一次打开后先看什么

位置	看什么
package.json	有哪些 scripts
src/	主代码入口
vite.config.*	构建和插件配置
tsconfig.json	TypeScript 设置
.env*	环境变量
Git 面板	当前是否有未提交改动

不要一打开就开始改。先看项目怎样启动、怎样构建、有没有测试。

运行开发服务

打开终端：

npm run dev

看到类似地址后，在浏览器打开：

http://localhost:5173/

如果端口被占用，Vite 通常会自动换端口。看终端里实际输出，不要猜。

建议加入项目任务

在项目根目录创建 .zed/tasks.json：

[
  {
    "label": "frontend: dev",
    "command": "npm",
    "args": ["run", "dev"],
    "cwd": "$ZED_WORKTREE_ROOT",
    "reveal": "always"
  },
  {
    "label": "frontend: build",
    "command": "npm",
    "args": ["run", "build"],
    "cwd": "$ZED_WORKTREE_ROOT",
    "reveal": "always",
    "hide": "on_success"
  }
]

以后就可以从命令面板运行任务，不必反复敲命令。

编辑体验

TypeScript 提示

Zed 会通过语言服务提供：

• 自动补全
• 类型提示
• 跳转定义
• 查找引用
• 错误诊断

如果没有提示，先检查依赖是否安装：

npm install

再重启项目或重载 Zed。

JSX/TSX 编写

常用动作：

动作	用法
打开组件	Ctrl+P 输入组件名
找某段文案	Ctrl+Shift+F 全局搜索
改多个同名变量	多光标或重命名
查看错误	看代码旁边提示和底部诊断
格式化	保存自动格式化或运行格式化命令

CSS 和样式文件

如果项目使用 Tailwind、CSS Modules、Sass 或 UnoCSS，建议先确认对应扩展是否可用。Zed 扩展市场里可以搜索语言、框架或主题相关扩展。

调试前端问题的顺序

页面没变化

1. 看浏览器是不是打开了正确端口
2. 看终端开发服务是否还在运行
3. 看文件是否保存
4. 看控制台是否报错

依赖报错

npm install
npm run dev

如果仍然失败，再看具体报错。不要一开始就删除锁文件或重装全部工具。

类型错误

先看报错所在文件，再用跳转定义查看类型来源。类型错误通常比运行时报错更早暴露问题，不要全部忽略。

构建失败

提交前一定要跑：

npm run build

开发服务能跑，不代表正式构建一定能过。

推荐配置

{
  "base_keymap": "VSCode",
  "format_on_save": "on",
  "tab_size": 2,
  "languages": {
    "JavaScript": {
      "tab_size": 2,
      "format_on_save": "on"
    },
    "TypeScript": {
      "tab_size": 2,
      "format_on_save": "on"
    },
    "TSX": {
      "tab_size": 2,
      "format_on_save": "on"
    },
    "CSS": {
      "tab_size": 2
    }
  },
  "terminal": {
    "working_directory": "current_project_directory"
  }
}

提交前清单

• [ ] 页面能打开
• [ ] 主要交互检查过
• [ ] 控制台没有新增明显错误
• [ ] npm run build 通过
• [ ] Git diff 里没有临时文件
• [ ] 图片和链接能访问

本章小结

前端项目里，Zed 的核心价值是快：快速找文件、快速改代码、快速跑命令、快速看 diff。把 dev 和 build 做成任务，会让日常维护更稳定。