VSCode中开发入门级插件

最新推荐文章于 2024-05-23 16:22:56 发布

叨槿

最新推荐文章于 2024-05-23 16:22:56 发布

阅读量246

点赞数

文章标签： vscode 编辑器

本文链接：https://blog.csdn.net/jyj15002967882/article/details/131697964

版权

环境准备

node
git
npm

初始化项目

// 安装需要的包
npm install -g yo generator-code

// 运行
yo code

这个脚手架会生成一个可以立马开发的项目。运行生成器，填写信息：

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld

完成后进入 VS Code，按下F5，你会立即看到一个插件发开主机窗口，其中就运行着插件。
在命令面板(Ctrl+Shift+P)中输入Hello World命令。

重点关注的文件

在项目生成之后，目录结构如下所示，其中最重要的文件是package.json和extension.js，了解这两个文件基本上就可以入门开发一个vscode插件了。

package.json

该文件是vscode扩展的清单文件，里面有很多字段，官方对每个字段都进行了详细阐述，我们重点阐述以下初始化后期清单文件。

{
  "name": "demo", // 插件名
  "displayName": "插件", // 显示在应用市场的名字
  "description": "我的第一个插件测试", // 具体描述
  "version": "0.0.1", // 插件的版本号
  "engines": {
    "vscode": "^1.60.0" // 最低支持的vscode版本
  },
  "categories": [
    "Other" // 扩展类别
  ],
  // 激活事件组，在那些事件情况下被激活
  "activationEvents": [
    "onCommand:hellotbq.helloWorld"
  ],
  // 插件的主入口文件
  "main": "./extension.js",
  //  定义命令
  "contributes": {
    // 命令
    "commands": [
      {
        "command": &