【Abp VNext】實戰入門（六）：VSCode 前端開發常用功能插件（格式化、自動補全、JS智能提示、Class智能提示、Path智能提示）

一、前言：

采用VSCode開發前端的時候 為了有個良好的開發體驗 我們需要：錯誤自動提示、html JS 縮進格式化功能；

借助 VSCode 插件市場的插件即可滿足需求。

二、自動格式化及文法錯誤提示：

1、打開VSCode插件市場：Ctrl + Shift + X 

2、安裝插件：ESlint、Vetur

3、設定代碼儲存時自動格式化功能：菜單“檔案”->“首選項”->“設定”：右上角 打開設定Json檔案

4、添加開啟自動儲存配置： 新版本預設用這麼一條配置就夠了

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}
           

5、設定忽略node_modules檔案夾：菜單“檔案”->“首選項”->“設定”：右上角 打開設定Json檔案

{   
  "editor.codeActionsOnSave":{
    "source.fixAll.eslint": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true//工程目錄忽略顯示node_modules 檔案夾
  }
}
           

6、注意：如果隻是安裝了這兩個插件 不添加配置，在儲存代碼的時候是不會自動格式化，而且 ESlint 還瘋狂報錯 各種警告 煩人的一筆！

三、Css智能提示：

1、安裝：HTML CSS Support

2、添加設定：

"editor.parameterHints": true,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
}
           

3、IntelliSense for CSS class names in HTML

四、Chrome調試助手： Debugger for Chrome

五、VsCode左側資源樹添加圖示：vscode-icon

六、自動補全路徑：Path Intellisense

七、顯示目前頁面大小：filesize

八、自動添加頭部注釋檔案及時間更新：vscode-fileheader

九、讓括号擁有不同顔色：Bracket Pair Colorizer

十、Vue輔助插件：VueHelper

十一、CSS屬性右鍵跳轉對應的屬性定義位置：CSS Peek

十二、代碼行數、代碼注釋行數統計：VS Code Counter

檔案夾右鍵統計即可

總結：

不少插件都是網上收集的，收藏備用；