VSCode插件开发学习记录（二）

原创已于 2024-12-13 01:45:14 修改 · 372 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #学习 #ide

于 2024-12-13 01:42:30 首次发布

VSCode插件开发专栏收录该内容

3 篇文章

订阅专栏

插件学习记录（二）

前言
代码结构
package.json内容介绍
extension.ts 内容介绍

前言

记录学习VSCode插件和开发cppcheck插件的过程，有错误欢迎指正。
下面的内容是边回忆边写的。会尽力还原开发过程

代码结构

.
├── .vscode
│   ├── launch.json     // Config for launching and debugging the extension
│   └── tasks.json      // Config for build task that compiles TypeScript
├── .gitignore          // Ignore build output and node_modules
├── README.md           // Readable description of your extension's functionality
├── src
│   └── extension.ts    // Extension source code
├── package.json        // Extension manifest
├── tsconfig.json       // TypeScript configuration

这是官网的代码结构。了解下来比较重要的是文件是 package.json 和 extension.ts
其中package.json中写的是关于插件的基本信息，参数设置，命令设置等。而extension.ts中则是利用TypeScript实现的具体逻辑。

package.json内容介绍

下面是生成的代码文件。

{
  "name": "cppcheck-tool",
  "displayName": "cppcheck-tool",
  "description": "use cppcheck scan cpp code",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.95.0" //最低支持的VSCode版本
  },
  //插件类型 [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
  "categories": [ 		
    "Other"
  ],
  //插件的激活事件
  "activationEvents": [ 
  ],
  // 插件的入口
  "main": "./out/extension.js", 
  // 具体的配置项
  // 快捷键，右键菜单，图标等选项均在这里设置
  "contributes": {  
  // 命令（ctrl + shift + p 时候输入相关字符出现的选项）
  // 下面的内容被修改过，后续会介绍
    "commands": [
      {
        "command": "cppcheck-tool.runScan",
        "title": "%cppcheck-tool.command.title.runScan%",
        "category": "cppcheck-tool"
      }
    ],
    // 设置的选项，在设置一栏中可以设置的内容
    // 下面的内容被修改过，后续会介绍
    "configuration": {
      "type" : "object",
      "title": "%cppcheck-tool.setting.titile%",
      "properties": {
        "cppcheck-tool.cppcheckPath": {
          "type": "string",
          "default": "",
          "description": "%cppcheck-tool.setting.description.cppcheckPath%",
          "category": "cppcheck-tool"
        }
      }
    }
  },
  "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.95.0",
    "@types/mocha": "^10.0.9",
    "@types/node": "20.x",
    "@typescript-eslint/eslint-plugin": "^8.10.0",
    "@typescript-eslint/parser": "^8.7.0",
    "eslint": "^9.13.0",
    "typescript": "^5.6.3",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.4.1"
  }
}

extension.ts 内容介绍

// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {}

// This method is called when your extension is deactivated
export function deactivate() {}

之前没了解过ts语法，边写插件边学习这个语法。不过按照名字来看 export的意思是可以被其他ts文件使用。感觉类似于C++的 extern 。function则是表明activate是函数。(context: vscode.ExtensionContext)中context为变量，vscode.ExtensionContext为变量类型。花括号{}则是标明函数体范围。

根据官网解释这两个函数分别会在插件被激活和退出时候调用。

这个时候点击 F5可以启动调试，会打开一个扩展主机。按住ctrl+shift+p输入sayhellworld，点击出现的栏目即可查看效果