11.5 配置你的"Vibe 工作台"

目录命名规范

良好的项目命名可以让 AI 和你自己都更容易理解项目的用途。

一个简单的规范：

项目名-类型

例如：

• my-blog-web（Web 应用）
• data-analysis-tool（工具脚本）
• wechat-bot（机器人/自动化）

关于命名的一些具体建议：

• 全小写 + 短横线分隔：这是 JavaScript/Node.js 生态中最常见的命名风格。my-blog-web 比 MyBlogWeb 或 my_blog_web 更好。
• 名字要有区分度：如果你以后有多个项目，app 或 my-project 这种名字会让你分不清谁是谁。my-blog-web 和 ecommerce-api 一眼就能区分。
• 避免版本号：不要用 my-blog-v2 或 my-blog-final。版本管理是 Git 的工作，不是名字的工作。如果你需要 v2，在 Git 中开一个新分支。
• 让 AI 帮你命名：不确定怎么命名？告诉 AI "我要做一个记录每日饮水的工具，帮我取一个项目名"，AI 会给出类似 water-tracker 或 daily-hydration-log 的建议。

目录组织结构建议：

在电脑上创建一个专门的目录来存放所有 Vibe Coding 项目：

~/projects/           # 或 D:\projects\
  ├── my-blog-web/
  ├── water-tracker/
  ├── ecommerce-api/
  └── data-dashboard/

这样做的两个好处：

• 所有项目集中在一个地方，方便备份和查找。
• Claude Code 在 ~/projects/ 层级启动时，可以感知到你有哪些项目。

项目启动的标准化流程

每次开始一个新项目，遵循相同的步骤可以减少"从零开始"的阻力：

第一步：创建项目目录。

mkdir my-new-project
cd my-new-project

第二步：初始化 Git。

git init

第三步：创建 .gitignore。

让 AI 生成："帮我创建适合这个项目的 .gitignore 文件"（然后告诉 AI 你的技术栈是什么）。

第四步：让 AI 初始化项目。

根据项目类型告诉 AI 不同的指令：

• Web 应用："使用 create-next-app 初始化一个 Next.js 项目"
• Python 工具："初始化一个 Python 项目，创建虚拟环境"
• Node.js API："运行 npm init -y，然后安装 express 和 typescript"

做完这四步，你的项目骨架就搭好了。整个过程加起来不超过 5 分钟。

环境变量管理

环境变量是存储在代码之外的可配置值——API 密钥、数据库地址、应用端口等。它们不应该硬编码在代码中，也不应该提交到 Git。

创建一个 .env 文件：

# .env
DATABASE_URL="postgresql://localhost:5432/myapp"
API_KEY="sk-xxx..."
PORT=3000

然后在代码中通过 process.env.DATABASE_URL 访问这些变量。

.env 文件的注意事项：

• 永远把 .env 加到 .gitignore 中。这样的文件提交到 GitHub 就相当于公开了密码。
• 创建一个 .env.example 文件提交到 Git，里面放变量名但不放真实值。其他人（或未来的你）看到这个文件就知道需要配置哪些环境变量。

# .env.example（可以提交到 Git）
DATABASE_URL="your_database_url_here"
API_KEY="your_api_key_here"
PORT=3000

让 AI 帮你做：

"我的项目用到了 PostgreSQL 数据库和 Anthropic API。帮我创建 .env 和 .env.example 文件，包含需要的环境变量。记得把 .env 加到 .gitignore 中。"

VS Code / Cursor 的推荐配置

虽然本书主要使用 Claude Code（终端工具），但你仍然需要一个编辑器来阅读和修改代码。推荐 VS Code 或 Cursor。

建议的辅助设置：

在 VS Code/Cursor 的设置（settings.json）中启用：

• 自动保存：设置为 afterDelay（延迟 1 秒自动保存）或 onFocusChange（文件失去焦点时自动保存）。省去手动按 Ctrl+S。
• 行号显示：默认开启，方便在对话中引用代码行。"第 15 行那里有一个 typo"比"在 Header 组件里有一个拼写错误"更精确。
• minimap：显示代码缩略图，方便在大文件中快速定位。
• 格式化：设置为"保存时自动格式化"（editor.formatOnSave），AI 生成的代码有时格式不统一，这个设置会自动修正。

推荐的 VS Code 扩展（非必需，但有用）：

• GitHub Copilot（如果你使用 VS Code 而不是 Cursor）——代码补全。
• Prettier——自动代码格式化，保持代码风格一致。
• ESLint——JavaScript/TypeScript 代码检查，提示潜在问题。
• Tailwind CSS IntelliSense——如果你使用 Tailwind CSS，这个扩展提供类名补全。
• Material Icon Theme——让文件资源管理器中的图标更清晰（纯粹是为了好看）。

安装方式：在 VS Code 的扩展面板中搜索以上扩展名，点击安装。

Cursor 用户注意： Cursor 已经内置了 AI 功能和大部分编辑器优化，你不需要额外安装太多扩展。只需要安装语言相关的扩展（如 Python、Tailwind 等）即可。

跨机器同步

如果你在多台电脑上工作（比如家里一台台式机，路上用笔记本），你需要考虑代码同步。

最简单的方式：用 GitHub。

工作流：

1. 在任何一台电脑上开发，修改完成后 git push。
2. 在另一台电脑上 git pull 获取最新代码。

这就够了。不需要用网盘同步、不需要手动复制文件。Git + GitHub 是你的同步工具。

如果是"环境配置"的同步（VS Code 设置、终端配置等）：

• VS Code/Cursor：登录你的 GitHub/Microsoft 账号，设置会自动同步。
• 终端配置（.zshrc、Starship 配置等）：可以把配置文件放在一个私有 GitHub 仓库中，在不同机器上 clone 下来使用。

新项目的启动清单

开始一个新项目时，对照这个清单确认基础设置完成：

• [ ] 创建了项目目录
• [ ] 运行了 git init
• [ ] 创建了 .gitignore（排除了 node_modules、.env、build 输出等）
• [ ] 创建了 .env 和 .env.example（如果项目需要）
• [ ] 运行了 npm init 或让 AI 初始化了项目
• [ ] 确认项目能在本地运行（npm run dev 启动成功）

这个清单不是为了追求完美——而是为了确保你"不会因为忘记基础设置而浪费时间"。比如你写了三天代码之后才发现没有 .gitignore，那时候项目中已经有大量不需要跟踪的文件，清理起来反而更麻烦。

备份策略

代码是你最宝贵的资产。备份是底线保障。

三层备份策略：

1. Git + GitHub（日常）：每次 commit + push。GitHub 是你的主要备份。只要做了这一步，你的代码至少有 99% 的安全保障。
2. 本地备份（每周）：把整个 projects 目录复制到外置硬盘或另一个分区。保险起见，一个月做一次就够了。
3. 关键文件额外备份（按需）：.env 文件中的 API 密钥、数据库密码等——如果你丢失了它们，即使代码还在，服务也可能无法运行。把它们记录在密码管理器（如 1Password、Bitwarden）中。

不要做的事： 把代码放在"同步盘"（如 OneDrive、iCloud 的 Desktop 同步）中作为主要的 Git 仓库。同步盘在 Git 操作时可能引发文件锁定冲突。在同步盘中放代码的"副本"没问题，但不要让 Git 仓库和同步盘实时同步同一份文件。

我的推荐起点

如果你问我，作为一个刚开始 Vibe Coding 的人，我应该怎么配置我的工作台——我的回答是：

不需要过度配置。 装好 Node.js、装好 Claude Code、装好 VS Code，你就可以开始了。等你用了一段时间，发现自己频繁遇到某个不便——比如每次都要手动运行同一个命令——那个时候再去寻找解决方案。

最糟糕的情况是花了两天"配置环境"，然后就没动力写代码了。先把第一个应用做出来，再回来优化环境。

有一个很形象的类比：如果你要开始跑步，不需要买最贵的跑鞋、最新的运动手表、专业的运动服。先穿上你现有的运动鞋出门跑一公里。跑了一个月之后，你自然知道你需要什么——也许是更好的鞋，也许是手机臂包。同样的道理：先做出第一个应用，再回来优化环境。