20 KiB

Raw Blame History Unescape Escape

使用程式碼編輯器：精通 VSCode.dev

還記得《駭客任務》中 Neo 必須連接到一台巨大的電腦終端才能進入數字世界嗎？如今的網頁開發工具完全相反——強大的功能隨時隨地都能使用。VSCode.dev 是一款基於瀏覽器的程式碼編輯器，能讓任何有網路連接的設備都能使用專業的開發工具。

就像印刷術讓書籍不再僅僅是修道院抄寫員的專利一樣，VSCode.dev 讓程式碼編寫變得更加普及。你可以在圖書館的電腦上、學校的實驗室裡，或者任何可以使用瀏覽器的地方進行工作。無需安裝，沒有「我需要特定的設置」的限制。

在這節課結束時，你將能夠了解如何使用 VSCode.dev，直接在瀏覽器中打開 GitHub 儲存庫，並使用 Git 進行版本控制——這些都是專業開發者每天依賴的技能。

你將學到什麼

完成這節課後，你將能夠：

像使用第二個家一樣熟練地操作 VSCode.dev——輕鬆找到所需的一切，不再迷失方向
直接在瀏覽器中打開任何 GitHub 儲存庫並立即開始編輯（這真的很神奇！）
使用 Git 像專業人士一樣追蹤你的更改並保存進度
使用擴展功能提升編輯器的效率，讓程式碼編寫更快速、更有趣
自信地創建和組織專案文件

你需要準備什麼

需求非常簡單：

一個免費的 GitHub 帳戶（如果需要，我們會指導你如何創建）
基本的網頁瀏覽器使用知識
GitHub 基礎課程提供了有用的背景知識，但不是必須的

💡 GitHub 新手？ 創建帳戶是免費的，只需幾分鐘。就像圖書館卡能讓你借閱全球的書籍一樣，GitHub 帳戶能讓你接觸到互聯網上的程式碼儲存庫。

為什麼網頁版程式碼編輯器很重要

在互聯網出現之前，不同大學的科學家無法輕易分享研究成果。然後在 1960 年代，ARPANET 出現了，連接了遠距離的電腦。網頁版程式碼編輯器遵循了相同的原則——無論你身處何地或使用什麼設備，都能使用強大的工具。

程式碼編輯器是你的開發工作空間，讓你可以撰寫、編輯和組織程式碼文件。與簡單的文字編輯器不同，專業的程式碼編輯器提供語法高亮、錯誤檢測和專案管理功能。

VSCode.dev 將這些功能帶到了瀏覽器中：

網頁版編輯的優勢：

功能	描述	實際效益
平台獨立性	在任何有瀏覽器的設備上運行	無縫切換不同電腦工作
無需安裝	通過網頁 URL 訪問	避免軟體安裝限制
自動更新	始終運行最新版本	無需手動更新即可獲得新功能
儲存庫整合	與 GitHub 直接連接	無需本地文件管理即可編輯程式碼

實際影響：

在不同環境中的工作連續性
無論操作系統如何，界面始終一致
即時協作能力
減少本地存儲需求

探索 VSCode.dev

就像瑪麗·居里的實驗室在相對簡單的空間中包含了精密的設備一樣，VSCode.dev 將專業的開發工具打包到瀏覽器界面中。這款網頁應用提供了與桌面程式碼編輯器相同的核心功能。

首先，打開瀏覽器並進入 vscode.dev。界面會在無需下載或系統安裝的情況下加載——這是雲端計算原則的直接應用。

連接你的 GitHub 帳戶

就像亞歷山大·格拉漢姆·貝爾的電話連接了遙遠的地點一樣，連接你的 GitHub 帳戶可以將 VSCode.dev 與你的程式碼儲存庫連接起來。當系統提示你使用 GitHub 登錄時，建議接受此連接。

GitHub 整合提供：

在編輯器中直接訪問你的儲存庫
在不同設備間同步設置和擴展
簡化保存到 GitHub 的工作流程
個性化的開發環境

熟悉你的新工作空間

一旦所有內容加載完成，你會看到一個設計精美的工作空間，旨在讓你專注於最重要的事情——你的程式碼！

以下是你的工作空間導覽：

活動欄（左側的那條）：你的主要導航工具，包括 Explorer 📁、Search 🔍、Source Control 🌿、Extensions 🧩 和 Settings ⚙️
側邊欄（旁邊的面板）：根據你選擇的內容顯示相關信息
編輯區域（中間的大空間）：這是魔法發生的地方——你的主要程式碼編輯區

花點時間探索：

點擊活動欄上的圖標，看看每個圖標的功能
注意側邊欄如何根據選擇的內容更新信息——很酷吧？
Explorer 視圖（📁）可能是你花最多時間的地方，所以熟悉它吧

打開 GitHub 儲存庫

在互聯網出現之前，研究人員必須親自前往圖書館才能獲取文獻。GitHub 儲存庫的工作原理類似——它們是遠程存儲的程式碼集合。VSCode.dev 消除了在本地機器下載儲存庫後再進行編輯的傳統步驟。

這項功能使得可以立即訪問任何公共儲存庫以進行查看、編輯或貢獻。以下是打開儲存庫的兩種方法：

方法 1：點擊操作方式

當你剛開始使用 VSCode.dev 並想打開特定儲存庫時，這是最簡單的方式，非常適合初學者：

操作步驟：

如果你還沒進入 vscode.dev，先進入該網站
在歡迎頁面上找到「Open Remote Repository」按鈕並點擊
粘貼任何 GitHub 儲存庫 URL（試試這個：https://github.com/microsoft/Web-Dev-For-Beginners）
按下 Enter，見證奇蹟！

專業提示 - 命令面板快捷鍵：

想感覺像個程式碼巫師嗎？試試這個鍵盤快捷鍵：Ctrl+Shift+P（或 Mac 上的 Cmd+Shift+P）打開命令面板：

命令面板就像一個搜索引擎，能找到你能做的一切：

輸入「open remote」，它會幫你找到儲存庫打開器
它會記住你最近打開的儲存庫（非常方便！）
一旦你習慣了它，你會感覺自己像在以光速編程
它基本上是 VSCode.dev 的「嘿 Siri，但用於程式碼」

方法 2：URL 修改技巧

就像 HTTP 和 HTTPS 使用不同的協議但保持相同的域名結構一樣，VSCode.dev 使用了一種與 GitHub 地址系統相似的 URL 模式。任何 GitHub 儲存庫 URL 都可以修改為直接在 VSCode.dev 中打開。

URL 轉換模式：

儲存庫類型	GitHub URL	VSCode.dev URL
公共儲存庫	`github.com/microsoft/Web-Dev-For-Beginners`	`vscode.dev/github/microsoft/Web-Dev-For-Beginners`
個人專案	`github.com/your-username/my-project`	`vscode.dev/github/your-username/my-project`
任何可訪問的儲存庫	`github.com/their-username/awesome-repo`	`vscode.dev/github/their-username/awesome-repo`

實施方法：

將 github.com 替換為 vscode.dev/github
保持 URL 的其他部分不變
適用於任何可公開訪問的儲存庫
提供即時編輯訪問

💡 改變生活的小技巧：將你最喜歡的儲存庫的 VSCode.dev 版本加入書籤。我有像「編輯我的作品集」和「修復文檔」這樣的書籤，可以直接進入編輯模式！

應該使用哪種方法？

界面方式：適合探索或記不住具體儲存庫名稱時使用
URL 技巧：當你確切知道要去的地方時，這是快速訪問的完美選擇

處理文件和專案

現在你已經打開了一個儲存庫，讓我們開始創建吧！VSCode.dev 提供了你所需的一切來創建、編輯和組織程式碼文件。把它想像成你的數字工作坊——每個工具都在你需要的地方。

讓我們深入了解構成大部分程式碼工作流程的日常任務。

創建新文件

就像建築師的辦公室裡組織藍圖一樣，VSCode.dev 中的文件創建遵循結構化的方式。系統支持所有標準的網頁開發文件類型。

文件創建過程：

在 Explorer 側邊欄中導航到目標文件夾
將鼠標懸停在文件夾名稱上，顯示「新文件」圖標（📄+）
輸入文件名，包括適當的擴展名（例如 style.css、script.js、index.html）
按 Enter 創建文件

命名規則：

使用描述性名稱，表明文件用途
包含文件擴展名以便正確的語法高亮
在整個專案中遵循一致的命名模式
使用小寫字母和連字符代替空格

編輯和保存文件

這是最有趣的部分！VSCode.dev 的編輯器充滿了有助於使程式碼編寫流暢和直觀的功能。就像有一個非常聰明的寫作助手，但專門用於程式碼。

你的編輯工作流程：

點擊 Explorer 中的任意文件，將其打開到主區域
開始輸入，看看 VSCode.dev 如何用顏色、建議和錯誤檢測幫助你
使用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存你的工作——不過它也會自動保存！

編程時發生的酷炫事情：

你的程式碼會被漂亮地用顏色標記，便於閱讀
VSCode.dev 在你輸入時提供補全建議（就像自動校正，但更智能）
它在你保存之前就能捕捉到拼寫錯誤和錯誤
你可以像瀏覽器一樣在多個文件中打開標籤
所有內容都會在背景中自動保存

⚠️ 快速提示：即使有自動保存功能，養成按 Ctrl+S 或 Cmd+S 的習慣仍然很好。它能立即保存所有內容並觸發一些額外的有用功能，比如錯誤檢查。

使用 Git 進行版本控制

就像考古學家詳細記錄挖掘層一樣，Git 會隨時間推移追蹤你的程式碼更改。這個系統保存了專案的歷史記錄，並在需要時讓你能夠回到之前的版本。VSCode.dev 包含了集成的 Git 功能。

版本控制界面：

通過活動欄上的 🌿 圖標進入 Source Control 面板
修改過的文件會出現在「Changes」部分
顏色編碼指示更改類型：綠色表示新增，紅色表示刪除

保存你的工作（提交工作流程）：

flowchart TD
    A[Make changes to files] --> B[View changes in Source Control]
    B --> C[Stage changes by clicking +]
    C --> D[Write descriptive commit message]
    D --> E[Click checkmark to commit]
    E --> F[Changes pushed to GitHub]

以下是你的逐步操作：

點擊文件旁邊的「+」圖標（這是「暫存」它們）
仔細檢查你是否對所有暫存的更改感到滿意
寫一個簡短的備註說明你做了什麼（這是你的「提交訊息」）
點擊勾選按鈕將所有內容保存到 GitHub
如果你改變了主意，可以使用撤銷圖標丟棄更改

撰寫良好的提交訊息（其實很簡單！）：

只需描述你做了什麼，比如「新增聯絡表單」或「修復導航問題」
簡短明了——想想推文的長度，而不是寫篇文章
用行動詞開頭，比如「新增」、「修復」、「更新」或「移除」
良好的範例：新增響應式導航菜單、修復移動端佈局問題、更新顏色以提高可訪性

💡 快速導航提示：使用左上角的漢堡菜單（☰）跳回你的 GitHub 儲存庫，查看你在線提交的更改。這就像在你的編輯環境和 GitHub 上的專案主頁之間的傳送門！

使用擴展功能增強功能

就像工匠的工作坊包含針對不同任務的專業工具一樣，VSCode.dev 可以通過擴展功能進行自定義，添加特定的功能。這些由社群開發的插件解決了常見的開發需求，例如程式碼格式化、即時預覽和增強的 Git 整合。

擴展市場提供了數千種由全球開發者創建的免費工具。每個擴展都解決了特定的工作流程挑戰，讓你能夠構建適合自己需求和偏好的個性化開發環境。

找到適合你的擴展

擴展市場組織得非常好，你不會迷失在尋找所需工具的過程中。它旨在幫助你發現特定工具以及你甚至不知道存在的酷炫功能！

進入擴展市場：

點擊活動欄上的 Extensions 圖標（🧩）
瀏覽或搜索特定的內容
點擊任何看起來有趣的項目以了解更多信息

你會在裡面看到什麼：

部分	內容	為什麼有用
已安裝	你已添加的擴展	你的個人程式碼工具箱
熱門	大家喜愛的擴展	大多數開發者推薦的工具
推薦	根據你的專案提供的智能建議	VSCode.dev 的貼心推薦

讓瀏覽變得簡單的原因：

每個擴充功能都顯示評分、下載次數和真實用戶的評論
你可以看到截圖和清晰的描述，了解每個擴充功能的功能
所有內容都清楚標示了相容性資訊
還會推薦類似的擴充功能，方便你比較選擇

安裝擴充功能（超簡單！）

為你的編輯器新增功能就像點擊一個按鈕那麼簡單。擴充功能只需幾秒鐘就能安裝完成並立即開始運作——無需重啟，也不用等待。

你只需要這樣做：

搜尋你需要的功能（試試搜尋 "live server" 或 "prettier"）
點擊看起來不錯的擴充功能以查看更多細節
閱讀它的功能介紹並查看評分
點擊藍色的 "Install" 按鈕，完成！

幕後發生的事情：

擴充功能會自動下載並設置好
新功能會立即出現在你的介面中
所有功能馬上就能使用（真的很快！）
如果你已登入，擴充功能會同步到你的所有設備

推薦你可以先試試的幾個擴充功能：

Live Server：在你編碼時即時查看網站更新（這個超神奇！）
Prettier：自動讓你的程式碼看起來乾淨又專業
Auto Rename Tag：修改一個 HTML 標籤時，對應的標籤也會自動更新
Bracket Pair Colorizer：為括號添加顏色標記，讓你不會迷失
GitLens：為你的 Git 功能提供大量有用資訊，讓它更強大

自訂你的擴充功能

大多數擴充功能都附帶可調整的設定，讓它們能完全符合你的需求。就像調整汽車的座椅和後視鏡一樣——每個人都有自己的偏好！

調整擴充功能設定：

在擴充功能面板中找到你已安裝的擴充功能
找到它名稱旁邊的小齒輪圖示 (⚙️)，然後點擊
從下拉選單中選擇 "Extension Settings"
根據你的工作流程調整設定，直到感覺剛剛好

你可能想調整的常見設定：

程式碼的格式（例如使用 Tab 還是空格、行長等）
觸發不同操作的鍵盤快捷鍵
擴充功能應作用於哪些檔案類型
開啟或關閉特定功能，保持介面簡潔

管理你的擴充功能

當你發現越來越多有趣的擴充功能時，你會希望保持你的擴充功能集合整潔並運行流暢。VSCode.dev 讓管理變得非常簡單。

你的擴充功能管理選項：

可執行的操作	適用情境	專家提示
停用	測試某個擴充功能是否引起問題	如果可能會再次使用，比卸載更好
卸載	完全移除不需要的擴充功能	保持環境整潔和快速
更新	獲取最新功能和錯誤修復	通常會自動更新，但值得檢查一下

我喜歡這樣管理擴充功能：

每隔幾個月，我會檢查已安裝的擴充功能，移除不再使用的
我保持擴充功能更新，以獲得最新的改進和安全修復
如果感覺速度變慢，我會暫時停用一些擴充功能，看看是否有影響
當擴充功能有重大更新時，我會閱讀更新說明——有時會有很酷的新功能！

⚠️ 性能提示：擴充功能很棒，但太多可能會拖慢速度。專注於那些真正讓你生活更輕鬆的擴充功能，不要害怕卸載那些你從未使用過的。

GitHub Copilot Agent 挑戰 🚀

就像 NASA 在太空任務中使用的結構化方法一樣，這個挑戰涉及在完整的工作流程場景中系統地應用 VSCode.dev 技能。

目標： 展示使用 VSCode.dev 建立全面網頁開發工作流程的熟練程度。

項目要求： 使用 Agent 模式協助，完成以下任務：

Fork 一個現有的倉庫或創建一個新倉庫
建立包含 HTML、CSS 和 JavaScript 文件的功能性項目結構
安裝並配置三個能提升開發效率的擴充功能
使用描述性提交訊息進行版本控制
練習建立和修改功能分支
在 README.md 文件中記錄過程和學習心得

這項練習將所有 VSCode.dev 概念整合到一個實際的工作流程中，未來可以應用於開發項目。

了解更多 agent mode 的資訊。

作業

是時候真正測試這些技能了！我有一個動手項目，讓你可以練習我們所涵蓋的所有內容：使用 VSCode.dev 建立一個履歷網站

這個作業將引導你在瀏覽器中完全建立一個專業的履歷網站。你將使用我們探索過的所有 VSCode.dev 功能，完成後，你不僅會擁有一個外觀精美的網站，還會對你的新工作流程充滿信心。

繼續探索並提升你的技能

你現在已經有了堅實的基礎，但還有更多酷炫的東西等著你去發掘！以下是一些資源和想法，幫助你將 VSCode.dev 技能提升到下一個層次：

值得收藏的官方文件：

VSCode Web Documentation – 瀏覽器編輯的完整指南
GitHub Codespaces – 當你需要更強大的雲端功能時

接下來可以嘗試的酷炫功能：

鍵盤快捷鍵：學習那些讓你感覺像是編程高手的快捷鍵組合
工作區設定：為不同類型的項目設置不同的環境
多根工作區：同時處理多個倉庫（非常方便！）
終端整合：直接在瀏覽器中使用命令行工具

練習的想法：

加入一些開源項目並使用 VSCode.dev 貢獻——這是回饋社群的好方法！
嘗試不同的擴充功能，找到最適合你的配置
為你最常建立的網站類型創建項目模板
練習 Git 工作流程，例如分支和合併——這些技能在團隊項目中非常重要

你已經掌握了基於瀏覽器的開發！ 🎉 就像便攜式儀器的發明使科學家能夠在偏遠地區進行研究一樣，VSCode.dev 讓你能夠在任何連接網路的設備上進行專業編程。

這些技能反映了當前的行業實踐——許多專業開發者使用基於雲端的開發環境，因為它們靈活且易於訪問。你已經學會了一種可以從個人項目擴展到大型團隊合作的工作流程。

將這些技術應用到你的下一個開發項目吧！ 🚀

免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。

20 KiB Raw Blame History Unescape Escape