安裝Visual Studio Code和擴充套件與環境設定(Mac)
Published in
5 min readJun 10, 2019
市面上的程式碼編輯器有很多種，這篇文章記錄了如何安裝Visual Studio Code 和常用的擴充套件與環境設定。
Visual Studio Code (以下簡稱VS Code)
VS Code 是由 2015 年微軟所開發的一個開源軟體，它同時支援 Windows、Linux 和 macOS 作業系統的開源文字編輯器。它支援偵錯，內建了Git 版本控制功能，同時也具有開發環境功能，例如代碼補全、代碼片段、代碼重構等，而且也支援用戶個性化模組，如主題顏色、鍵盤路徑…等。
安裝 VS Code
連到VS Code官網，依照個人電腦的作業系統，下載並安裝。
環境設定
- 安裝Code 指令
1、開啟VS Code，按下 command + shift + p 來開啟Command Palette(命令面板)。
2、輸入Shell path 選擇第一個 Shell Command: install 'code' command in PATH
這樣一來，如果在Terminal 內輸入code . 指令，系統就會自動用VS Code 幫你開啟整個資料夾。也可以選擇在Terminal 內輸入 code 檔案名稱 ，系就會用VS Code 開啟該檔案。
Config 設定
1、開啟VS Code。按下快捷鍵 command + , 或是畫面左上角選擇Code => Preferences(喜好設定) =>Settings (設定)，開啟Settings(設定) 頁面。
2、頁面開啟後，右上角有一個 {} 小圖示，點擊開啟settings.json 檔。
3、在settings.json 檔裡面貼上以下程式碼。
{ “editor.tabSize”: 2, // 一個tab鍵的空白間距 “editor.wordWrap”: “on”, // 當程式碼超過編輯器畫面，會自動換行 “editor.formatOnPaste”: true, // 貼上程式碼時會自動排版 “editor.formatOnSave”: true, // 儲存程式碼時會自動排版 “editor.fontSize”: 18, // 字體大小 “files.insertFinalNewline”: true, // 儲存檔案時在結尾插入一個新行}
這樣一來，基本的Config 設定就大功告成了。
擴充套件
VS Code 有許多非常實用的擴充套件，這裡先推薦幾個比較實用的：
- Bracket Pair Colorizer: 讓配對的括號有相同的顏色，方便除錯。
- Live Server: 在儲存檔案的同時，可以直接在瀏覽器上同步看到結果。
- Markdown Preview Enhanced: 可以預覽 .md 檔案的結果。
- Code Spell Checker: 檢查拼字有沒有錯誤。
- Settings Sync: 把設定、 plugin 雲端備份到 gist。
- Prettier Code formatter: 自動排版、整潔程式碼的工具。如果一個專案有很多人在開發，有的人有加分號、有的人沒有；有的人用單引號、有的人用雙引號，雖然程式執行時沒問題，但是整份 code 可能綜合了多種coding style。 這時可以在 Prettier 根據專案設定好設定檔，如果有人用了不符合設定的 coding style (例如大家統一說好要用單引號，有人卻用雙引號)，Prettier 會自動根據設定檔幫你改成大家統一的風格。但反過來說，如你的沒有把 Prettier 設定好，它會自動修改你的程式碼，如補上「；」。所以使用時要特別注意。Prettier 的設定在 settings.json 這個檔案裡。
- AutoFileName: 自動填入檔案路徑。
- vscode-icons / Material Icon Theme: 會在檔案前秀出精美的圖示。
- TODO Highlight: Highlight 特殊的關鍵字如TODO、FIXME，寫筆記時好用。
- Preview on Web Server: 開發網頁時，可預覽網頁。
- Atom One Dark Theme: VS Code 的主題，對於許多關鍵字都有漂亮的顏色。
