跳转到内容
View in the app

A better way to browse. Learn more.

彼岸论坛

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[分享创造] 一款使用了 7 种设计模式实现的类似 GoLand “复制引用”功能的 vscode 插件

发表于

一款能让你在 vscode 中复制当前文件路径以及光标所在位置的插件,就像在 GoLand 中使用“复制引用”功能一样,但是功能更丰富;

众所周知,vscode 默认只支持复制文件的绝对路径和相对路径,并不原生支持复制光标所在行号;这在一些场景下并不方便,比如和同事分享定位到的 bug 所在位置时,只能全选代码行,然后让同事通过全局搜索来定位;

"copy-path-with-line-number" 插件旨在解决该问题,它支持以下功能:

  • 支持复制当前文件路径 + 光标所在位置或者选中的多个代码行范围,功能丰富多样;
  • 支持通过上下文菜单、快捷键、命令面板来触发复制,方便快捷 & 节约生命;
  • 支持复制成功后消息通知,安心可靠,减少无用功,避免粘贴时才发现没有复制成功的情况;当然也可以设置为不通知,静默工作;
  • 支持自定义路径分隔符,支持斜杠、反斜杠和系统默认;
  • 支持自定义选中行范围连接符,支持连字符和波浪符;
  • 支持自定义选中行范围分隔符,支持空格、分号和逗号;
  • 菜单、配置均支持中文和英文;
  • 免费 & 开源;

赶快下载安装体验吧~ 认准:"copy-path-with-line-number" !

功能介绍完毕后,还想聊一聊代码实现;该插件经过三次功能迭代:

  1. 支持核心功能:复制路径 + 当前光标所在行;
  2. 支持复制多个选中范围;
  3. 支持自定义符号以及中英文 UI ;

插件的开发并非一蹴而就,而是循序渐进,逐步完善,不仅仅功能如此,其代码结构也是如此,每一次所面临的代码设计问题都有所不同:

  1. 第一版需要的是实现功能,是让插件跑起来,毕竟是第一次开发 vscode 插件;
  2. 第二版需要的是拆分职责:文件路径、行范围信息的获取;只有先拆分,才能独立变化,不然每次都修改一个很大的方法,也太不符合“开闭原则”了;
  3. 第三版需要的是精细化,将获取信息和组装信息拆分,从而可以控制修改的范围,满足扩展; 因为问题不同,所以解决问题的方法和角度也就不同;因为有持续迭代的需要,才显得设计如此重要;这个过程是一个打碎、重建、再打碎、再重建的过程,直到令人满意;而这个过程中,对设计模式也有了更进一步的理解;

在这个小小的插件中,共使用到 7 种设计模式,所谓麻雀虽小,五脏俱全:

  1. 单例模式:负责获取路径的对象,并不需要什么状态,没必要每次复制都创建新的对象,一个就好;
  2. 命令模式:执行各种复制命令:(绝对路径,相对路径) x (需要行信息,不需要行信息),一共四种场景,创建四个命令对象就好;
  3. 工厂方法:获取路径解析对象时,通过传入是否需要“绝对路径”来返回不同的对象——当然,它们实现了相同的接口,毕竟都是获取一个路径而已;
  4. 抽象工厂方法:返回一个抽象的策略工厂,该工厂负责对外提供具体的策略对象:要么全都是默认配置,要么支持读取自定义配置。如果需要,也可以组合一下:比如 vip 1 可以自定义 1 个配置,svip 可以自定义全部的配置(得加钱);
  5. 门面模式:于注册到 vscode 中的方法而言,没必要感知过多的细节,只需要获取到要写入粘贴板的内容即可,所有的细节通过门面模式隐藏在单一方法的背后;(或者说,正是因为所有细节都隐藏在单一方法背后,才说这里使用到了门面模式。)
  6. 装饰者模式:使用来自策略对象提供的符号对获取到路径和行范围信息进行装饰,使自定义配置生效;
  7. 策略模式;封装获取连接符、分隔符等符号的逻辑;于调用者而言,只是获取到一个符号,并不关心是默认配置还是自定义配置,以及如何读取配置等细节;

最后,希望您对该插件感兴趣,也希望该插件能帮助到您;

另附仓库地址: https://github.com/qishan233/copy-path-with-line-number

Featured Replies

No posts to show

创建帐户或登录来提出意见

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.