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,
}

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

如果你想要開始上手 VS cCode,網路上也有很多資源可以教你快速入門,下面這個是官方的教學影片

更多推薦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分鐘小測驗,找到你學習全端開發的入口