知乎vscode插件修改和重新编译
本文为作者原创,转载请注明出处:https://www.cnblogs.com/zhaoqingqing/p/14823179.html
需求来源#
vscode插件修改代码要怎样重新编译并安装到vscode中?
起源于我使用一个vscode插件,它可以在vscode中发布文章到知乎上,然后我修改了插件的部分源代码,希望在vscode中安装我修改后的版本,今天花了1个多小时解决了我自己的这个需求,这里记录一下笔记,本篇的方法同样适用于修改和编译vscode的任意插件。
安装依赖#
vscode是使用typescript开发,需要安装nodejs,建议把npm的源切到国内:npm config set registry https://registry.npm.taobao.org/
git clone 源代码之后,需要全局安装webpack和webpack-cl,并配置环境变量 ,然后再源代码的目录执行 npm install
环境变量中新增加NODE_PATH,内容:C:\Users\qing\AppData\Roaming\npm\node_modules
环境变量Path字段,增加:C:\Users\qing\AppData\Roaming\npm
PS E:\Code\VSCode-Zhihu> npm install
26 packages are looking for funding
run `npm fund` for details
脚本修改#
按照自己的需求修改ts代码,然后就可以调试插件了。
获取vscode当前打开的文件名,并填充到输入框做为默认值:(这里拿到的是完整的路径)
return vscode.window.showInputBox({
value:vscode.window.activeTextEditor.document.fileName,
ignoreFocusOut: true,
prompt: "输入标题:",
placeHolder: "",
});
作者在CONTRIBUTING.md有提到在编译时需要注释/node_modules/uglify-js/tools/node.js
:中的一部分代码否则会编译失败,照做就好了。
调试插件#
在源代码根目录执行npm run develop
,会在dist目录下生成这两个文件,然后在调试期间不要这个CDM窗口,当修改ts后,会自动编译。
- extension.js.map
- extension.js
点击vscode左侧面板中的 Debug(运行和调试) - Launch Extension,就会启动一个vscode新窗口,新窗口中安装了你此次插件。
把代码生成VSIX安装包#
代码调试通过之后就需要生成插件安装包,方便自己下次安装,或者发给朋友安装使用,如果发布到vscode插件市场也需要生成vsix,同理visual studio的插件也是vsix格式。
安装库:npm i vsce -g
在项目源代码的根目录,打开powershell,输入:vsce package
,然后需要稍等一两分钟,就会在项目根目录生成vsix文件了。
如何安装vsix?在vscode的扩展窗口 - 从vsix安装,选择生成的vsix,就可以安装成功了。
PS.不要把vsix关联使用vscode打开会安装失败
如何修改扩展的信息?在源代码的package.json中修改
遇到问题#
PS E:\Code\VSCode-Zhihu\dist> vsce package
vsce : 无法加载文件 C:\Users\qing\AppData\Roaming\npm\vsce.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:
/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vsce package
+ ~~~~
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决办法#
- 按住win+x,选择 - 以管理员身份运行powershell
- 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的;
- 执行:set-ExecutionPolicy RemoteSigned;
- 这时再执行get-ExecutionPolicy,就显示RemoteSigned;
参考资料#
微软VSCode插件开发官方文档:https://code.visualstudio.com/docs/extensions/overview
生成vsix文档:https://code.visualstudio.com/api/working-with-extensions/publishing-extension
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 易语言 —— 开山篇
· Trae初体验
2016-05-28 Unity VR全景漫游