vscode 常用 插件

一、HTML 插件

  Auto Close Tag  元素自动闭合。

  Auto Rename Tag  修改开始标签,结束标签自动跟着变。

  HTML Snippets  联想出对应的dom元素,让用户选择,如下:

  

     Path Intellisense  智能路径提示,如下:

  

 

 

 

二、JS 插件

    Color Highlight js中的颜色值高亮,如下:

           

  TODO Highlight  把TODO、FIXME: 设置成高亮,比如代码上线之前需要去改点东西,可以用TODO 去标志,如下:

  

  TODO Tree 把在项目中加 TODO 标识的文件列举出来,方便查找,如下:

  

  ESLint  结合你项目中的eslint 配置去检测js代码是否规范。

  filesize  可以查看引入的插件 大小,如下:

  

  vue-element-sinppets  Vue2.X和element超强代码块。

   Turbo Console Log   快速添加 console.log 信息,js debug 必备,快捷键如下:

    ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log

    alt + shift + c 注释所有 console.log

    alt + shift + u 启用所有 console.log

    alt + shift + d 删除所有 console.log

 

  vscode-json  操作美化 json,快捷键如下: 

    cmd+alt+v,验证

    cmd+alt+b,格式化

    cmd+alt+u,压缩

    cmd+alt+',加转义字符

    cmd+alt+;,去转义字符

三、Git 插件

  Git Blame 可以快速的点击查看最近的提交记录。

  Git Graph 可以在vscode 里面查看 git 提交记录图,如下:

  

  Git History 可以查看提交过的更多的git log。

  GitLens 可以查看某一行代码是谁修改提交的,如下:

  

 

四、css 插件

  Color Info  鼠标悬浮到色值上面可以去选择别的颜色,如下:

  

      

   CSS Peek   查看 css 样式,如下:

  

 

 

五、其他插件

  Image preview  可以在左侧看到引用的图片,如下:

  

  Bracket Pair Colorizer 代码 里面多层括弧({[()]})标识不同的颜色,提高辨识度,如下:

  

  Material Icon Theme vscode 显示各种文件的图标,如下:

  

 

    Guides 代码左侧的竖杠,如下:

  

  indent-rainbow 代码左侧用不同的颜色去标识tabIndex,如下:

  

  Path Intellisense 在代码里面需要引入某个图/文件时,可以提示让用户选择,如下:

  

  Trailing Spaces 高亮的space,如下:

  

     Markdown Preview Enhanced  预览markdown 文件

   Regex Previewer    预览正则效果,如下:

  

 

posted @ 2020-11-26 16:58  艾若菲  阅读(524)  评论(0编辑  收藏  举报