【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

文件夹右键统计即可

十三、SVG预览插件：SVG Viewer

 十四、SVG JS开源库：SVG.js 

 

总结：

不少插件都是网上收集的，收藏备用；