发布自己的VsCode插件（手把手教学）

发布自己的VsCode插件

经常用VsCode的小伙伴，是否整日为寻找合适的插件而苦恼呢？没关系，我们可以DIY自己的插件。本文将介绍，如何创建、开发、调试、打包、发布自己的VsCode插件。高手可以看看相关文档：英文文档、中文文档

🎮创建

创建一个VsCode的插件项目，将会用到yo和generate-code。

1. 全局安装需要用到的依赖。

npm i yo generate-code -g

2. 使用以下命令创建项目

将会依次问你七个问题。

1. 选择你想要创建的插件类型。会根据你选择的类型，下载对应的模板。更多模板
2. 插件的名称。
3. 插件的唯一标识id。
4. 插件的描述。
5. 是否需要git。
6. 构建工具是否使用webpack。
7. 选择包管理工具。

如果你成功创建了项目，那么就可以进入开发阶段。

yo code

3. 进入项目，安装依赖

cd my-extension

npm install

🛠开发

VsCode的扩展开发根据不同类型，有不同的操作。这里仅介绍简单命令输出功能。后续因为公司使用的JavaScript，没有代码提示和自动补全，对于我这种喜欢TypeScript和jsDoc的人十分不友好，我将会根据公司封装的API开发一个插件。当然，后续也会写一篇博客来详解一下开发流程。

1. 目录介绍

当你创建Extension TypeScript项目后，你将看到以下目录。
.vscode: 里面的文件是用来测试插件或者测试代码的一些文件。
node_modules: 第三方依赖。
src/test：测试文件。
src/extension.ts：插件的主文件。

2. package.json文件

值得一提的是，在VsCode插件开发中，package.json有很重要的作用。以下只简单说明了一些配置，contributes中还有更多可配置的东西，具体可以看文档。关于更多contributes配置

{
  "name": "my-extension", // 作者名称
  "displayName": "my-extension", // 插件名称
  "description": "this is extendsion", // 插件描述
  "version": "0.0.1", // 版本
  "engines": { 
    "vscode": "^1.87.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [], // 激活事件, 使用*表示任何语言都能激活。或者指定激活事件"onLanguage:plaintext"、"onLanguage:javascript"
  "main": "./out/extension.js",  // 插件激活入口
  "contributes": {
    "commands": [  // 命令
      {
        "command": "my-extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.87.0",
    "@types/mocha": "^10.0.6",
    "@types/node": "18.x",
    "@typescript-eslint/eslint-plugin": "^7.4.0",
    "@typescript-eslint/parser": "^7.4.0",
    "eslint": "^8.57.0",
    "typescript": "^5.3.3",
    "@vscode/test-cli": "^0.0.8",
    "@vscode/test-electron": "^2.3.9"
  }
}

3. 添加命令

"commands": [  // 命令
  {
	"command": "my-extension.helloWorld",
	"title": "Hello World"
  },
  {
	"command": "my-extension.ikun",
	"title": "ikun"
  }
]

4. 在extensions.ts文件中注册命令

import * as vscode from 'vscode';

// 插件激活时
export function activate(context: vscode.ExtensionContext) {

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
	
		vscode.window.showInformationMessage('Hello World from my-extension!');
	});

	context.subscriptions.push(disposable);

	let ikunCommand = vscode.commands.registerCommand('my-extension.ikun', () => {
		vscode.window.showInformationMessage('唱、跳、rap、篮球');
	});
	context.subscriptions.push(ikunCommand);

}

// 插件禁用时
export function deactivate() {}

🎨调试

在本地调试，使用F5，将会弹出一个叫扩展开发宿主的VsCode。使用Ctrl + Shift + P，输入ikun测试命令是否生效。

如果调试时，出现错误，请检查package.json文件中的vscode版本是否与本地vscode编辑器的版本一致或兼容。

📦打包

这里的打包是VsCode打包，不是项目代码打包，需要用到vsce工具。

1. 全局安装

npm i @types/vsce -g

2. 打包vsix文件

打包前，需要在package.json中填写完整发布人，同时更改README.md文件里的内容。以下为示例，基于项目已有的配置，你只需要填写publisher即可打包。

{
  "name": "zbcx-helper",
  "displayName": "zbcx-helper",
  "description": "This is javascript web development language extension for zbcx.",
  "author": "Yuluo",
  "version": "0.0.1",
  "publisher": "Yuluo",
  "icon": "./zbcx.png",
  "private": "true",
 }

如果你这一步报错npm找不到很多模块，那么你需要安装配置python环境，然后使用npm install在项目中安装依赖。

如果没有报错，将会询问你两个问题，直接两个y解决，然后你将会看见根目录下出现你的扩展插件啦！🎉🎉🎉

vsce package

3. 发布前，你可以在本地手动安装

📌发布

这里是手动发布的流程。

1. 打开vscode marketplace
2. 点击右上角的Publish extensions
3. 创建一个publisher
4. 填写Name、ID、Description，上传Logo
5. 点击New extension，选择Visual Studio Code，将打包的vsix文件上传。
6. 等五分钟左右，就可以在插件市场搜到自己的插件了！