VSCode 前端必備插件

VSCode 前端必備插件

1. Debugger for Chrome
   讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試

   {
     "version": "0.2.0",
     "configurations": [{
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome",
         "url": "http://localhost:8080",
         "webRoot": "${workspaceFolder}"
       }
   
     ]
   }

2. jQuery Code Snippets
   jquery 重度患者必須品
3. Path Intellisense
   自動路勁補全，默認不帶這個功能的
4. ESlint
   ESlint 接管原生 js 提示，能夠自定製提示規則。
5. beautify
   格式化代碼的工具
6. Atuo Rename Tag
   修改 html 標籤，自動幫你完成尾部閉合標籤的同步修改，不過有些bug。
7. Auto Close Tag
   自動閉合尾部的標籤
8. GitLens
   豐富的git日誌插件
9. Chinese (Simplified) Language Pack for Visual Studio Code
   VSCode 中文資源包
10. fileheader
    頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間
11. filesize
    在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

12. Bracket Pair Colorizer
    讓括號擁有獨立的顏色，易於區分。能夠配合任意主題使用。

    Vue插件

13. vetur
    語法高亮、智能感知、Emmet等
14. VueHelper
    snippet代碼片斷

15. Import Cost
    引入包大小計算,對於項目打包後體積掌握頗有幫助

    微信小程序插件

16. minapp
    微信小程序標籤、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，並提供 snippets）

17. wechat-snippet
    微信小程序代碼輔助,代碼片斷自動完成

    Nodejs 一些必備的第三方模塊

18. live-server
    這是一個具備實時從新加載功能的小型開發服務器。使用它來破解HTML / JavaScript / CSS文件，但不能用於部署最終站點。
19. webpack(4.x)
20. webpack-cli
21. gulp
22. browser-sync
    Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。

23. vue-cli