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 预览正则效果,如下: