话痨版vscode插件安利(不止安利还有教程)

前言

作为一个非常容易吃别人安利的人,我的vscode上安装了一大堆插件,前几天突然想给自己的vscode插件做一次断舍离,搞清楚自己装的插件到底都有什么功能,有用的留下,没用的卸载。在这一过程中我仔细阅读了每个插件的说明文档,并选择性记录下了所有对自己有用的功能。文档整理好后,我突然想到, 可能有很多开发者和我一样是个英语废柴,平时没有耐心去仔细阅读文档,对自己平时使用的插件到底有哪些好用的功能并不清楚,所以决定把我自己的文档整理整理,发出来供大家一起学习。不过也正因为这篇文章是基于我自己的笔记整理而来,所以并不会把每个插件的所有功能一个不落的罗列出来,只会列出从我个人的角度来说,目前对我有用或我自己未来有意向使用的功能。

所以本文既是一篇插件安利文档,又是一篇插件使用说明文档,希望能对大家有所帮助,只要能帮助到一个人,这篇文章就没有白写啦~!

废话不多说,我将自己用过且正在使用的插件分为两类介绍给大家:

提高开发效率的插件

CSS Peek

功能概述

无需手动寻找、切换文件,直接在html处自动跳转至指定class、id对应的css代码编辑处,或查看指定组件、函数、样式的定义。

使用体验

偶尔会定位功能失效或定位到错误位置(比如本来是a路径下的file.css,结果定位到了b路径下的file.css),但大多数情况下定位功能还是正常且好用的,是我目前项目开发中的常用插件。

使用方法

  1. 通过class、id快速定位/切换至对应的css代码处:ctrl + 点击指定class/id,就会出现css视图弹窗(如下图),在该弹窗中可直接编辑css代码,也可以双击弹窗跳转至对应css文件。

    话痨版vscode插件安利(不止安利还有教程)

  2. 快速查看子组件/函数/样式的定义: ctrl + 鼠标悬浮至目标处

    • 子组件定义

      能直接看到子组件的props传参和对外暴露的对象

      话痨版vscode插件安利(不止安利还有教程)

    • 函数定义

      能直接看到函数的实现代码

      话痨版vscode插件安利(不止安利还有教程)

    • css定义

      这就不用多说了

      话痨版vscode插件安利(不止安利还有教程)

Eslint

功能概述

实时校验代码是否符合项目中配置的eslint规范,并帮助开发者快速修正不合规范的代码

使用体验

这个插件估计大部分开发者都有安装,但是快速修正功能并不是每个开发者都知道怎么配置的,比如我这个小垃圾,有很长一段时间都是手动一行行去修改不合规范的代码(是的,我真是蠢爆了〒▽〒)

使用方法

想要实时校验代码的合规性,只需要下载插件,并在你的项目中配置好eslint规范就好了。

想要快速修正不合规代码,则需要在vscode配置文件中增加如下配置项

"eslint.format.enable": true, // 开启eslint的自动修正代码功能
"editor.defaultFormatter": "dbaeumer.vscode-eslint", // 指定vscode默认的代码修正工具为eslint
  1. 修正当前文件: Alt + Shift + F
  2. 每次保存时自动修正所保存的代码: 在vscode配置文件中增加"editor.codeActionsOnSave": { "source.fixAll.eslint": true }配置项即可
  3. 修正当前项目中的所有不合规代码: 调出vscode的指令面板后,执行Fix all auto-fixable problems指令
  4. Eslint插件只会校验你编辑过的文件,即如果你没编辑过这个文件,esllint是不会去校验这些文件是否符合代码规范的。如果你想让Eslint校验项目中的所有文件,需要在vscode配置文件中增加配置项: "eslint.lintTask.enable": true

Stylelint

功能概述

实时校验css代码是否符合项目中配置的stylelint规范,并帮助开发者快速修正不合规范的代码

使用体验

和Eslint一样,应该也是大部分开发者早就安装过的插件,但可能有些开发者并没有充分使用该插件所提供的功能。

使用方法

  1. 想要实时校验代码的合规性,只需要下载插件,并在你的项目中配置好stylelint规范就好了。
  2. 想要每次保存时自动修正所保存的代码,需要在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

话痨版vscode插件安利(不止安利还有教程)

Vue VSCode Snippets

功能概述

快速生成vue代码片段

使用体验

这个插件也是我的开发常用插件,它支持很多代码片段的生成,但我懒得记那么多指令,用的最多最频繁的就是vbase-3-ts-setup,快速生成支持Typescript的组件片段(如下图)。

话痨版vscode插件安利(不止安利还有教程)

使用方法

安装插件后,直接在你想插入vue片段的地方输入对应指令,再按一下Enter键即可。

关于该插件都支持哪些片段的生成,以及对应的指令都是什么,可以查看插件的说明文档。它的说明文档还是比较简单易懂的,基本上就是一个指令&片段说明表格,我就不列在这里了。

提高开发体验的插件

Console Ninja

功能概述

通过该插件,可以让我们在vscode中直接看到console代码的输出结果,无需转至浏览器控制台查看

使用体验

  1. 不用来回切换vscode & 浏览器窗口,在vscode中可以直接看到console结果,一方面简化了调试流程,一方面在我们需要一边对照console结果,一边编辑代码的开发场景下,开发体验显著up。

  2. 通过下图可以看到,该插件对console结果的格式化效果要比浏览器控制台好

    话痨版vscode插件安利(不止安利还有教程)

  3. 该插件有时好用有时罢工,当下时刻能不能用全凭缘分。不要和它硬杠,想着我一定要修好它(站在自己的血泪史上给大家这个建议)

使用方法

本插件支持三种console指令的输出:console.logconsole.traceconsole.time

安装插件后启动你的项目,触发相应的console代码后就可以实时查看输出结果

输出结果支持两种查看方式:

  • 行内查看

    话痨版vscode插件安利(不止安利还有教程)

    此时鼠标若悬浮在log输出结果上,还可以复制log和打开log viewer查看log详情

    话痨版vscode插件安利(不止安利还有教程)

  • 在log viewer中查看

    话痨版vscode插件安利(不止安利还有教程)

GitLens

功能概述

供开发者快速查看当前项目的分支,暂存区(stash)记录,以及各个文件的commit log

使用体验

该插件我主要拿来作为分支、暂存区记录以及commit log的查看工具,使用体验还是很好的。其实插件本身也提供分支、暂存区记录等的切换,远程push等功能。但是我不太喜欢用,git相关的功能还是用命令行手敲能让我更有安全感一些。用插件一是我对所有开发者的代码都抱有怀疑态度,担心插件本身的某些bug会对使我的git操作发生一些难以预料的意外。二是工具的便捷性会让我没有足够的反应时间,鼠标一点git操作就执行完了,想后悔都来不及(命令行执行的话毕竟还是要敲一些代码的,有几秒钟的反应时间)。

使用方法

  1. 直观的看到每行代码的最新commit记录:鼠标焦点在哪行,就显示哪行代码的最新commit log

    话痨版vscode插件安利(不止安利还有教程)

  2. 总览当前文件每行代码的最新commit log:点击vscode右上角的图标,选择Toogle File Blame

    话痨版vscode插件安利(不止安利还有教程)
    话痨版vscode插件安利(不止安利还有教程)

    话痨版vscode插件安利(不止安利还有教程)

  3. 查看当前文件相邻commit的代码对比结果:点击右上角圈红按钮,即可直接看到当前文件与上一次commit的对比记录,再点一次可以看到上一次与上上次commit的对比记录,依此类推,可以一直往前翻。

    话痨版vscode插件安利(不止安利还有教程)

  4. 对比任意两个分支或tag的代码:选择左栏GitLens选项卡中的File History —— 展开”SEARCH & COMPARE”面板,选择两个tag或分支,就可以获取两版代码的不同之处了

    话痨版vscode插件安利(不止安利还有教程)
    话痨版vscode插件安利(不止安利还有教程)
    话痨版vscode插件安利(不止安利还有教程)

  5. 查看当前项目的分支、暂存区(stash)记录、以及参与项目的开发人员: 选择左栏GitLens选项卡中的Commits

    话痨版vscode插件安利(不止安利还有教程)

git-commit-plugin

功能概述

按照指定规范生成commit msg,并commit代码

使用体验

我之所以喜欢用这个插件,有以下个原因:

  1. 这个插件commit msg有emoji符号哎(✪ω✪),当然这个理由很肤浅我知道,但我超爱
  2. 能够规范自己的commit msg格式

使用方法

点击红圈处按钮,即可调出commit message编辑界面,选择你此次的commit type, 再选择性填写你想要输入的部分(我一般都只填Subject,如果想详细描述的时候会再填一下Detail)

话痨版vscode插件安利(不止安利还有教程)

话痨版vscode插件安利(不止安利还有教程)
话痨版vscode插件安利(不止安利还有教程)

然后就能生成下图这样的commit message了

话痨版vscode插件安利(不止安利还有教程)

CodeSnap

功能概述

帮你快速生成好看的代码截图

使用体验

这个也是我最近刚安装的插件,感觉可以用来写博客、或者和别人交流讨论代码时候使用。

使用方法

调出vscode指令面板,执行CodeSnap指令,然后选中你想要截取的代码,此时在右侧窗口就会同步生成所选中代码的截图。

话痨版vscode插件安利(不止安利还有教程)

CodeSnap提供两种方式让我们保存截图:

  1. 将截图保存到本地: 点击截图上方的CodeSnap logo
  2. 将截图复制到剪贴板: ctrl + c直接复制即可

最后说点什么

以上就是我向大家安利和介绍的所有插件啦~!既然我们安装了它们,那就搞清楚它们能提供给我们的功能,把效用发挥到最大吧~祝大家每天都有开开心心心的开发体验。如果这篇文章有帮助到你,就点个赞吧(不点也没关系,哭泣脸)。

原文链接:https://juejin.cn/post/7256176612197744698 作者:古达星球

(0)
上一篇 2023年7月16日 上午10:00
下一篇 2023年7月17日 上午10:06

相关推荐

发表回复

登录后才能评论