Visual Studio Code（簡稱 VS Code）教學

Visual Studio Code（簡稱 VS Code）教學

Visual Studio Code（VS Code）是由微軟開發的一款免費、開源的程式碼編輯器，具有輕量級且功能強大的特點。它支持多種程式語言，並且有豐富的擴展插件生態系統，可以滿足不同開發者的需求。

本教學將引導你從安裝到基本操作，再到一些進階技巧，幫助你快速上手 VS Code。

目錄

1. 安裝 VS Code
2. 界面介紹
3. 基本操作
4. 擴展插件
5. 快捷鍵
6. 調試功能
7. Git 集成
8. 進階技巧

安裝 VS Code

Windows:

1. 前往 VS Code 官方網站 。
2. 點擊 "Download for Windows" 下載安裝檔。
3. 執行下載的 .exe 文件，並按照安裝向導完成安裝。

macOS:

1. 前往 VS Code 官方網站 。
2. 點擊 "Download for Mac" 下載 .zip 或 .dmg 文件。
3. 解壓縮後，將 VS Code 拖到應用程序文件夾中。

Linux:

1. 前往 VS Code 官方網站 。
2. 根據你的發行版選擇合適的包（如 .deb 或 .rpm）。
3. 使用終端進行安裝：
4. • Debian/Ubuntu : sudo apt install ./<file>.deb
   • Fedora : sudo dnf install ./<file>.rpm

界面介紹

VS Code 的界面主要由以下幾個部分組成：

1. 活動欄（Activity Bar） ：位於左側，包含文件管理、搜索、版本控制等功能的圖標。
2. 側邊欄（Side Bar） ：顯示當前選中的活動欄功能的詳細信息，例如文件資源管理器。
3. 編輯器區域（Editor Area） ：這是主要的工作區，用於編寫和查看代碼。
4. 狀態欄（Status Bar） ：位於底部，顯示當前文件的信息、編碼格式、行號等。
5. 面板（Panel） ：位於底部或右側，包含終端、問題、輸出等工具。

基本操作

1. 打開文件和文件夾

• 打開單個文件 ：點擊 File > Open File...。
• 打開文件夾 ：點擊 File > Open Folder...，這樣可以管理整個項目。

2. 新建文件和文件夾

• 新建文件 ：在文件資源管理器中右鍵點擊，選擇 New File。
• 新建文件夾 ：同樣在文件資源管理器中右鍵點擊，選擇 New Folder。

3. 搜索和替換

• 全局搜索 ：按下 Ctrl + Shift + F（Windows/Linux）或 Cmd + Shift + F（macOS），可以在整個項目中搜索文本。
• 替換 ：在搜索框下方可以找到替換選項，能夠批量替換文本。

4. 多光標編輯

• 按住 Alt（Windows/Linux）或 Option（macOS），然後點擊鼠標左鍵，可以在多個位置同時編輯。
• 也可以使用 Ctrl + D（Windows/Linux）或 Cmd + D（macOS）來逐個選擇相同的詞語。

擴展插件

VS Code 的一大特色是其豐富的擴展插件生態系統，這些插件可以增強編輯器的功能。

如何安裝擴展：

1. 點擊左側活動欄中的擴展圖標（四個方塊組成的圖標）。
2. 在搜索框中輸入你想要的插件名稱，例如 Python、ESLint、Prettier 等。
3. 點擊 Install 安裝插件。

常用擴展：

• Python ：支持 Python 開發，包括代碼補全、調試等功能。
• ESLint ：JavaScript 和 TypeScript 的代碼檢查工具。
• Prettier ：自動格式化代碼的工具。
• Live Server ：啟動一個本地伺服器，並自動刷新瀏覽器。
• GitLens ：增強 Git 功能，提供更詳細的提交歷史和分支信息。

快捷鍵

掌握快捷鍵可以大幅提升工作效率。以下是一些常用的快捷鍵：

文件操作：

• Ctrl + N（Windows/Linux） / Cmd + N（macOS）：新建文件。
• Ctrl + O（Windows/Linux） / Cmd + O（macOS）：打開文件。
• Ctrl + S（Windows/Linux） / Cmd + S（macOS）：保存文件。

編輯操作：

• Ctrl + Z（Windows/Linux） / Cmd + Z（macOS）：撤銷。
• Ctrl + Y（Windows/Linux） / Cmd + Shift + Z（macOS）：重做。
• Ctrl + D（Windows/Linux） / Cmd + D（macOS）：選擇下一個相同詞語。

搜索和導航：

• Ctrl + P（Windows/Linux） / Cmd + P（macOS）：快速打開文件。
• Ctrl + Shift + F（Windows/Linux） / Cmd + Shift + F（macOS）：全局搜索。
• Ctrl + G（Windows/Linux） / Cmd + G（macOS）：跳轉到指定行。

視圖操作：

• Ctrl + \（Windows/Linux） / Cmd + \（macOS）：拆分編輯器視圖。
• Ctrl + B（Windows/Linux） / Cmd + B（macOS）：切換側邊欄的顯示與隱藏。

調試功能

VS Code 內置了強大的調試功能，支持多種語言的調試。

如何設置調試：

1. 點擊左側活動欄中的調試圖標（蟲子圖標）。
2. 點擊頂部的齒輪圖標，選擇你要調試的語言（例如 Node.js、Python 等）。
3. VS Code 會自動生成一個 launch.json 文件，你可以根據需要修改配置。
4. 點擊綠色的播放按鈕開始調試。

設置斷點：

• 在代碼的行號旁邊點擊即可設置斷點，調試時會在此處暫停。

Git 集成

VS Code 內置了 Git 支持，方便進行版本控制。

常用操作：

• 初始化 Git 倉庫 ：在終端中運行 git init。
• 提交更改 ：在左側活動欄中點擊 Git 圖標，輸入提交信息，然後點擊勾選符號提交。
• 查看更改 ：點擊文件旁邊的更改數字，可以查看具體的差異。
• 推送和拉取 ：可以直接在 VS Code 中進行 git push 和 git pull。

進階技巧

1. 自定義設置

• 你可以通過 File > Preferences > Settings（Windows/Linux）或 Code > Preferences > Settings（macOS）來自定義 VS Code 的設置。
• 也可以直接編輯 settings.json 文件，進行更細粒度的配置。

2. 使用 Snippets（代碼片段）

• Snippets 是預定義的代碼模板，可以加快編碼速度。
• 你可以自定義 Snippets，進入 File > Preferences > User Snippets，然後選擇語言來創建。

3. 集成終端

• VS Code 內置了一個終端，可以通過 Ctrl + ``（反引號） 打開。
• 你可以在終端中運行命令、啟動伺服器、執行腳本等。

4. Zen Mode（禪模式）

• Zen Mode 提供了一個無干擾的編輯環境，隱藏所有不必要的 UI 元素。
• 你可以通過 View > Appearance > Zen Mode 啟用。