需求来源

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

解决办法

  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插件开发全攻略(十)打包、发布、升级

知乎vscode插件修改和重新编译的更多相关文章

  1. 玩转VSCode插件之Remote-SSH

    前言 每当更换电脑就要从新搭建一遍开发环境... 每当拉完最新代码程序在本地跑不起来的时候就要检查服务器和开发电脑的环境... 每当服务器上出Bug的时候就想如果可以能够调试服务器代码多好啊.. 你是 ...

  2. VScode 插件推荐与C/C++配置

    以下是我经常用到的VScode插件.由于插件本身具有详细的配置和介绍,不对插件本身的安装配置进行说明,仅仅支出这些插件的主要功能.具体使用强烈推荐看一下安装插件后的说明,大多数的问题和设置都可以找到, ...

  3. 干货:用好这13款VSCode插件,工作效率提升10倍

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 大家好我是lemon, 马上进入我们今天的主题吧. 又 ...

  4. 使用 vscode 插件可视化制作和管理脚手架及原理解析

    提到脚手架,大家想到的可能就是各种 xxx-cli,本文介绍的是另一种方式:以 vscode 插件的形式实现,提供 web 可视化操作,如下图: 下面介绍如何安装使用,以及实现原理. 安装使用 vsc ...

  5. VSCODE 插件初探

    写在前面 分享一个vscode插件background(用于改变背景).点击直接跳到vscode插件开发步骤 做vscode的插件,很久就有这个想法了,但是一直因为这样,那样的事情耽误,放弃了N次.不 ...

  6. 精选!15 个必备的 VSCode 插件(前端类)

      精选!15 个必备的 VSCode 插件(前端类)   就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件.为了帮助大家挑选出值得下载的插件,我们针对性的 ...

  7. 个人向 - vscode插件记录

    现在用的编译器的是vscode,本身这个编译器很小,很多功能都没有,需要自己下载一些插件来完善功能,不知不觉下载的插件也有三十多个了,感觉需要记录一下. tips:1. vscode插件的安装位置:’ ...

  8. Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度

    原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能 ...

  9. 前端开发工具-VsCode插件【个人开发常用】

     前端开发工具-VsCode插件[个人开发常用] Atom One Dark Theme-主题 Chinese (Simplified) Language Pack for Visual Studio ...

随机推荐

  1. 4、关于numpy.random.seed()的使用说明

    定义:seed( ) 用于指定随机数生成时所用算法开始的整数值,如果使用相同的seed( )值,则每次生成的随即数都相同,如果不设置这个值,则系统根据时间来自己选择这个值,此时每次生成的随机数因时间差 ...

  2. Java HashSet和TreeSet【笔记】

    Java HashSet和TreeSet[笔记] PS:HashSet.TreeSet 两个类是在 Map 的基础上组装起来的类 HashSet 类注释 1.底层实现基于 HashMap,所以迭代时不 ...

  3. 题解 c(留坑)

    传送门 这题卡常--而且目前还没有卡过去 首先以原树重心为根,向所有子树重心连边,可以建立一棵点分树 点分树有两个性质: 一个是树高只有log层 另一个是两点在点分树上的lca一定在原树上两点间的树上 ...

  4. VirtualBox-虚拟硬盘扩容-win7

    问题: 我在VirtualBox下搭建的win7系统只设置了一个C盘,当初只给硬盘分配32G,如今深受生活的毒打,发现只剩5G可用,装个PS都费劲. 我要扩容,扩容! 当前环境: VirtualBox ...

  5. asp.net core 知识点总结

  6. 测试框架unit之assertion断言使用详解

    NUnit是.Net平台的测试框架,广泛用于.Net平台的单元测试和回归测试中,下面我们用示例详细学习一下他的使用方法 任何xUnit工具都使用断言进行条件的判断,NUnit自然也不例外,与其它的xU ...

  7. .Net 5 新特性之--支持字典在迭代中进行修改

    我们都知道以前字典迭代中是不支持动态修改的[否则会报错::"Collection was modified; enumeration operation may not execute.&q ...

  8. 四:HttpServletRequest对象

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  9. CentOS7中apache的部署与配置

    一.apache的部署 输入命令 yum list | grep httpd 查看可安装的软件包,选择"httpd.x86_64"安装. 输入命令 yum install http ...

  10. QT学习日记篇-03-仿写一个智能家居界面

    课程大纲: <1>让界面漂亮起来,仿写一个智能家居界面 ->第一:给QT工程添加图片 进入下一步: <注意路径和名称一定不能有中文>                   ...