leestott
88264e8bfd
|
2 months ago | |
|---|---|---|
| .. | ||
| README.md | 2 months ago | |
| assignment.md | 3 months ago | |
README.md
使用代碼編輯器：掌握 VSCode.dev
歡迎！
本課程將帶你從基礎到進階使用 VSCode.dev——一個功能強大的基於網頁的代碼編輯器。你將學習如何自信地編輯代碼、管理項目、追蹤更改、安裝擴展以及像專業人士一樣進行協作——全部都可以直接在瀏覽器中完成，無需安裝。
學習目標
完成本課程後，你將能夠：
- 高效地在任何項目上使用代碼編輯器，隨時隨地
- 使用內建的版本控制無縫追蹤工作
- 通過編輯器自定義和擴展提升你的開發工作流程
先決條件
開始之前，請註冊一個免費的 GitHub 帳戶，它可以幫助你管理代碼倉庫並與全球開發者協作。如果你還沒有帳戶，點擊這裡創建一個。
為什麼使用基於網頁的代碼編輯器？
像 VSCode.dev 這樣的代碼編輯器是你編寫、編輯和管理代碼的指揮中心。它擁有直觀的界面、豐富的功能，並且可以直接通過瀏覽器訪問，你可以：
- 在任何設備上編輯項目
- 避免安裝的麻煩
- 即時協作和貢獻
一旦熟悉了 VSCode.dev，你就能隨時隨地應對各種編碼任務。
開始使用 VSCode.dev
打開 VSCode.dev——無需安裝，無需下載。使用 GitHub 登錄可以解鎖完整功能，包括同步你的設置、擴展和倉庫。如果系統提示，請連接你的 GitHub 帳戶。
加載後，你的工作區將如下所示：
VSCode.dev 的界面分為三個核心部分：
- 活動欄： 包括 🔎（搜索）、⚙️（設置）、文件、源代碼控制等圖標。
- 側邊欄： 根據選擇的活動欄圖標改變上下文（默認為 Explorer，顯示文件）。
- 編輯器/代碼區域： 右側最大部分——你實際編輯和查看代碼的地方。
點擊圖標探索功能，但記得返回 Explorer 保持位置。
打開 GitHub 倉庫
方法一：通過編輯器
-
打開 VSCode.dev。點擊 "Open Remote Repository"。
或者使用 命令面板（Ctrl-Shift-P，Mac 上為 Cmd-Shift-P）。
- 選擇該選項。
- 粘貼你的 GitHub 倉庫 URL（例如
https://github.com/microsoft/Web-Dev-For-Beginners），然後按 Enter。
如果成功，你將看到整個項目加載並準備好進行編輯！
方法二：通過 URL 快速打開
將任何 GitHub 倉庫 URL 替換 github.com 為 vscode.dev/github，即可直接在 VSCode.dev 中打開。
例如：
- GitHub:
https://github.com/microsoft/Web-Dev-For-Beginners - VSCode.dev:
https://vscode.dev/github/microsoft/Web-Dev-For-Beginners
此功能能快速訪問任何項目。
編輯項目中的文件
倉庫打開後，你可以：
1. 創建新文件
- 在 Explorer 側邊欄中，導航到你想要的文件夾或使用根目錄。
- 點擊 ‘New file ...’ 圖標。
- 命名你的文件，按 Enter，文件會立即出現。
2. 編輯和保存文件
- 點擊 Explorer 中的文件以在代碼區域中打開。
- 根據需要進行更改。
- VSCode.dev 會自動保存你的更改，但你也可以按 Ctrl+S 手動保存。
3. 使用版本控制追蹤和提交更改
VSCode.dev 集成了 Git 版本控制！
-
點擊 'Source Control' 圖標查看所有更改。
-
Changes文件夾中的文件顯示新增（綠色）和刪除（紅色）。
-
點擊文件旁的
+準備提交更改。 -
點擊撤銷圖標 丟棄 不需要的更改。
-
輸入清晰的提交信息，然後點擊勾號提交並推送。
要返回 GitHub 倉庫，選擇左上角的漢堡菜單。
使用擴展提升功能
擴展可以為 VSCode.dev 添加語言支持、主題、調試工具和生產力工具——讓你的編碼生活更輕鬆、更有趣。
瀏覽和管理擴展
-
點擊活動欄上的 Extensions 圖標。
-
在 'Search Extensions in Marketplace' 框中搜索擴展。
- 已安裝： 所有你添加的擴展
- 熱門： 行業最受歡迎的擴展
- 推薦： 根據你的工作流程量身定制
1. 安裝擴展
-
在搜索框中輸入擴展名稱，點擊它，並在編輯器中查看詳細信息。
-
點擊側邊欄或主代碼區域中的 藍色安裝按鈕。
2. 自定義擴展
-
找到你已安裝的擴展。
-
點擊 齒輪圖標 → 選擇 Extension Settings，根據喜好微調行為。
3. 管理擴展
你可以：
-
禁用： 暫時關閉擴展但保留安裝
-
卸載： 如果不再需要，永久移除擴展
找到擴展，點擊齒輪圖標，選擇 "Disable" 或 "Uninstall"，或者使用代碼區域中的藍色按鈕。
作業
測試你的技能：使用 vscode.dev 創建一個簡歷網站
深入探索和自學
- 通過 VSCode Web 官方文檔 深入了解。
- 探索進階工作區功能、快捷鍵和設置。
現在你已準備好隨時隨地使用 VSCode.dev 進行編碼、創建和協作！
免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。