关于这个「markdown文章一键发布」插件， 上篇文章我把需求梳理了一遍，并没有收到大家太多的反馈。

这篇文章咱就来实操一遍，看看一个vscode插件项目如何创建，如何调试，并最终打包成一个本地vsix文件进行安装。

事前准备

工欲善其事必先利其器，参考文档和基础工具是必不可少的

• 官方文档 https://code.visualstudio.com/api/get-started/your-first-extension
• NodeJS安装，本人安装版本为v17.3.0，npm版本为v8.3.0
• VSCODE编辑器安装，本人安装版本为v1.78.0
  这些都准备好了的话，咱们就来看看怎么创建项目吧！

VSCODE插件开发之项目创建

根据官方文档，只需要安装两个工具库就可以根据命令直接创建项目了，一个是yo，一个是generator-code。

在控制台直接输入安装命令即可：

npm install -g yo generator-code

下面是我个人在创建项目时的一些选择：

执行命令完成之后，就会在当前目录建立一个vscode插件项目，我这里叫blog publisher。

创建完了之后，就可以直接run起来了，操作步骤看下图：

根据官方文档，这一步就操作完了，非常简单吧！

但是，这里是有一点小问题的。很多同学根据vscode官方文档的步骤基本都运行不起来，解决办法请参见文末问题记录一小节的内容。

VSCODE插件开发之如何调试

调试其实也很简单，通过命令创建的项目，已经自带调试环境了。

鉴于大家网络原因，这里就放一个官方的调试视频给大家看看吧：https://code.visualstudio.com/api/get-started/your-first-extension/debug.mp4

VSCODE插件开发之如何打包vsix文件

vsix文件，是vscode插件的离线安装文件，类似windows的*.exe文件，打包后的离线文件可以很好的分享给其他人使用。

要生成vsix文件，需要用到vscode官方的一个工具包@vscode/vsce，直接安装即可：

npm install -g @vscode/vsce

然后执行工具包的命令即可：

vsce package

这里贴一张本人的打包过程：

这一步的操作也是有官方文档的，英文好的朋友，直接去看吧：Publishing Extensions

使用pnpm的小伙伴，这里也是有一点小问题的。如果打包失败，请参见文末问题记录一小节的内容。

VSCODE插件开发之安装vsix文件

本地安装也很简单，我这里照样贴一张图吧，根据图里步骤1/2/3即可安装

至此，整个流程就结束了，除了以下遇到的问题。

问题记录

以上流程我这里梳理起来看似很简单，根据官方文档一步一步走就行了。

但是，在实际的执行过程中并不是一帆风顺的。以下是本人实操过程中记录的问题以及解决方案，希望能帮到大家

1. 根据vscode插件官方文档创建的项目，启动不了，连官方helloworld都不能运行

原因：本地vscode的版本低于官方脚手架的引擎最低版本要求

解决办法：在package.json文件中把engines版本降低为当前vscode版本即可

{
  "name": "markdown-publisher-for-all",
  "displayName": "Markdown Publisher For CSDN/JIANSHU/ZHIHU/JUEJIN/WECHAT...",
  "description": "Markdown全平台发布客户端",
  "publisher": "励志前端",
  "version": "1.0.0",
  "engines": {
       // 此处的版本问题，脚手架工程截止发文时是^1.81.0，此处降低为1.78.0
      "vscode": "^1.78.0"
  },
   //...
 }

2. vscode插件打包使用pnpm打包失败，解决方案

原因：暂且不清楚

解决办法：尝试过很多办法，最终无奈只能重新使用yarn进行打包

# 1.安装yarn
npm i -g yarn

# 2. 使用yarn重新安装模块
yarn install

# 3. 使用yarn打包
vsce package --yarn

结语

除了几个小坑之外，vscode插件开发的整个过程还是比较顺畅的。

本篇文章，作为插件开发的入门篇，介绍了vscode插件项目的创建、调试、打包、安装等内容。

觉得有用，还请点赞收藏！

预告

下篇文章，我们就来实现一下「markdown文章一键发布」插件的核心逻辑。敬请期待！

励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！