【Abp VNext】实战入门（六）：VSCode 前端开发常用功能插件（格式化、自动补全、JS智能提示、Class智能提示、Path智能提示）

admin管理员组

文章数量:1794759

【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 

 

总结：

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

本文标签： 提示智能实战插件入门