从零到一：发布您的第一个VSCode插件

最新推荐文章于 2025-04-19 14:17:17 发布

NEWonclick

最新推荐文章于 2025-04-19 14:17:17 发布

阅读量681

点赞数 17

文章标签： vscode ide 编辑器

本文链接：https://blog.youkuaiyun.com/NEWonclick/article/details/145008281

版权

1. 安装必须的依赖

npm install --global yo generator-code

官方文档

2. 项目

需要通过第一步安装的脚手架来创建新项目

2.1 命令创建

yo code

创建功能插件就可以选第一个和第二个
创建主题插件选择Color Theme
创建语言插件例如常用的 “Chinese(Simplified)简体中文 Language ....”
以此类推

选择第一个ts版本，其他的可以自行填写，打包机制我选择了"unbundled"，完成后打开项目

这里最重要的就是package.json文件

2.2 认识package.json

package.json各个字段意思

{
  "name": "test",           // 包名
  "displayName": "test",    // VS Code 库中使用的扩展的显示名称
  "description": "test",    // 描述
  "version": "0.0.1",       // 版本号，每次发布版本号一定比上版本高
  "icon":"logo.png",        // 插件icon
  "publisher":"xxxxx"       // VS Code 扩展的发布者。
  "engines": {              // 引擎兼容性 对于 VS Code 扩展，指定与其兼容的 VS Code 版本。不能为 *。 例如: ^0.10.5 表示最低兼容 VS Code 版本 0.10.5。
    "vscode": "^1.96.0"
  },
  "categories": [           // VS Code 库用于对扩展进行分类的类别。
    "Other"
  ],
  "activationEvents": ["*"],  // VS Code 扩展的激活事件。在什么条件下激活插件，打开就激活插件["*"]
  "main": "./out/extension.js",
  "contributes": {        // 插件所有的命令操作都要在这里注册声明
    "commands": [         // 对命令面板提供命令
      {
        "command": "test.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",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.96.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "20.x",
    "@typescript-eslint/eslint-plugin": "^8.17.0",
    "@typescript-eslint/parser": "^8.17.0",
    "eslint": "^9.16.0",
    "typescript": "^5.7.2",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.4.1"
  }
}