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
請參考影片進行編輯器設定，在影片裡，我們會示範：
- 檔案管理、頁籤、存檔；
- 安裝外掛；
- 客製化縮排設定。
初學者的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前後端開發）