VSCode插件的开发与放弃

最近因为空余时间有点多，而且因为没在vscode中找到合我心意yapi接口文档转interface的插件，所以打算自己搞一个所以从头边学vscode插件开发边弄吧。

环境安装

npm install -g yo generator-code //官方脚手架
yo code // 执行脚手架命令

根据提示选择你想要的

目录结构

目录接口还是一眼就看得懂得，真正的重点还是package.json和extension.ts这两个分别是项目配置文件和项目入口文件

{
    // 插件名称（全小写无空格）
    "name": "yys", 
    // 插件的友好显示名称，用于显示在应用市场，支持中文
    "displayName": "yys",
    // 插件描述
    "description": "",
    // 插件版本
    "version": "0.0.1",
    // 插件运行的vscode版本
    "engines": {
        "vscode": "^1.68.0"
    },
    // 件应用市场分类，可选值： [Programming Languages, Snippets, 
    // Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers,
    // Other, Extension Packs, Language Packs]
    "categories": [
        "Other"
    ],
    // 扩展的激活事件数组，可以被哪些事件激活扩展
    "activationEvents": [
        "onCommand:yys.helloWorld"
    ],
    // 入口文件
    "main": "./dist/extension.js",
    // 
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "yys.helloWorld",
                "title": "Hello World"
            }
        ],
        // 左侧边栏图标 如不配置views不展示该图标
         "viewsContainers": {
              "activitybar": [
                {
                  "id": "yapi2ts",
                  "title": "Api Viewer Explorer",
                  "icon": "resources/sidebar-icon.svg"
                }
              ]
        },
        // 自定义侧边栏内view的实现
        "views": {
          // 和 viewsContainers中id对应
          "yapi2ts": [
            {
              "id": "123123",
              "name": "12312312"
            }
          ]
        }
    },
    "scripts": {
        "vscode:prepublish": "yarn run package",
        "compile": "webpack",
        "watch": "webpack --watch",
        "package": "webpack --mode production --devtool hidden-source-map",
        "compile-tests": "tsc -p . --outDir out",
        "watch-tests": "tsc -p . -w --outDir out",
        "pretest": "yarn run compile-tests && yarn run compile && yarn run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.68.0",
        "@types/glob": "^7.2.0",
        "@types/mocha": "^9.1.1",
        "@types/node": "16.x",
        "@typescript-eslint/eslint-plugin": "^5.27.0",
        "@typescript-eslint/parser": "^5.27.0",
        "eslint": "^8.16.0",
        "glob": "^8.0.3",
        "mocha": "^10.0.0",
        "typescript": "^4.7.2",
        "ts-loader": "^9.3.0",
        "webpack": "^5.72.1",
        "webpack-cli": "^4.9.2",
        "@vscode/test-electron": "^2.1.3"
    }
}

调试

F5选择run extension，就会打开一个新的vscode窗口 在该窗口 ctrl+shift+p 输入 hello world 便可以看到这个初始框架的初次运行了