惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Google DeepMind News
Google DeepMind News
Stack Overflow Blog
Stack Overflow Blog
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
T
The Blog of Author Tim Ferriss
博客园 - 叶小钗
N
Netflix TechBlog - Medium
腾讯CDC
C
Check Point Blog
P
Proofpoint News Feed
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI
S
SegmentFault 最新的问题
F
Fortinet All Blogs
美团技术团队
U
Unit 42
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 司徒正美
F
Full Disclosure
Recorded Future
Recorded Future
D
DataBreaches.Net
博客园 - 【当耐特】
Martin Fowler
Martin Fowler
J
Java Code Geeks
I
InfoQ
Y
Y Combinator Blog
A
About on SuperTechFans
AI
AI
爱范儿
爱范儿
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Forbes - Security
Forbes - Security
W
WeLiveSecurity
M
MIT News - Artificial intelligence
雷峰网
雷峰网
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Simon Willison's Weblog
Simon Willison's Weblog
Schneier on Security
Schneier on Security
The GitHub Blog
The GitHub Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
aimingoo的专栏
aimingoo的专栏
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
G
GRAHAM CLULEY
Know Your Adversary
Know Your Adversary
Latest news
Latest news
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
D
Docker
Recent Commits to openclaw:main
Recent Commits to openclaw:main
量子位
V2EX - 技术
V2EX - 技术
Project Zero
Project Zero

效率 – liseezn'blog

暂无文章

Zed 编辑器高效配置指南:从安装到打造专属前端工作流 – liseezn'blog
liseeze · 2024-01-19 · via 效率 – liseezn'blog

本文最后更新于37 天前,其中的信息可能已经过时,如有错误请发送邮件到[email protected]

2024 年 1 月 24 日,由 Atom 原团队打造的下一代代码编辑器 Zed 正式宣布开源。它采用 Rust 编写,天生支持 GPU 加速渲染,主打“极致的性能”和“实时协作”。我第一时间上手体验,并将其配置成了日常开发的主力编辑器。这篇教程将带你从安装开始,一步一步调教出一个高效、美观的 Zed。

· 快得像原生应用:冷启动瞬间完成,滚动 10 万行代码不掉帧。
· 开箱即用的协作:内置 Channels 功能,邀请同伴一起实时编程,延迟极低。
· 极简 UI:没有复杂的菜单栏和标签页,一切通过命令面板和键盘完成。
· 原生 AI 集成:可以直接接入 OpenAI API 或 GitHub Copilot,在编辑器中对话。

安装

前往 zed.dev 下载 macOS 或 Linux 版本。
macOS 用户可以直接 brew install –cask zed。
Windows 用户当时可通过 WSL 或源码编译,官方 Windows 版本也在快速跟进。

安装完成后,首次启动会让你选择主题(我更推荐默认的 One Dark),并引导你登录 GitHub 激活协作功能。

配置核心:settings.json

按下 Cmd+, 或 Ctrl+, 打开配置文件,所有设置集中在一个 JSON 文件中。下面是我自用的配置,可以直接复制使用:

{
  "theme": "One Dark",
  "ui_font_size": 16,
  "buffer_font_size": 15,
  "buffer_font_family": "JetBrains Mono",
  "soft_wrap": "editor_width",
  "autosave": "on_focus_change",
  "tab_size": 2,
  "vim_mode": false,
  "assistant": {
    "enabled": true,
    "default_model": {
      "provider": "openai",
      "name": "gpt-4"
    }
  }
}

· soft_wrap 设置按编辑器宽度自动换行,适合写文章或 Markdown。
· autosave: on_focus_change 让你再也不用担心忘记保存。
· assistant 部分可以填入你自己的 OpenAI API Key(需通过系统环境变量 OPENAI_API_KEY 提供),之后在编辑器中按 Ctrl+Enter 就可以直接和模型对话。

主题与界面微调

Zed 的主题市场非常丰富,直接在命令面板 Cmd+Shift+P 中搜索 theme,可以预览并一键安装。
如果你习惯 VS Code 的图标主题,也可以安装对应的 File Icon 插件。

推荐一个前端开发必备设置:在 settings.json 中增加 “languages” 字段,为不同文件类型指定 tab 和格式:

"languages": {
  "JavaScript": { "tab_size": 2 },
  "TypeScript": { "tab_size": 2 },
  "Python": { "tab_size": 4 }
}

扩展与插件系统

Zed 的插件生态系统刚刚起步,但一些核心功能的扩展已经就绪。比较实用的有:

· Vue / Svelte / Astro 语法高亮:市场内搜索安装即可。
· Tailwind CSS Intellisense:输入类名时自动补全和预览。
· Prettier:保存时自动格式化代码,需配合 Prettier 配置文件使用。

你可以用 Ctrl+Shift+X 浏览插件市场,或者直接在命令面板中 ext install xxx。

AI 辅助编程

除了上面配置的对话助手,Zed 还可以无缝对接 GitHub Copilot。
如果你有 Copilot 订阅,只需在 settings.json 中添加:

"copilot": {
  "enabled": true
}

然后在代码中像使用 Copilot 一样,编写注释或代码片段,等待灰色建议出现,按 Tab 接受。

如果你没有 Copilot,也可以用 OpenAI API 作为替代,体验几乎一致。

多人协作:Channels

这是 Zed 的杀手锏。点击右上角的 Channels 图标,创建一个频道,把链接分享给同伴,对方加入后就可以在同一个编辑会话中实时协作。每个人的光标颜色不同,且支持语音聊天。这个功能非常适合远程结对编程或代码 review。

实际工作流演示

以你正在阅读的博客静态项目(基于 Astro)为例:

· 用 Cmd+O 打开项目文件夹,左侧树状文件视图。
· 在 .astro 文件中编辑,语法高亮和补全都正常工作。
· 写 Markdown 博客时,开启 soft_wrap 模式,舒服得就像在 Typora 里。
· 修改完一个 bug 后,选中代码片段,按 Ctrl+Enter,对 AI 说 “解释这段代码”,直接在编辑器内获得回复。

小结

Zed 并不是要完全取代 VS Code,而是提供了一个极其轻量、极速的选择,尤其适合那些追求专注、不被打断的开发者。经过上述配置,它完全可以成为你写博客、写前端代码的日常利器。