首页 杂七杂八 正文
  • 本文约1418字,阅读需7分钟
  • 998
  • 0

vscode的常用插件 2022-09-07

温馨提示:本文最后更新于2022年9月7日 11:08,若内容或图片失效,请在下方留言或联系博主。

一、前言:

 

采用VSCode开发前端的时候 为了有个良好的开发体验 我们需要:错误自动提示、html JS 缩进格式化功能;

 

借助 VSCode 插件市场的插件即可满足需求。

 

二、自动格式化及语法错误提示:

 

1、打开VSCode插件市场:Ctrl + Shift + X 

 

2、安装插件:ESlint、Vetur

 

image.png

 

3、设置代码保存时自动格式化功能:菜单“文件”->“首选项”->“设置”:右上角 打开设置Json文件

image.png

 

 

4、添加开启自动保存配置: 新版本默认用这么一条配置就够了

 

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

 

 

5、设置忽略node_modules文件夹:菜单“文件”->“首选项”->“设置”:右上角 打开设置Json文件

 

JavaScript
{   
  "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智能提示:

 

image.png

 

1、安装:HTML CSS Support

 

2、添加设置:

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

3、IntelliSense for CSS class names in HTML

 

四、Chrome调试助手: Debugger for Chrome

 

image.png

 

五、VsCode左侧资源树添加图标:vscode-icon

image.png

 

 

六、自动补全路径:Path Intellisense

image.png

 

 

七、显示当前页面大小:filesize

 

image.png

 

八、自动添加头部注释文件及时间更新:vscode-fileheader

 

image.png

 

九、让括号拥有不同颜色:Bracket Pair Colorizer

 

image.png

 

十、Vue辅助插件:VueHelper

 

image.png

 

十一、CSS属性右键跳转对应的属性定义位置:CSS Peek

 

image.png

 

十二、代码行数、代码注释行数统计:VS Code Counter

 

文件夹右键统计即可

image.png

 

 

十三、SVG JS开源库:SVG.js 

image.png

 

 

总结:

 

不少插件都是网上收集的,收藏备用;

评论