Loading...

Visual Studio Code (簡稱VSCode)是一個支援多平台的開放原始碼免費程式碼編輯器,在2019 Stackoverflow的調查中,也是Web開發者最熱門的程式編輯器。這篇基本的VSCode安裝使用教學,帶你快速上手設定本地開發環境,並推薦常用的VSCode外掛套件(Extensions)。

2019 Stackoverflow調查

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常用套件

VS code 提供很多強大的套件與套版,以下是 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分鐘小測驗,找到你學習全端開發的入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|JavaScript 完整前端基礎

系統化學習 JavaScript

實作打好前端基礎,成為扎實的網頁開發者