Web 技術

VSCode 是什麼，常用外掛擴充套件推薦

發佈日期: 作者:

‍Visual Studio Code (簡稱VSCode)是一個由微軟開發，支援多平台的開放原始碼免費程式碼編輯器，在2021 Stackoverflow的調查中，也是Web開發者最熱門的程式編輯器高達71%在使用，比兩年前的50%更高。VS Code 輕量但功能強大能支援語法凸顯，程式碼自動補全和重構的功能。VS Code 預設支援非常多語言，包含Javascript和CSS、HTML。也可透過下載擴充元件支援其他語言包含Python、C/C++等，提供很豐富的生態系統。

這篇基本的VSCode安裝使用教學，帶你快速上手設定本地開發環境，並推薦常用的VSCode外掛套件(Extensions)。

程式編輯器熱門排行

Installation

請前往 https://code.visualstudio.com/ 並依照你的作業系統下載適合的版本。

使用 Windows 版本的同學，在安裝過程中請記得勾選 Add “Open with Code” action 的兩個選項（如下圖）。這兩項設定可以讓你直接在檔案上用滑鼠右鍵來開啟 Visual Studio Code。

‍

Configuration

請參考影片進行編輯器設定，在影片裡，我們會示範：

  1. 檔案管理、頁籤、存檔；
  2. 安裝外掛；
  3. 客製化縮排設定。

初學者的VSCode常用外掛擴充套件

以下是一些適合現階段安裝的擴充套件，你可以先安裝起來，但若要了解他們的使用方便，你需要閱讀外掛的說明，你可以等到熟悉編輯器之後，再回過頭來認識這些擴充套件。

  • Emmet (default): Visual studio code 已經預設安裝的擴充套件，提供了許多快速編寫 HTML 與 CSS 的縮寫，並且在你編寫程式碼的時候跳出提示，你可以在這裡認識常見的縮寫。如果你使用別的編輯器，請在編輯器上主動安裝此套件。
  • Bracket Pair Colorizer: This extension allows matching brackets to be identified with colors. 方便你在除錯 (debug) 時快速找到對應的標籤。
  • Live Server: 讓你可以在檔案儲存的同時，就直接在瀏覽器裡同步看到結果。
  • Markdown Preview Enhanced: 預覽 .md 檔案的 output

設定程式碼縮排

請記得設定你的程式碼縮排，設定的位置在 Preference > Settings：

找到 Open settings.json 按鈕：

由於編輯器版本更新，按鈕也有可能在這個位置：

當你看到以下介面之後，請在右側的 User Settings 貼上以下程式碼，可以讓程式碼自動縮排，並且在程式碼超出視窗寬度時能自動繞行 (wrap)：‍

{
“editor.tabSize”: 2,
“editor.wordWrap”: “on”,
“editor.formatOnSave”: true,
“editor.formatOnPaste”: true,
}

恭喜你！你安裝並設定好你的本地開發環境了！

深入認識VSCode：基本功能和操作介紹

編輯器介面與操作：VSCode的基本功能解析

VSCode的介面設計得非常直覺且易於操作。當你打開VSCode時，你會在左側看到活動欄。它包括以下五個主要部分：

  1. 檔案總管 (Explorer)：你可以在這裡瀏覽、開啟你的檔案和專案。它可以讓你快速的導航到你的程式碼。
  2. 搜尋 (Search)：如果你想要尋找某個特定的檔案或是程式碼，這裡就是你的最佳選擇。它提供全專案的搜尋和取代功能。
  3. 版本控制 (Source Control)：VSCode 內建了 Git 的功能，你可以直接在這裡做 commit, pull, push 等操作。
  4. 執行 (Run)：VSCode 提供了 debug 功能，你可以在這裡設定斷點，查看變數的值等。
  5. 擴充功能 (Extensions)：在這裡你可以找到各種擴充功能，例如主題、語法高亮、程式碼提示等。

這些視圖提供了專案管理、檔案搜尋、版本控制等基本功能。此外，你可以透過調整視窗的樣式和主題，讓VSCode更符合你的個人風格。

快捷鍵與命令面板：提升編碼效率的秘密武器

VSCode 提供了許多快捷鍵來讓你的編程過程更加順暢。以下是一些例子：

  1. 快速開啟檔案 (Ctrl+P)：你可以在這裡快速地搜尋和開啟你的檔案。
  2. 開啟命令面板 (Ctrl+Shift+P 或 F1)：在命令面板，你可以找到並執行所有 VSCode 的命令。
  3. 開啟設定 (Ctrl+,)：你可以在這裡自定義你的環境，例如改變主題、設定語言等。
  4. 格式化文件 (Shift+Alt+F)：這個快捷鍵可以讓你的程式碼格式化，使它看起來更整潔。

學會VSCode的快捷鍵是提升編碼效率的關鍵。VSCode的命令面板（F1或Ctrl+Shift+P）提供了一個快速執行任何VSCode指令的方法，你可以輸入你想執行的指令，或是選擇最近使用的指令。另外，VSCode的快捷鍵設定也很彈性，你可以自訂任何快捷鍵，以符合你的編碼習慣。

推薦VSCode常用套件

VS code 提供很多強大的套件與套版，通常，在安裝新的開發環境時，會在編輯器上準備一些基本工具，包括：

自動檢查 Coding style 的工具

  • 稱為 Code linter，可以幫助你在 coding 過程中更有效地邊寫邊除錯
  • 要和 React 搭配的話，推薦使用 ESLint

自動排版工具

  • 在團隊協作中，我們應該使用與夥伴一致的程式碼排版習慣，包括什麼時候要空格、使用 tab 或 space 等等。幫你自動搞定這些細節的工具稱為 Formatter ，以 Prettier 為例，可以自動幫你的 tab、space 鍵調整成一致，讓縮排整齊、統一單雙引號等等
  • 在這裡推薦使用 Prettier extension in VSCode

以下是 ALPHA Camp 助教推薦的常用套件：

  • Chinese (Traditional) Language Pack for Visual Studio Code – 中文化 vscode ，不過在支援版本到 1.28 ，之後才會支援更高版本。
  • Code Spell Checker – 檢查有沒有拼錯字，超級推薦。
  • Settings Sync – 把設定、 plugin 雲端備份到 gist，超級推薦 。
  • Prettier – Code formatter – 自動排版、整潔程式碼的工具。舉例來說，假設一個專案有很多人在開發，有的人有加分號、有的人沒有；有的人用單引號、有的人用雙引號，這樣雖然程式執行時沒問題，但是整份 code 可能綜合了多種「風格」。 這時可以在 Prettier 根據專案設定好設定檔，如果有人用了不符合設定的「風格」（例如大家統一說好要用單引號，你卻用雙引號）Prettier 會自動根據設定檔幫你改成大家統一的風格。但反過來說，如你的沒有把 Prettier 設定好，它會自動修改你的程式碼，如補上「；」。所以使用時要特別注意。Prettier 的設定在 settings.json 這個檔案裡。
  • StandardJS – 和 prettier 的作用非常類似，會自動幫你調整程式碼的 style，只是它預設就是會使用 JavaScript Standard Style 的標準
  • TODO Highlight – 高亮特殊的關鍵字如 TODO 、 FIXME ，有時候寫筆記蠻好用的。
  • AutoFileName – 自動填入檔案路徑，在引入檔案時很方便。

(本文擷取自 AC全端 Web App 開發課程 學期二：JavaScript前後端開發）

3分鐘小測驗，找到你學習全端開發的入口