点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
作为前端开发,vscode 好比我们的衣食父母,不可或缺。我相信大家都试过给编译器装一些插件,用来提升开发效率。但是,很多文章介绍的插件都不怎么详细,有些更是毫无卵用,尤其某 N,简直屎里淘金。
这篇文章,我将结合自己的工作经验,向大家推荐我工作中用到的一些插件,我会尽可能详细和全面介绍。如果大家有更好用的插件,欢迎在评论区分享!
必备
中文插件
「Chinese (Simplified)」
VSCode 中文插件,英语很好你当我没说!
![1a83147489b238567a453cb0e1b11373.jpeg](https://img-blog.csdnimg.cn/img_convert/1a83147489b238567a453cb0e1b11373.jpeg)
Vue-Official
以前叫做 Volar,vue 官方提供的插件,能够识别. vue 文件,提供包括代码提示、智能感知、自动补全等功能。
Git Graph
比较好用的 git 管理工具,免费!!!
![4fabcf6efa20c4b1749138c53cff7552.jpeg](https://img-blog.csdnimg.cn/img_convert/4fabcf6efa20c4b1749138c53cff7552.jpeg)
可以方便的查看 git 提交历史
![ce9d9ea6e1c3b0640bb6f5eb420fdf0b.jpeg](https://img-blog.csdnimg.cn/img_convert/ce9d9ea6e1c3b0640bb6f5eb420fdf0b.jpeg)
快捷的实现一些 git 操作
![a5a2232ce044c3ce640d067a83e43cb6.jpeg](https://img-blog.csdnimg.cn/img_convert/a5a2232ce044c3ce640d067a83e43cb6.jpeg)
以前 GitLens 是最好用,但是它现在收费了
Prettier
代码美化用的
![c498c42efa2ea6ceeaa4afab5b206d95.jpeg](https://img-blog.csdnimg.cn/img_convert/c498c42efa2ea6ceeaa4afab5b206d95.jpeg)
ESLint
![2f309bfe072dff9fc03c9f66174f50db.jpeg](https://img-blog.csdnimg.cn/img_convert/2f309bfe072dff9fc03c9f66174f50db.jpeg)
结合本地项目配置的 eslint 发挥作用,会在编译器中把不符合 eslint 规则的代码标红,提醒我们更改。
![1f45bbc1ac8d114b887fac82e167243d.jpeg](https://img-blog.csdnimg.cn/img_convert/1f45bbc1ac8d114b887fac82e167243d.jpeg)
代码提效
中文标点符号转英文
![b41ae4b0697c32b4f8c3f04899aa0680.jpeg](https://img-blog.csdnimg.cn/img_convert/b41ae4b0697c32b4f8c3f04899aa0680.jpeg)
开发中最麻烦的就是频繁的切换输入法,防止代码中混入中文字符。这个插件可以将输入的中文字符迅速转换成英文字符,从此再也不用切换输入法,非常方便!
如图,在中文输入法下,键入的字符自动被转换成了英文字符:
![182bbc0c8548b75cd439ecc91a6602d6.jpeg](https://img-blog.csdnimg.cn/img_convert/182bbc0c8548b75cd439ecc91a6602d6.jpeg)
自动重命名标签
「Auto Rename Tag」
![ee9194256d007decff37e53f15ea39eb.jpeg](https://img-blog.csdnimg.cn/img_convert/ee9194256d007decff37e53f15ea39eb.jpeg)
使用这个插件,当我们更改 html 标签时,与之匹配的结束标签会被自动重命名。
![93182c6d3fb9559971931624ff57319f.jpeg](https://img-blog.csdnimg.cn/img_convert/93182c6d3fb9559971931624ff57319f.jpeg)
单词拼写检查
code spell checker
![347bc933a235f9f21641b4f81ff083f6.jpeg](https://img-blog.csdnimg.cn/img_convert/347bc933a235f9f21641b4f81ff083f6.jpeg)
英语不好同学的福音,能识别出你的错误单词拼写
![594337cebcd721ce74d368909cd62062.jpeg](https://img-blog.csdnimg.cn/img_convert/594337cebcd721ce74d368909cd62062.jpeg)
css 定位
css peek
![8a1f4ed7567a3e9580505f2a273b6f72.jpeg](https://img-blog.csdnimg.cn/img_convert/8a1f4ed7567a3e9580505f2a273b6f72.jpeg)
让你的编译器具备快速找到类名定义位置的功能,使用也非常简单,按住 ctrl,用鼠标点击对应的类名即可
![96f9b98a91c24d6dbaf09136bcaa048c.jpeg](https://img-blog.csdnimg.cn/img_convert/96f9b98a91c24d6dbaf09136bcaa048c.jpeg)
标签高亮匹配
Highlight Matching Tag
console 工具
javascript console utils
![2f52438ca65305f398a360c463f0179c.jpeg](https://img-blog.csdnimg.cn/img_convert/2f52438ca65305f398a360c463f0179c.jpeg)
这是一个可以方便快捷对某个值输出 console 的插件,使用时,选中打印的值,然后 「Cmd+Shift+L 即可」
![3f2ba393eb8d3cfe304880bc67e7855e.jpeg](https://img-blog.csdnimg.cn/img_convert/3f2ba393eb8d3cfe304880bc67e7855e.jpeg)
css 智能命名
IntelliSense for CSS class names in HTML
![1439905f2c1360a8413446e97262d889.jpeg](https://img-blog.csdnimg.cn/img_convert/1439905f2c1360a8413446e97262d889.jpeg)
![317d31ac0b7f10383432c62c41b0e449.jpeg](https://img-blog.csdnimg.cn/img_convert/317d31ac0b7f10383432c62c41b0e449.jpeg)
未使用的 import 移除
Remove Unused Imports
![7c3e4dde9ecc3cb02938c235effc564a.jpeg](https://img-blog.csdnimg.cn/img_convert/7c3e4dde9ecc3cb02938c235effc564a.jpeg)
这个插件的作用很简单,当我们使用 ctrl+shift+p 唤起命令输入框后,选择 Remove Unused Imports 指令后,所有未使用的引用都会被自动删除
![9b7705590ed60fb8b69fb156cfc0a0a6.jpeg](https://img-blog.csdnimg.cn/img_convert/9b7705590ed60fb8b69fb156cfc0a0a6.jpeg)
驼峰翻译助手
![1ae39055a9a965ffe5d5bf1ea72f9b84.jpeg](https://img-blog.csdnimg.cn/img_convert/1ae39055a9a965ffe5d5bf1ea72f9b84.jpeg)
![49367fa54804c064b3adfeb9140be14e.jpeg](https://img-blog.csdnimg.cn/img_convert/49367fa54804c064b3adfeb9140be14e.jpeg)
接口调试工具
「Postcode」
![29907cdf2509275db907fe8025973d52.jpeg](https://img-blog.csdnimg.cn/img_convert/29907cdf2509275db907fe8025973d52.jpeg)
一个简化版的 postman,可以方便的进行接口调试
代码管理
Todo Tree
![44258dc8e704c02a32fe2251a8bedcd8.jpeg](https://img-blog.csdnimg.cn/img_convert/44258dc8e704c02a32fe2251a8bedcd8.jpeg)
这个插件可以非常方便的帮助我们管理代码,我们可以在项目中的任意位置进行一些标记
![522f182d9871320ae90ce234d9e929f7.jpeg](https://img-blog.csdnimg.cn/img_convert/522f182d9871320ae90ce234d9e929f7.jpeg)
标记的颜色可以通过 css 实现自定义,我们只需要按照下面的格式在 VSCode 的 setting.json 文件夹中配置即可
"todo-tree.highlights.customHighlight": {
//todo 需要做的功能
"todo": {
"icon": "alert", //标签样式
"background": "#c9c552", //背景色
"rulerColour": "#c9c552", //外框颜色
"iconColour": "#c9c552" //标签颜色
}, //bug 必须要修复的BUG
"bug": {
"background": "#eb5c5c",
"icon": "bug",
"rulerColour": "#eb5c5c",
"iconColour": "#eb5c5c"
}, //tag 标签
"tag": {
"background": "#38b2f4",
"icon": "tag",
"rulerColour": "#38b2f4",
"iconColour": "#38b2f4",
"rulerLane": "full"
}, //done 已完成
"done": {
"background": "#5eec95",
"icon": "check",
"rulerColour": "#5eec95",
"iconColour": "#5eec95"
}, //mark 标记一下
"mark": {
"background": "#f90",
"icon": "note",
"rulerColour": "#f90",
"iconColour": "#f90"
}
},
标记后,我们可以单击树中的 TODO 将打开文件,并将光标放在包含 TODO 的行上,就可以快速定位到代码
![e58fc1f3680029cf5f9b43104f860dce.jpeg](https://img-blog.csdnimg.cn/img_convert/e58fc1f3680029cf5f9b43104f860dce.jpeg)
project-tree
![cc5baf149fefa0b34519635c826cb92a.jpeg](https://img-blog.csdnimg.cn/img_convert/cc5baf149fefa0b34519635c826cb92a.jpeg)
按 ctrl+shift+p,进入 Project Tree 进入。在 README.md 中生成项目的树状结构。生成的结构类似这样:
![df52fc05e462a825b63f4c132201fd25.jpeg](https://img-blog.csdnimg.cn/img_convert/df52fc05e462a825b63f4c132201fd25.jpeg)
Project Manager
![81379c19505f3e456b992d3627b74ea8.jpeg](https://img-blog.csdnimg.cn/img_convert/81379c19505f3e456b992d3627b74ea8.jpeg)
这是一个非常好用的项目管理插件,没有之一!使用这个插件,可以将本地所有的项目进行管理,进行编组、做标记等等,并且能够实现一键切换项目的功能,让项目管理变得超级方便!
这是一个值得单出一篇文章详细介绍的插件!强烈推荐大家使用!
代码美化
彩虹缩进
Indent-Rainbow
![158a82701360a95854a5f803046841ea.jpeg](https://img-blog.csdnimg.cn/img_convert/158a82701360a95854a5f803046841ea.jpeg)
这个插件会让我们的代码文本前面的缩进着色,能够让代码的层级非常清晰~
![ab5e869e563bd62b0edb64fe895ef6b7.jpeg](https://img-blog.csdnimg.cn/img_convert/ab5e869e563bd62b0edb64fe895ef6b7.jpeg)
Better Comments
![a9b179d15c604ddfa068ec059ab12530.jpeg](https://img-blog.csdnimg.cn/img_convert/a9b179d15c604ddfa068ec059ab12530.jpeg)
使用这个插件,可以让我们代码中的注释五颜六色,方便辨识
![b52ef2159451c2ef977f0d4fe937aad9.jpeg](https://img-blog.csdnimg.cn/img_convert/b52ef2159451c2ef977f0d4fe937aad9.jpeg)
特殊符号和颜色之间的关系完全采用 css 定义,我们只需要在 vscode 的 setting.json 中写法类似的配置即可
// -----------------------------------------------------------更好的注释插件
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "#",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": ">",
"color": "#246fe5",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "*",
"color": "#00a2a7",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "&",
"color": "#5eec95",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
颜色高亮
Color Highlight
![095e5196d4012c36bdb7b90f190ab05a.jpeg](https://img-blog.csdnimg.cn/img_convert/095e5196d4012c36bdb7b90f190ab05a.jpeg)
根据色值显示代码中颜色编码,看起来非常直观
![6de82609a31c2c64a5882d1b31cf2005.jpeg](https://img-blog.csdnimg.cn/img_convert/6de82609a31c2c64a5882d1b31cf2005.jpeg)
![3a829b532a968263ea7427ac03bac56b.jpeg](https://img-blog.csdnimg.cn/img_convert/3a829b532a968263ea7427ac03bac56b.jpeg)
图片预览
Image preview
![f17f01fe252754c3d0c8fb32fc9a0e7f.jpeg](https://img-blog.csdnimg.cn/img_convert/f17f01fe252754c3d0c8fb32fc9a0e7f.jpeg)
当我们的项目中引入一个图片时,在编译的一侧会展示出这个图片的预览效果,当我们鼠标移动到这个链接上面时,也会显示这个图片。
![59735b8f9986c9dd1f42902d9fcae236.jpeg](https://img-blog.csdnimg.cn/img_convert/59735b8f9986c9dd1f42902d9fcae236.jpeg)
评论区收集
异常提示
来自 juejin.cn/user/359725…[5] 大佬推荐。
![d49afc84dd4d86ec29db7eeec6361a5c.jpeg](https://img-blog.csdnimg.cn/img_convert/d49afc84dd4d86ec29db7eeec6361a5c.jpeg)
![6119049c2aaf3d6e154647dca7e46efe.jpeg](https://img-blog.csdnimg.cn/img_convert/6119049c2aaf3d6e154647dca7e46efe.jpeg)
可以高亮显示代码中的错误、警告信息,帮助我们在开发中更快捷的发现错误问题。
![0b238bc4cca2ca8e32cbcf3e04d38460.jpeg](https://img-blog.csdnimg.cn/img_convert/0b238bc4cca2ca8e32cbcf3e04d38460.jpeg)
代码截图工具
来自 juejin.cn/user/306949…[6] 大佬推荐。
![b9e4f8c890446b322b0d29308adee243.jpeg](https://img-blog.csdnimg.cn/img_convert/b9e4f8c890446b322b0d29308adee243.jpeg)
CodeSnap
![95fa4c98221091cb3c7662bb58453bc9.jpeg](https://img-blog.csdnimg.cn/img_convert/95fa4c98221091cb3c7662bb58453bc9.jpeg)
这个插件能截图出很漂亮的代码片段
![6868dc608e3ed6f3962119ad34965576.jpeg](https://img-blog.csdnimg.cn/img_convert/6868dc608e3ed6f3962119ad34965576.jpeg)
但我个人感觉用处不大,因人而异吧。
我觉得程序员最好用的截图工具应该是 Snipaste。这不是一个插件,而是一个应用程序。
![629aaafc5d17eb18ea35419aeae8a7bd.jpeg](https://img-blog.csdnimg.cn/img_convert/629aaafc5d17eb18ea35419aeae8a7bd.jpeg)
这个截图工具最方便的地方就是可以把截图的内容钉在页面上,一遍写代码,一遍看 UX 非常爽,再也不用频繁切换页面了!
![4852f96c08ce9f7d39889095ec6f2564.jpeg](https://img-blog.csdnimg.cn/img_convert/4852f96c08ce9f7d39889095ec6f2564.jpeg)
往期推荐
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
点个在看支持我吧