魔改了一款vscode插件，女神竟然主动请我吃饭🚨“魔改了一款 VS Code 插件，没想到女神请我吃饭？”——这竟

作为一名前端程序员，写插件本来只是为了省点时间，结果一个小改动竟然收获了意想不到的“回报”？今天就来聊聊我如何魔改了一个 Vue 2 项目中常用的 VS Code 插件 vue-helper，不仅解决了痛点问题，还意外获得了“赏饭机会”！

前言

事情是这样的——公司项目还在用 Vue 2，大家都用 vue-helper 插件。某天我顺手魔改了一下插件，把 Element UI 的文档地址替换成新版的……本来只是为了自己用着爽，结果整个组都说我“救苦救难”。最没想到的是，女神居然说：“下次请你吃饭！”

虽然现在已经是2025年了，vue都已经更新了3.5.17，但公司很多项目还是基于vue2,维护vue2项目当然离不开一款很流行的插件vue-helper

vue-helper的使用就不用多说了，693k的下载量，为我们开发提供了很大的便利。

但是总有一个问题让我困扰，那就是element-ui的文档指向的是旧版国际地址，网络不好打开还是很慢。

最新版的也没加入自定义配置

最近也在学习vscode插件开发，回头来看看，这个功能就不难了。

这里引入gpt的知识库

VS Code 插件中添加 自定义配置项（settings） 是非常常见的做法，用于让用户在设置页修改你的插件行为。

✅ 示例：如何为插件添加自定义配置

📦 第一步：在 package.json 中添加 contributes.configuration

{
  "contributes": {
    "configuration": {
      "title": "MyPlugin 插件配置",
      "properties": {
        "myPlugin.enableFeatureX": {
          "type": "boolean",
          "default": true,
          "description": "是否启用 FeatureX 功能"
        },
        "myPlugin.defaultUrl": {
          "type": "string",
          "default": "https://www.baidu.com",
          "description": "欢迎页跳转的默认地址"
        },
        "myPlugin.mode": {
          "type": "string",
          "enum": ["algorithm", "model", "none"],
          "default": "algorithm",
          "description": "默认启动模式"
        }
      }
    }
  }
}

🧩 第二步：在插件中读取配置

在 extension.ts 中：

const config = vscode.workspace.getConfiguration('myPlugin');

// 读取配置项
const enableFeatureX = config.get<boolean>('enableFeatureX');
const defaultUrl = config.get<string>('defaultUrl');
const mode = config.get<string>('mode');

console.log('插件配置：', { enableFeatureX, defaultUrl, mode });

🛠️ 第三步：打开设置页跳转配置项（可用于欢迎页按钮）

你可以在按钮中用链接：

[⚙️ 打开插件设置](command:workbench.action.openSettings?%22myPlugin%22)

或者在代码中打开设置页：

vscode.commands.executeCommand('workbench.action.openSettings', 'myPlugin');

📘 配置类型支持

类型	示例
boolean	`true`, `false`
string	`"abc"`
number	`1`, `0.5`
enum	`["a", "b", "c"]`
object（进阶）	`{ type: "object", properties: { ... } }`

正式改造开始

首先fork 官方的仓库，由于新版加了太多功能，基于f26bd8ee(2.5.0)版本进行自定义改造

git checkout f26bd8ee

代码分析

可以看到，原作者在这里使用了docUrl全局变量，只需要将它可配置式就大功告成，这样内网部署一份文档也可以支持插件跳转了

改造正式开始

增加默认文档地址配置

在package.json下增加vue-helper.elementDocUrl 和vue-helper.elementPlusDocUrl

 "configuration": {
      "title": "vue-helper",
      "type": "object",
      "properties": {
        "vue-helper.use-vue-snippets": {
          "type": "boolean",
          "default": true
        },
+        "vue-helper.elementDocUrl": {
+          "type": "string",
+          "default": "https://element.eleme.cn",
+          "description": "elementUi 文档地址 "
+        },
+        "vue-helper.elementPlusDocUrl": {
+          "type": "string",
+          "default": "https://cn.element-plus.org",
+          "description": "elementPlusDocUrl文档地址 "
         }

获取自定义配置

element-ui修改src\frameworks\element-ui\document.ts

-const docUrl = 'http://element.eleme.io'
+import { workspace } from 'vscode'
 
+const docUrl = workspace.getConfiguration().get('vue-helper.elementDocUrl') || 'http://element.elemezz.io'

顺便把elementplus也改下src\frameworks\element-plus\document.ts


 import { l10n } from "vscode"
 
-const docUrl = 'https://element-plus.org'
+import { workspace } from 'vscode'
+const docUrl = workspace.getConfiguration().get('vue-helper.elementPlusDocUrl') || 'https://element-plus.org'