背景
前端開發現在最火的編輯器當屬VSCode了，其中豐富的外掛應用可以幫助提高我們的開發效率和擴充編輯器的能力。 前幾天因為mac pro有一批電腦硬碟有問題，於是便重新換了硬碟，導致之前安裝的app及所有相關配置都需要重新裝一遍，藉此機會也總結下我安裝的外掛應用及配置
常用外掛
主題類
介紹兩款比較受歡迎的主題，更換主題的方法
- Atom One Dark Theme
- Dracula Official
切換主題的方法
程式設計工具類
- Auto Close Tag: 自動補齊html便籤
- Auto Rename Tag: 當你修改標籤名時，會同時更改初始和結束標籤
- Babel ES6/ES7: 高亮ES6/ES7語法
- Beautify: 美化javascript, JSON, CSS, Sass, and HTML
- Bookmarks: 為需要的程式碼行做記錄，並支援直接跳轉
- Bracket Pair Colorizer: 當程式碼巢狀太多時，不同組[]/{}等符號具有不同的顏色，便於區分同組符號
- CSS Peek: 標籤中設定的class，支援直接跳轉到對應css區域
- EditorConfig for VS Code: 定義和維護程式碼風格（行尾結束符、縮排風格等）,,參考連結
- ES7 React/Redux/GraphQL/React-Native snippets: 提供語法快捷方式
- filesize: 在編輯器底部的狀態列中會展示當前編輯檔案的size大小，點選具體大小值會展示具體資訊
- Git History: 檢視檔案、某一程式碼行的git更改歷史
- Git History Diff: 也是用來檢視檔案、某一程式碼行的git更改歷史，同時可以切換具體某次提交，檢視所有檔案的diff(個人覺得比Git History使用更加方便，功能也更加強大)
- Import Cost: 展示引入的依賴包的大小
- Markdown All in One: markdown語法的快捷方式
- Markdown Preview Enhanced: 增加markdown檔案的預覽功能，可以實時檢視效果
- minapp: 微信小程式標籤、屬性的智慧補全(支援原生小程式、mpvue 和 wepy 框架)
- npm Intellisense 智慧import已安裝的npm pkg，顯示的pkg為package.json中dependencies中的依賴
- open in browser: 針對html檔案，支援右鍵開啟瀏覽器瀏覽
- Path Autocomplete: 引用路徑的智慧提示
- Prettier - Code formatter: 程式碼格式化
- TODO Highlight: 對部分程式碼塊做todo標記，用來提醒自己在最後上線前需要處理的事宜
在User Settings 中增加todohighlight的配置
配置
shell命令使用zsh：
重寫User Settings檔案即可
"terminal.integrated.shell.osx": "zsh"
複製程式碼更改檔案儲存方式
設定檔案儲存的方式，提高開發效率，也防止忘記儲存的情況出現。可以直接重寫User Settings的配置
"files.autoSave": "onFocusChange"
複製程式碼也可以進入Settings的視覺化配置介面，自定義配置自己的偏好，比如字型、間距等