前言
作为一个非常容易吃别人安利的人,我的vscode上安装了一大堆插件,前几天突然想给自己的vscode插件做一次断舍离,搞清楚自己装的插件到底都有什么功能,有用的留下,没用的卸载。在这一过程中我仔细阅读了每个插件的说明文档,并选择性记录下了所有对自己有用的功能。文档整理好后,我突然想到, 可能有很多开发者和我一样是个英语废柴,平时没有耐心去仔细阅读文档,对自己平时使用的插件到底有哪些好用的功能并不清楚,所以决定把我自己的文档整理整理,发出来供大家一起学习。不过也正因为这篇文章是基于我自己的笔记整理而来,所以并不会把每个插件的所有功能一个不落的罗列出来,只会列出从我个人的角度来说,目前对我有用或我自己未来有意向使用的功能。
所以本文既是一篇插件安利文档,又是一篇插件使用说明文档,希望能对大家有所帮助,只要能帮助到一个人,这篇文章就没有白写啦~!
废话不多说,我将自己用过且正在使用的插件分为两类介绍给大家:
提高开发效率的插件
CSS Peek
功能概述
无需手动寻找、切换文件,直接在html处自动跳转至指定class、id对应的css代码编辑处,或查看指定组件、函数、样式的定义。
使用体验
偶尔会定位功能失效或定位到错误位置(比如本来是a路径下的file.css,结果定位到了b路径下的file.css),但大多数情况下定位功能还是正常且好用的,是我目前项目开发中的常用插件。
使用方法
-
通过class、id快速定位/切换至对应的css代码处:
ctrl
+ 点击指定class/id,就会出现css视图弹窗(如下图),在该弹窗中可直接编辑css代码,也可以双击弹窗跳转至对应css文件。 -
快速查看子组件/函数/样式的定义:
ctrl
+ 鼠标悬浮至目标处-
子组件定义
能直接看到子组件的props传参和对外暴露的对象
-
函数定义
能直接看到函数的实现代码
-
css定义
这就不用多说了
-
Eslint
功能概述
实时校验代码是否符合项目中配置的eslint规范,并帮助开发者快速修正不合规范的代码
使用体验
这个插件估计大部分开发者都有安装,但是快速修正功能并不是每个开发者都知道怎么配置的,比如我这个小垃圾,有很长一段时间都是手动一行行去修改不合规范的代码(是的,我真是蠢爆了〒▽〒)
使用方法
想要实时校验代码的合规性,只需要下载插件,并在你的项目中配置好eslint规范就好了。
想要快速修正不合规代码,则需要在vscode配置文件中增加如下配置项
"eslint.format.enable": true, // 开启eslint的自动修正代码功能
"editor.defaultFormatter": "dbaeumer.vscode-eslint", // 指定vscode默认的代码修正工具为eslint
- 修正当前文件:
Alt
+Shift
+F
- 每次保存时自动修正所保存的代码: 在vscode配置文件中增加
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
配置项即可 - 修正当前项目中的所有不合规代码: 调出vscode的指令面板后,执行
Fix all auto-fixable problems
指令 - Eslint插件只会校验你编辑过的文件,即如果你没编辑过这个文件,esllint是不会去校验这些文件是否符合代码规范的。如果你想让Eslint校验项目中的所有文件,需要在vscode配置文件中增加配置项:
"eslint.lintTask.enable": true
Stylelint
功能概述
实时校验css代码是否符合项目中配置的stylelint规范,并帮助开发者快速修正不合规范的代码
使用体验
和Eslint一样,应该也是大部分开发者早就安装过的插件,但可能有些开发者并没有充分使用该插件所提供的功能。
使用方法
- 想要实时校验代码的合规性,只需要下载插件,并在你的项目中配置好stylelint规范就好了。
- 想要每次保存时自动修正所保存的代码,需要在vscode配置文件中增加如下配置项:
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
3. 一次性修正当前项目中所有校验不合规的css代码:调出vscode指令面板,并执行Fix all auto-fixable problems
指令
Paste JSON as Code
功能概述
根据JSON快速生成Typescript类型定义代码
使用体验
这个是我刚安装的插件,还没有真正使用。不过之前写类型定义我都是手敲的,感觉用上这个插件之后应该能帮自己省很多力,至少后端返回的数据定义我不用全手敲了。期待ing
使用方法
方法一:copy JSON到一个空文件中,调出vscode指令面板,执行Open quicktype for JSON
指令
方法二:copy JSON到剪贴板,在你想要生成类型定义代码的位置获取焦点,调出vscode指令面板,执行Paste JSON as code/types
Vue VSCode Snippets
功能概述
快速生成vue代码片段
使用体验
这个插件也是我的开发常用插件,它支持很多代码片段的生成,但我懒得记那么多指令,用的最多最频繁的就是vbase-3-ts-setup
,快速生成支持Typescript的组件片段(如下图)。
使用方法
安装插件后,直接在你想插入vue片段的地方输入对应指令,再按一下Enter键即可。
关于该插件都支持哪些片段的生成,以及对应的指令都是什么,可以查看插件的说明文档。它的说明文档还是比较简单易懂的,基本上就是一个指令&片段说明表格,我就不列在这里了。
提高开发体验的插件
Console Ninja
功能概述
通过该插件,可以让我们在vscode中直接看到console
代码的输出结果,无需转至浏览器控制台查看
使用体验
-
不用来回切换vscode & 浏览器窗口,在vscode中可以直接看到console结果,一方面简化了调试流程,一方面在我们需要一边对照console结果,一边编辑代码的开发场景下,开发体验显著up。
-
通过下图可以看到,该插件对console结果的格式化效果要比浏览器控制台好
-
该插件有时好用有时罢工,当下时刻能不能用全凭缘分。不要和它硬杠,想着我一定要修好它(站在自己的血泪史上给大家这个建议)
使用方法
本插件支持三种console指令的输出:console.log
、console.trace
、console.time
安装插件后启动你的项目,触发相应的console
代码后就可以实时查看输出结果
输出结果支持两种查看方式:
-
行内查看
此时鼠标若悬浮在log输出结果上,还可以复制log和打开log viewer查看log详情
在log viewer中查看
GitLens
功能概述
供开发者快速查看当前项目的分支,暂存区(stash)记录,以及各个文件的commit log
使用体验
该插件我主要拿来作为分支、暂存区记录以及commit log的查看工具,使用体验还是很好的。其实插件本身也提供分支、暂存区记录等的切换,远程push等功能。但是我不太喜欢用,git相关的功能还是用命令行手敲能让我更有安全感一些。用插件一是我对所有开发者的代码都抱有怀疑态度,担心插件本身的某些bug会对使我的git操作发生一些难以预料的意外。二是工具的便捷性会让我没有足够的反应时间,鼠标一点git操作就执行完了,想后悔都来不及(命令行执行的话毕竟还是要敲一些代码的,有几秒钟的反应时间)。
使用方法
-
直观的看到每行代码的最新commit记录:鼠标焦点在哪行,就显示哪行代码的最新commit log
-
总览当前文件每行代码的最新commit log:点击vscode右上角的图标,选择Toogle File Blame
-
查看当前文件相邻commit的代码对比结果:点击右上角圈红按钮,即可直接看到当前文件与上一次commit的对比记录,再点一次可以看到上一次与上上次commit的对比记录,依此类推,可以一直往前翻。
-
对比任意两个分支或tag的代码:选择左栏GitLens选项卡中的File History —— 展开”SEARCH & COMPARE”面板,选择两个tag或分支,就可以获取两版代码的不同之处了
查看当前项目的分支、暂存区(stash)记录、以及参与项目的开发人员: 选择左栏GitLens选项卡中的Commits
git-commit-plugin
功能概述
按照指定规范生成commit msg,并commit代码
使用体验
我之所以喜欢用这个插件,有以下个原因:
- 这个插件commit msg有emoji符号哎(✪ω✪),当然这个理由很肤浅我知道,但我超爱
- 能够规范自己的commit msg格式
使用方法
点击红圈处按钮,即可调出commit message编辑界面,选择你此次的commit type, 再选择性填写你想要输入的部分(我一般都只填Subject,如果想详细描述的时候会再填一下Detail)
然后就能生成下图这样的commit message了
CodeSnap
功能概述
帮你快速生成好看的代码截图
使用体验
这个也是我最近刚安装的插件,感觉可以用来写博客、或者和别人交流讨论代码时候使用。
使用方法
调出vscode指令面板,执行CodeSnap
指令,然后选中你想要截取的代码,此时在右侧窗口就会同步生成所选中代码的截图。
CodeSnap提供两种方式让我们保存截图:
- 将截图保存到本地: 点击截图上方的CodeSnap logo
- 将截图复制到剪贴板:
ctrl
+c
直接复制即可
最后说点什么
以上就是我向大家安利和介绍的所有插件啦~!既然我们安装了它们,那就搞清楚它们能提供给我们的功能,把效用发挥到最大吧~祝大家每天都有开开心心心的开发体验。如果这篇文章有帮助到你,就点个赞吧(不点也没关系,哭泣脸)。
原文链接:https://juejin.cn/post/7256176612197744698 作者:古达星球