用 VS Code 打開第一個專案

先準備 VS Code

如果電腦還沒有 Visual Studio Code，先到官方網站安裝。這門課使用 VS Code 示範，但我們真正要學的是「程式碼編輯器怎麼管理一個專案」，不是背某個軟體的每顆按鈕。

安裝完成後啟動 VS Code。第一次打開時可能會看到 Welcome 頁面、主題選擇或其他提示。現在都可以先忽略。

先做：不要開 README.md，直接開整個資料夾

找到上一課建立的 norelyn-first-project。在 VS Code 選擇 File → Open Folder，然後選取整個：

norelyn-first-project/

不是只選 README.md，也不是只選 notes.txt。我們要讓 VS Code 知道這整個資料夾就是目前正在工作的專案。

開啟後，左側應該會出現類似這樣的檔案樹：

NORELYN-FIRST-PROJECT
├─ README.md
├─ notes/
│  └─ notes.txt
└─ assets/
   └─ images/

左邊那一欄叫 Explorer

VS Code 左側顯示專案檔案的區域叫 Explorer。它不是另一套檔案系統，而是在顯示你硬碟上真正存在的資料夾與檔案。

在 Explorer 裡建立、重新命名、移動或刪除檔案，硬碟上的內容也會跟著改變。反過來，如果你從 Windows 檔案總管或 macOS Finder 修改這個專案，VS Code 也會看到變化。

試一次：直接從 Explorer 建立檔案

在專案根目錄建立一個新檔案：

hello.txt

點開它，在編輯區輸入：

Hello, Norelyn Learn.

先不要急著做其他事。注意檔案名稱附近是否出現一個小圓點，或其他代表「內容尚未儲存」的標記。接著按 Ctrl + S；macOS 則使用 Command + S。

標記消失後，內容才確實寫回檔案。

編輯器裡看到的內容，不一定已經存進硬碟

這是初學者非常容易忽略的一層。你在畫面上打字時，VS Code 可以先保留尚未儲存的修改；只有儲存之後，硬碟裡的檔案內容才會更新。

VS Code 也支援 Auto Save，但現在先不要依賴它。先建立「修改後知道自己有沒有存檔」的習慣，之後遇到「明明改了，瀏覽器為什麼沒變」時會少很多混亂。

分頁只是把檔案打開，不是複製一份

依序點開 README.md、notes/notes.txt 和剛才的 hello.txt。上方會出現多個分頁。

這些分頁只是讓你快速切換正在看的檔案。關閉一個分頁不等於刪除檔案；刪除 Explorer 裡的檔案才會真的把它從專案移除。

試一次：讓 VS Code 幫你整理資料夾

在 Explorer 裡建立一個新資料夾：

drafts/

接著把 hello.txt 拖進去。你的專案會變成：

norelyn-first-project/
├─ README.md
├─ notes/
│  └─ notes.txt
├─ assets/
│  └─ images/
└─ drafts/
   └─ hello.txt

回想上一課：hello.txt 的相對路徑已經從 hello.txt 變成 drafts/hello.txt。VS Code 只是讓你用比較適合寫程式的介面完成同一件事。

為什麼要「Open Folder」？

如果只雙擊一個 README.md 讓 VS Code 開啟，你當然還是能編輯文字。但編輯器不知道你真正工作的邊界在哪裡。

當你開啟整個專案資料夾後，VS Code 才能以它為範圍顯示檔案樹、搜尋整個專案、開啟整合式 Terminal、使用 Git、套用專案設定，以及讓很多擴充功能理解你的程式結構。

Workspace 是什麼？先知道就好

你之後可能會在 VS Code 看到 workspace 這個詞。對現在的你來說，可以先把它理解成「VS Code 目前工作的範圍」。最常見的情況就是你剛才開啟的專案資料夾。

VS Code 也能建立包含多個資料夾的 multi-root workspace，或保存額外的 workspace 設定，但 Start Here 不需要處理那些。現在只維持一個專案對應一個清楚的根資料夾。

你暫時不需要安裝一堆 Extensions

VS Code 左側還會看到 Extensions。它可以替編輯器加入新的語言支援、格式化工具、Git 功能、主題等，但「裝很多」本身不會讓程式寫得比較好。

Start Here 階段先使用 VS Code 原本就有的功能。等後面的課程真的需要某個擴充功能時，再知道自己為什麼要裝它。

小挑戰：不用離開 VS Code 整理專案

現在只使用 Explorer 和編輯器完成下面幾件事：

最後一題的答案應該是：

docs/about.txt

你剛剛真正學會了什麼？

這一課真正重要的不是 VS Code 哪顆按鈕在哪，而是你第一次把「專案資料夾」當成一個完整的工作單位。

你現在能用 Explorer 管理檔案、用分頁切換內容、知道修改和儲存的差別，也知道為什麼寫程式時通常會開啟整個資料夾。

下一課，我們會第一次打開 Terminal。你會發現 Terminal 其實沒有建立另一個世界：它操作的仍然是現在這個 norelyn-first-project，只是把滑鼠操作換成文字指令。