VSCode快速安裝教學,推薦常用外掛擴充套件 | VS Code 自動排版 設定
![VSCode快速安裝教學,推薦常用外掛擴充套件](https://i.imgur.com/axBPWDg.jpg)
VisualStudioCode[1](簡稱VSCode)是一個支援多平台的開放原始碼免費程式碼編輯器,在2019Stackoverflow的調查中,也是Web開發者最熱門的程式編輯器。這篇基本的VSCode安裝使用教學,帶你快速上手設定本地開發環境,並推薦常用的VSCode外掛套件(Extensions)。2019Stackoverflow調查[2]Installation請前往https://code.visualstudio.com/[3]並依照你的作業系統下載適合的版本。使用Windows版本的同學,在安裝過程中請記得勾選Add"OpenwithCode"action的兩個選項(如下圖)。這兩項設定可以讓你直接在檔案上用滑鼠右鍵來開啟VisualStudi...
![VSCode快速安裝教學,推薦常用外掛擴充套件](https://i.imgur.com/H8YKUrg.jpg)
Visual Studio Code[1] (簡稱VSCode)是一個支援多平台的開放原始碼免費程式碼編輯器,在2019 Stackoverflow的調查中,也是Web開發者最熱門的程式編輯器。這篇基本的VSCode安裝使用教學,帶你快速上手設定本地開發環境,並推薦常用的VSCode外掛套件(Extensions)。
2019 Stackoverflow調查[2]Installation請前往 https://code.visualstudio.com/ [3]並依照你的作業系統下載適合的版本。
使用 Windows 版本的同學,在安裝過程中請記得勾選 Add "Open with Code" action 的兩個選項(如下圖)。這兩項設定可以讓你直接在檔案上用滑鼠右鍵來開啟 Visual Studio Code。
Configuration請參考影片進行編輯器設定,在影片裡,我們會示範:
檔案管理、頁籤、存檔;安裝外掛;客製化縮排設定。初學者的VSCode常用外掛擴充套件以下是一些適合現階段安裝的擴充套件,你可以先安裝起來,但若要了解他們的使用方便,你需要閱讀外掛的說明,你可以等到熟悉編輯器之後,再回過頭來認識這些擴充套件。
Emmet[4] (default): Visual studio code 已經預設安裝的擴充套件,提供了許多快速編寫 HTML 與 CSS 的縮寫,並且在你編寫程式碼的時候跳出提示,你可以在這裡[5]認識常見的縮寫。如果你使用別的編輯器,請在編輯器上主動安裝此套件。Bracket Pair Colorizer[6]: This extension allows matching brackets to be identified with colors. 方便你在除錯 (debug) 時快速找到對應的標籤。Live Server[7]: 讓你可以在檔案儲存的同時,就直接在瀏覽器裡同步看到結果。Markdown Preview Enhanced[8]: 預覽 .md 檔案的 output設定程式碼縮排請記得設定你的程式碼縮排,設定的位置在 Preference > Settings:
找到 Open settings.json...