VS Code 扩展项目模板教程

VS Code 扩展项目模板教程

starter-vscodeStarter template for VS Code Extension项目地址:https://gitcode.com/gh_mirrors/st/starter-vscode

1. 项目的目录结构及介绍

starter-vscode/
├── .github/
│   └── workflows/
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── src/
│   ├── extension.ts
│   └── test/
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── eslint-config.mjs
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.json
└── tsup.config.ts

目录结构介绍

• .github/workflows: 存放GitHub Actions的工作流配置文件。
• .vscode: 存放VS Code的配置文件，包括扩展推荐、调试配置和用户设置。
• src: 存放项目的源代码，包括扩展的主文件和测试文件。
• .gitignore: 指定Git忽略的文件和目录。
• .npmrc: npm的配置文件。
• LICENSE: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• eslint-config.mjs: ESLint的配置文件。
• package.json: 项目的npm包配置文件，包含依赖、脚本等信息。
• pnpm-lock.yaml: pnpm的锁定文件，用于确保依赖版本一致性。
• pnpm-workspace.yaml: pnpm的工作区配置文件。
• tsconfig.json: TypeScript的配置文件。
• tsup.config.ts: tsup的配置文件，用于打包TypeScript代码。

2. 项目的启动文件介绍

src/extension.ts

这是VS Code扩展的主文件，通常包含扩展的激活和停用逻辑。以下是一个典型的extension.ts文件结构：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Extension "starter-vscode" is now active!');

    let disposable = vscode.commands.registerCommand('starter-vscode.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from starter-vscode!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

文件介绍

• activate: 当扩展被激活时调用的函数，通常在这里注册命令和事件监听器。
• deactivate: 当扩展被停用时调用的函数，用于清理资源。

3. 项目的配置文件介绍

package.json

这是npm包的配置文件，包含项目的元数据、依赖、脚本等信息。以下是一些关键字段的介绍：

{
  "name": "starter-vscode",
  "displayName": "Starter VS Code Extension",
  "version": "1.0.0",
  "description": "A starter template for VS Code Extension",
  "main": "dist/extension.js",
  "scripts": {
    "build": "tsup src/extension.ts --outDir dist",
    "watch": "tsup src/extension.ts --outDir dist --watch",
    "lint": "eslint src --ext .ts",
    "test": "jest"
  },
  "dependencies": {
    "vscode": "^1.1.37"
  },
  "devDependencies": {
    "@types/vscode": "^1.52.0",
    "eslint": "^7.15.0",
    "jest": "^26.6.3",
    "tsup": "^4.1.0",
    "typescript": "^4.1.2"
  }
}

关键字段介绍

• name: 扩展的名称。
• displayName: 扩展的显示名称。
• version: 扩展的版本号。
• description: 扩展的描述。
• main: 扩展的主入口文件。
• scripts: 定义了项目的构建、测试、lint等脚本。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

.vscode/launch.json

这是VS Code的调试配置文件，用于配置调试会话。以下是一个典型的launch.json文件结构：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "code",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

关键字段介绍

• name: 调试配置的名称。
• type: 调试类型，这里是extensionHost，表示调试VS Code扩展。
• request: 请求类型，这里是launch，表示启动调试。
• runtimeExecutable: 运行时可执行文件，这里是code，表示使用VS Code。
• args: 传递给运行时可执行文件的参数。
• outFiles: 指定输出文件的路径。

通过以上介绍，您可以更好地理解和使用starter-vscode项目模板。

starter-vscodeStarter template for VS Code Extension项目地址:https://gitcode.com/gh_mirrors/st/starter-vscode