知乎vscode插件修改和重新编译

需求来源

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

VSCode插件开发全攻略（十）打包、发布、升级