制作 VSCode 插件

先看下我的插件

插件代码在 https://github.com/fananchong2016/log-viewer

your-first-extension 起了个开头,剩余都是 AI 编写代码完成的

即该插件 98% 代码是 AI 写的

效果如下:

官方帮助文档

your-first-extension 是官方的 hello world 插件例子

我卡在这里很久,按 F5 插件运行失败,然后没有提示为什么失败(包括问 AI)

vscode-extension-samples 是官方的插件例子

然后,我发现 vscode-extension-samples 里的例子居然能正常运行

因此仔细对比了下,自动生成的和官方的例子的 package.json,发现自动生成的 package.json 里的:

json 复制代码
"engines": {
    "vscode": "^1.74.0"
  },

json 复制代码
  "devDependencies": {
    "@types/vscode": "^1.74.0",
  },

2 个 vscode 版本是不一样的,于是我把 2 个版本都改成 vscode-extension-samples 里的 "^1.74.0" ,hello world 终于可以正常出来了( 版本一致就行,可以不是 "^1.74.0" 。 "^1.74.0" 是最低版本 )

WebView

做 vscode 使用 WebView 控件来做插件是最合适的。但是这步也卡了很久, WebView 加载不出来(包括问 AI)

还是看 vscode-extension-samples ,在例子里搜 WebView 用到的,比对了下 package.json 发现, AI 添加的 view 注册,少了"type": "webview", ,然后死活 WebView 控件显示不出来

json 复制代码
    "views": {
      "clientLogViewerContainer": [
        {
          "type": "webview",
          "id": "logViewerClientView",
          "name": "Client Logs",
          "icon": "media/log-icon.svg"
        }
      ],
      "serverLogViewerContainer": [
        {
          "type": "webview",
          "id": "logViewerServerView",
          "name": "Server Logs",
          "icon": "media/log-icon.svg"
        }
      ]
    },

其他

AI 确实是程序员的一大利器,特别是未知知识领域。可以给程序员提供靠谱的实现方案(当然细节还是有些惨不忍睹)

相关推荐
Aevget1 小时前
「Java EE开发指南」如何用MyEclipse开发Java EE企业应用程序?(二)
java·ide·java-ee·开发·myeclipse
luckys.one2 小时前
第12篇|[特殊字符] Freqtrade 交易所接入全解:API、WebSocket、限频配置详解
网络·ide·python·websocket·网络协议·flask·流量运营
T - mars3 小时前
Pycharm中使用git
ide·git·pycharm
DreamNotOver4 小时前
将 Jupyter Notebook 转换为 PDF
ide·jupyter·pdf
北冥有鱼被烹5 小时前
【微知】vscode如何自动换行?(Option + Z)
vscode·编辑器
Zewen PAN8 小时前
新手 Visual Studio 环境配置 详解
c++·ide·visual studio
象骑士Hack9 小时前
《RStudio》软件下载_《RStudio》安装包下载_《RStudio》安装教程下载_《RStudio》网盘下载
编辑器
SEO-狼术10 小时前
FastReport VCL v2025
ide
create1710 小时前
IntelliJ IDEA 等软件如何与 AI 编程工具(Cursor、Windsurf、Qoder等)实现互相跳转
java·ide·人工智能·intellij-idea
JANGHIGH12 小时前
VSCode编译器测试yolo环境配置
ide·vscode·yolo