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插件

1. vetur
   語法高亮、智能感知、Emmet等
2. VueHelper
   snippet代碼片段
3. Import Cost
   引入包大小計算,對於項目打包后體積掌握很有幫助

微信小程序插件

1. minapp
   微信小程序標簽、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，並提供 snippets）
2. wechat-snippet
   微信小程序代碼輔助,代碼片段自動完成

Nodejs 一些必備的第三方模塊

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