旅宿主人的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基礎。

參考資料

※畫面名稱與導入方式可能更新。請務必透過各產品官方頁面確認目前步驟。

已複製標題與網址