admin管理员组文章数量:1530028
一、前言:
采用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
总结:
不少插件都是网上收集的,收藏备用;
版权声明:本文标题:【Abp VNext】实战入门(六):VSCode 前端开发常用功能插件(格式化、自动补全、JS智能提示、Class智能提示、Path智能提示) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1726471743a1072162.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论