知乎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

Copy
PS E:\Code\VSCode-Zhihu> npm install 26 packages are looking for funding run `npm fund` for details

脚本修改#

按照自己的需求修改ts代码,然后就可以调试插件了。

获取vscode当前打开的文件名,并填充到输入框做为默认值:(这里拿到的是完整的路径)

Copy
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中修改

遇到问题#

Copy
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

解决办法#

  1. 按住win+x,选择 - 以管理员身份运行powershell
  2. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的;
  3. 执行:set-ExecutionPolicy RemoteSigned;
  4. 这时再执行get-ExecutionPolicy,就显示RemoteSigned;

参考资料#

微软VSCode插件开发官方文档:https://code.visualstudio.com/docs/extensions/overview

生成vsix文档:https://code.visualstudio.com/api/working-with-extensions/publishing-extension

VSCode插件开发全攻略(十)打包、发布、升级

作者:赵青青   一名在【网易游戏】做游戏开发的程序员,擅长Unity3D,游戏开发,.NET等领域。
本文版权归作者和博客园共有,欢迎转载,转载之后请务必在文章明显位置标出原文链接和作者,谢谢。
如果本文对您有帮助,请点击【推荐】您的赞赏将鼓励我继续创作!想跟我一起进步么?那就【关注】我吧。
posted @   赵青青  阅读(6416)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 易语言 —— 开山篇
· Trae初体验
历史上的今天:
2016-05-28 Unity VR全景漫游
点击右上角即可分享
微信分享提示
CONTENTS