new-page-component

环境准备在开始开发前，确保已安装：

Node.js（建议最新LTS版本） VS Code（最新稳定版） Yeoman（脚手架工具）和 VS Code Extension Generator（插件生成器）

pnpm install -g yo generator-code

创建插件项目使用Yeoman生成插件模板： yo code
项目调试 pnpm run compile

编译完成后，F5启动调试

开发流程



{
  "name": "my-extension", // 插件ID（全小写，无空格，需唯一）
  "displayName": "My Awesome Extension", // 插件显示名称
  "description": "A VS Code extension to boost your productivity!", // 描述（Marketplace 展示）
  "version": "1.0.0", // 语义化版本号
  "publisher": "your-name", // 发布者ID（需与Azure DevOps一致）
  "engines": {
    "vscode": "^1.85.0" // 最低支持的VS Code版本
  },
  "icon": "images/icon.png", // 插件图标（128x128像素，PNG格式）
  "license": "MIT", // 开源协议（可选：MIT、Apache-2.0等）
  "keywords": ["productivity", "snippets", "formatting"], // 关键词（便于搜索）
  "categories": ["Formatters", "Snippets"], // 分类（官方允许值：https://code.visualstudio.com/api/references/extension-manifest#categories）
  "main": "./out/extension.js", // 插件入口文件（编译后路径）
  "activationEvents": [
    "onCommand:myExtension.helloWorld", // 按命令激活
    "onLanguage:javascript", // 打开JS文件时激活
    "workspaceContains:package.json" // 工作区包含特定文件时激活
  ],
  "contributes": {
    "commands": [
      {
        "command": "myExtension.helloWorld",
        "title": "Hello World",
        "category": "Extension" // 命令分类（可选）
      }
    ],
    "keybindings": [
      {
        "command": "myExtension.helloWorld",
        "key": "ctrl+shift+h", // 快捷键绑定
        "mac": "cmd+shift+h",
        "when": "editorTextFocus" // 触发条件
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "myExtension.helloWorld",
          "group": "navigation", // 右键菜单分组
          "when": "editorLangId == javascript" // 仅JS文件显示
        }
      ]
    },
    "configuration": {
      "title": "My Extension",
      "properties": {
        "myExtension.enableFeature": {
          "type": "boolean",
          "default": true,
          "description": "Enable/disable the extension's main feature."
        }
      }
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run compile", // 发布前编译
    "compile": "tsc -p ./", // TypeScript编译（如果是JS可省略）
    "watch": "tsc -watch -p ./", // 监听模式编译
    "lint": "eslint src --ext .ts", // 代码检查（可选）
    "package": "vsce package" // 本地打包
  },
  "devDependencies": {
    "@types/vscode": "^1.85.0", // VS Code API类型定义
    "@types/node": "^20.0.0", // Node.js类型定义
    "typescript": "^5.0.0", // TypeScript编译器
    "eslint": "^8.0.0" // 代码检查工具（可选）
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-name/my-extension.git" // 源码仓库
  },
  "bugs": {
    "url": "https://github.com/your-name/my-extension/issues" // 问题反馈链接
  },
  "homepage": "https://github.com/your-name/my-extension#readme" // 项目主页
}

插件入口（extension.ts）具体写法看src/extension.ts 文件代码

关键 VS Code API 介绍

显示信息提示

vscode.window.showInformationMessage('Hello!');
vscode.window.showErrorMessage('Error!');

输入框:

const name = await vscode.window.showInputBox({ prompt: 'Enter your name' });

状态栏

const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
statusBarItem.text = "Ready";
statusBarItem.show();

vscode.workspace（文件与编辑器操作）

获取当前文件：

const editor = vscode.window.activeTextEditor;
const text = editor?.document.getText();

监听文件变化：

vscode.workspace.onDidChangeTextDocument((e) => {
  console.log('文件内容变化:', e.document.getText());
});

vscode.commands（自定义命令）

注册命令

vscode.commands.registerCommand('myExtension.doSomething', () => {
  // 执行逻辑
});

执行已有命令

vscode.commands.executeCommand('editor.action.formatDocument');

官方文档：https://code.visualstudio.com/api/get-started/your-first-extension

插件打包发布 $ cd myExtension $ vsce package // name-transform-0.0.1 生成了 $ vsce publish

kehui