【神器】vscode經常使用插件與配置

背景

前端開發如今最火的編輯器當屬VSCode了，其中豐富的插件應用能夠幫助提升咱們的開發效率和拓展編輯器的能力。 前幾天由於mac pro有一批電腦硬盤有問題，因而便從新換了硬盤，致使以前安裝的app及全部相關配置都須要從新裝一遍，藉此機會也總結下我安裝的插件應用及配置

經常使用插件

主題類

介紹兩款比較受歡迎的主題，更換主題的方法

1. Atom One Dark Theme
2. Dracula Official 切換主題的方法

   

   

編程工具類

1. Auto Close Tag: 自動補齊html便籤
2. Auto Rename Tag: 當你修改標籤名時，會同時更改初始和結束標籤
3. Babel ES6/ES7: 高亮ES6/ES7語法
4. Beautify: 美化javascript, JSON, CSS, Sass, and HTML
5. Bookmarks: 爲須要的代碼行作記錄，並支持直接跳轉
6. Bracket Pair Colorizer: 當代碼嵌套太多時，不一樣組[]/{}等符號具備不一樣的顏色，便於區分同組符號
7. CSS Peek: 標籤中設置的class，支持直接跳轉到對應css區域
8. EditorConfig for VS Code: 定義和維護代碼風格（行尾結束符、縮進風格等）,,參考連接
9. ES7 React/Redux/GraphQL/React-Native snippets: 提供語法快捷方式
10. filesize: 在編輯器底部的狀態欄中會展現當前編輯文件的size大小，點擊具體大小值會展現具體信息

    

11. Git History: 查看文件、某一代碼行的git更改歷史
12. Git History Diff: 也是用來查看文件、某一代碼行的git更改歷史，同時能夠切換具體某次提交，查看全部文件的diff(我的以爲比Git History使用更加方便，功能也更增強大)

    

13. Import Cost: 展現引入的依賴包的大小

    

14. Markdown All in One: markdown語法的快捷方式
15. Markdown Preview Enhanced: 增長markdown文件的預覽功能，能夠實時查看效果
16. minapp: 微信小程序標籤、屬性的智能補全(支持原生小程序、mpvue 和 wepy 框架)
17. npm Intellisense 智能import已安裝的npm pkg，顯示的pkg爲package.json中dependencies中的依賴

    

    

18. open in browser: 針對html文件，支持右鍵打開瀏覽器瀏覽
19. Path Autocomplete: 引用路徑的智能提示
20. Prettier - Code formatter: 代碼格式化
21. TODO Highlight: 對部分代碼塊作todo標記，用來提醒本身在最後上線前須要處理的事宜 在User Settings 中增長todohighlight的配置

    

    具體配置能夠參考官網wiki command+shift+P 喚起命令行面板

    

配置

shell命令使用zsh：

重寫User Settings文件便可

"terminal.integrated.shell.osx": "zsh"
複製代碼

更改文件保存方式

設置文件保存的方式，提升開發效率，也防止忘記保存的狀況出現。能夠直接重寫User Settings的配置

"files.autoSave": "onFocusChange"
複製代碼

也能夠進入Settings的可視化配置界面，自定義配置本身的偏好，好比字體、間距等