快速创建工程到生成插件包

最新推荐文章于 2025-03-05 14:45:56 发布

原创最新推荐文章于 2025-03-05 14:45:56 发布 · 1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #编辑器

快速生成可启动的插件工程

步骤1

安装环境 Node.js

步骤2

安装 Yeoman 、VS Code Extension Generator (插件生成器)

npm install --global yo generator-code

步骤3

生成项目基本结构

yo code

引导生成插件项目中注意的几项如下

选择插件类型
What’s the identifier of your extension?：设置插件的标识，注意不要有大写字母，这个由 npm 的规则决定。
Bundle thesource codee with webpack? ：这里是选择 webpack，webpack打包源代码，能够帮助优化插件的性能，管理依赖，以及利用现代JavaScript（对Typescript也有用）开发的各种便利，从而提高开发效率和用户体验。
此示例如下

步骤4

launch.json 部分配置如下

	"configurations": [
		{
			"name": "Run Extension",
			"type": "extensionHost",
			"request": "launch",
			"args": [
				"--extensionDevelopmentPath=${workspaceFolder}"
			],
			"outFiles": [
				"${workspaceFolder}/dist/**/*.js"
			],
			"preLaunchTask": "npm: compile"
		}
	]

task.json 部分配置如下

"tasks": [
    {
        "type": "npm",
        "script": "compile",
        "group": "build",
        "problemMatcher": [],
        "label": "npm: compile",
        "detail": "webpack"
    }
]

package.json 部分配置如下

  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "webpack",
  }

启动程序并且调试

按F5运行，此时打开一个新的VS Code窗口
打开开命令面板 Ctrl+Shift+P, 输入命令 Hello World 后弹窗如下

在这里插入图片描述

步骤5 出插件包

使用 vsce 工具进行打包，安装工具 npm install -g vsce

运行打包命令: vsce package

打包后文件名成：<package.name>-<package.version>.vsix

打包可能会有以下问题，打包前可以提前解决这些问题

报错，提示需要对 README.md 进行编辑
警告 package.json 中缺少 repository 字段
警告缺少 LICENSE 文档

可通过 vsce package --help 查找是否有解决办法

在 package.json 中添加一个字段 ‘publisher’，生成项目结构时，可能没有这个字段。

步骤6 本地导入使用

在这里插入图片描述

插件开发重点注意的两个文件

程序入口文件

①extension.ts Extension的入口文件 extension.ts详解

清单文件 package.json

②package.json 是插件的配置文件，相关功能的开发在此文件中进行配置package.json详解

插件安装后，插件所在文件夹

// window 平台
C:\Users\<你的用户名>\.vscode\extensions\<publisher>.<name>-<version>

publisher、 name、version 分别对应 package.json中的字段。

应用程序打包工具 webpack

webpack 配置文件 webpack.config.js，一般保持默认即可，有特殊需求可自定义修改配置

工程目录下常用文件

readme.md文件

其中内容在安装之后显示在 DETAILS 页签

插件功能的相关描述可在此进行描述

VSCode识别插件

VSCode采用package.json中字段 <publisher>.<name> 作为插件的唯一标识

注意点

构建时空文件夹不会被打进去，这里在进行文件路径相关操作时要先判断路径是否存在
注意构建时需要忽略的文件，在 .vscodeignore进行配置

述可在此进行描述

VSCode识别插件

VSCode采用package.json中字段 <publisher>.<name> 作为插件的唯一标识

注意点

构建时空文件夹不会被打进去，这里在进行文件路径相关操作时要先判断路径是否存在
注意构建时需要忽略的文件，在 .vscodeignore进行配置