旅宿主人的VS Code入门｜打开文件夹，准备使用Codex与Claude Code

旅宿主人创建工作文件夹、在VS Code打开整个文件夹，并安装AI扩展的3阶段插画 AI 网站管理

使用Codex或Claude Code管理网站的文章，常出现「在VS Code打开文件夹」的说明。不过，平常只使用浏览器与WordPress管理后台的人，不清楚VS Code是什么、打开文件夹有何意义，也是很自然的。

本文还不连接至服务器。先在自己的电脑创建练习文件夹，在VS Code打开，进行到理解画面与扩展的机制为止。

VS Code是什么

Visual Studio Code（VS Code）是可在Windows、macOS与Linux使用的免费编辑器。与一般文字记事本不同，它能一边查看文件夹内多个文件的列表，一边编辑，也能确认变更、操作终端与新增扩展。

只安装VS Code，不会自动变更WordPress或服务器。打开哪个文件夹、允许哪个扩展做什么，由用户决定。

「打开文件夹」而不是「打开文件」，是什么意思

管理一个WordPress网站时，正文、图片、设置与作业规则会分成多个文件。将它们集中收纳的箱子，就是文件夹。

旅宿网站运营文件夹
├── AGENTS.md       与AI共享的运营规则
├── CLAUDE.md       Claude Code用的说明
├── articles        放文章稿件的文件夹
├── images          放图片的文件夹
└── notes           放调查备忘的文件夹

在VS Code打开这个最外层文件夹，就能从左侧列表寻找里面的文件。Codex与Claude Code也较容易以打开的文件夹为工作单位，理解相关文件与规则。

若只打开一个文件，同一网站的其他稿件或AGENTS.md可能不在作业范围中。请把它想成「打开装着整个网站的箱子」。

1. 从官方网站安装VS Code

  1. 打开VS Code官方网站
  2. 选择符合自己电脑的Windows、macOS等版本
  3. 打开下载的安装程序
  4. 依画面指示安装
  5. 启动VS Code

不要从搜索广告或非官方下载网站安装，请确认URL为code.visualstudio.com。

2. 创建练习文件夹

在桌面或文档文件夹等自己找得到的位置，创建一个新文件夹。示例名称为inn-site-practice。

不要一开始就放入正式网站文件、密码列表或旅客名册。只放练习备忘。

3. 在VS Code打开整个文件夹

  1. 选择VS Code上方的「文件」
  2. 选择「打开文件夹」
  3. 选择创建好的inn-site-practice文件夹
  4. 按下「打开」或「选择文件夹」

左侧显示文件夹名称，就表示成功。VS Code有时会将打开的文件夹称为「工作区」。不必想得太复杂，就是「这次工作使用的箱子」。

被问到「是否信任这个文件夹」时

VS Code的Workspace Trust是判断是否允许执行文件夹内代码的机制。若是自己创建的空白练习文件夹，可以确认内容后信任。从网络取得的文件夹，在确认制作者与内容前，不要轻易信任。

4. 一开始只记住四个画面

  • 资源管理器：左侧的文件与文件夹列表
  • 编辑器：中央阅读与撰写文件内容的位置
  • 扩展：从最左侧方形图标新增功能的位置
  • 终端：输入命令的位置。一开始不要擅自贴上并执行

其他功能在需要时再学习即可。

5. 创建练习文件

从资源管理器的「新建文件」创建memo.md，输入以下内容并保存。

# 旅宿网站运营练习

- 本次不连接至正式网站
- 不删除或发布
- 不清楚的操作，在执行前先确认

.md是Markdown格式的文字文件。可以保存一般文字，也能使用标题与项目清单。

6. 寻找并安装扩展

扩展是为VS Code新增功能的小型软件。

  1. 选择最左侧「扩展」图标
  2. 在搜索栏输入扩展名称
  3. 在详细信息画面确认名称，也确认发布者
  4. 阅读说明、必要权限与使用条件
  5. 确认是需要的功能，再按「安装」

也有名称相似的非官方扩展。不要只因搜索结果排在最上方就选择，应从官方文件前往Marketplace，核对发布者与扩展ID。扩展以与VS Code相同的权限运作，因此不要大量安装不需要的功能。

使用Codex扩展时

从OpenAI官方Codex IDE extension选择「Install the extension」，依Marketplace指示操作。安装后在VS Code内登录，可以将打开的文件或选择范围纳入咨询。

第一次委托只进行读取。

请确认这个文件夹内的文件名称，
并说明各个文件的用途。
不要创建、编辑或删除文件，也不要执行命令。

使用Claude Code时

Claude Code提供与VS Code整合的方式。导入方式与支持OS可能改变，请从Anthropic官方VS Code整合步骤确认目前的方法。

若通过终端使用Claude Code，在打开的文件夹内启动，就会以该文件夹作为工作目标。不要在不了解意义时执行安装命令，应确认支持OS、合同与认证方法。

打开文件夹后，AI可能看到什么

若允许AI操作文件，它可能读取打开文件夹内的稿件或设置。以下项目不要放入工作文件夹。

  • 密码或私钥
  • API密钥
  • 旅客或询问者的个人信息
  • 付款信息
  • WordPress数据库备份
  • 尚未确认内容的下载文件

打开文件夹不只是将列表显示在画面上，也意味着决定交给AI的工作范围。

初次设置确认表

  • 已从官方网站安装VS Code
  • 已打开自己创建的练习文件夹
  • 左侧看得到文件夹名称与memo.md
  • 知道资源管理器、编辑器、扩展与终端的位置
  • 没有在未确认内容时允许Workspace Trust
  • 已确认扩展发布者与官方链接
  • 没有将秘密信息或个人信息放入文件夹
  • 第一次委托AI只进行读取
  • 尚未连接至正式服务器

总结

在VS Code，将网站相关文件集中于文件夹，打开它作为一个工作场所。接着核对发布者后，新增官方扩展，先从读取练习文件开始。

准备完成后，先阅读旅宿主人的Codex与Claude Code咨询入门，确认如何通过对话，从模糊困扰进到咨询、调查与实现。之后可继续阅读用Codex与Claude Code管理WordPress的安全规则与WP-CLI基础。

参考资料

※画面名称与导入方式可能更新。请务必通过各产品官方页面确认目前步骤。

已复制标题与网址