资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

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

创作时间:

作者:

@小白创作中心

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

引用

CSDN

https://blog.csdn.net/weixin_42390185/article/details/137213273

本文将详细介绍如何在Visual Studio Code (VSCode)上创建、开发、调试、打包和发布自己的插件。对于经常使用VSCode的开发者来说，掌握这些技能可以让你根据自己的需求定制专属的开发环境。

发布自己的VsCode插件

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

🎮创建

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

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

npm i yo generate-code -g

使用以下命令创建项目
将会依次问你七个问题。
选择你想要创建的插件类型。会根据你选择的类型，下载对应的模板。更多模板
插件的名称。
插件的唯一标识id。
插件的描述。
是否需要git。
构建工具是否使用webpack。
选择包管理工具。
如果你成功创建了项目，那么就可以进入开发阶段。

yo code

进入项目，安装依赖

cd my-extension
npm install

🛠开发

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

目录介绍
当你创建Extension TypeScript项目后，你将看到以下目录。
.vscode：里面的文件是用来测试插件或者测试代码的一些文件。
node_modules：第三方依赖。
src/test：测试文件。
src/extension.ts：插件的主文件。
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"
  }
}

添加命令

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

在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工具。

全局安装

npm i @types/vsce -g

打包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解决，然后你将会看见根目录下出现你的扩展插件啦！🎉🎉🎉