Shortcut Menu Bar VSCode 扩展教程

Shortcut Menu Bar VSCode 扩展教程

Shortcut-Menu-Bar-VSCode-ExtensionAdd handy buttons like beautify, show opened files, save, toggle terminal, etc to the editor menu bar in VSCode. You can also create your own buttons with custom commands. VSCode Marketplace link: https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar项目地址:https://gitcode.com/gh_mirrors/sh/Shortcut-Menu-Bar-VSCode-Extension

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

Shortcut Menu Bar VSCode 扩展的目录结构如下：

Shortcut-Menu-Bar-VSCode-Extension/
├── .github/
├── assets/
├── src/
│   ├── commands/
│   ├── components/
│   ├── models/
│   ├── services/
│   ├── styles/
│   ├── utils/
│   └── extension.ts
├── .gitignore
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• .github/: 包含 GitHub 相关的配置文件，如 issue 模板、PR 模板等。
• assets/: 包含扩展所需的静态资源，如图片、图标等。
• src/: 包含扩展的主要源代码。
  • commands/: 包含扩展定义的各种命令。
  • components/: 包含扩展使用的 React 组件。
  • models/: 包含数据模型和接口定义。
  • services/: 包含服务层代码，处理业务逻辑。
  • styles/: 包含样式文件，如 CSS 或 SCSS。
  • utils/: 包含工具函数和辅助类。
  • extension.ts: 扩展的入口文件。
• .gitignore: 指定 Git 忽略的文件和目录。
• .vscodeignore: 指定在打包扩展时忽略的文件和目录。
• CHANGELOG.md: 记录扩展的变更日志。
• package.json: 包含扩展的元数据和依赖项。
• README.md: 扩展的说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

扩展的启动文件是 src/extension.ts。这个文件是扩展的入口点，负责初始化扩展并注册各种命令。

src/extension.ts 文件介绍

import * as vscode from 'vscode';
import { registerCommands } from './commands';

export function activate(context: vscode.ExtensionContext) {
    // 注册所有命令
    registerCommands(context);
}

export function deactivate() {
    // 扩展停用时的清理工作
}

• activate 函数: 当扩展被激活时调用，负责注册所有命令。
• deactivate 函数: 当扩展被停用时调用，负责清理资源。

3. 项目的配置文件介绍

package.json 文件介绍

package.json 文件是 Node.js 项目的配置文件，包含了扩展的元数据、依赖项和命令等信息。

{
  "name": "shortcut-menu-bar",
  "displayName": "Shortcut Menu Bar",
  "description": "Add handy buttons like beautify, show opened files, save, toggle terminal, etc to the editor menu bar in VSCode",
  "version": "1.0.0",
  "publisher": "GorvGoyl",
  "engines": {
    "vscode": "^1.50.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onStartupFinished"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "shortcut-menu-bar.beautify",
        "title": "Beautify"
      },
      {
        "command": "shortcut-menu-bar.save",
        "title": "Save"
      },
      // 其他命令...
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.50.0",
    "@types/glob": "^7.1.3",
    "@types/mocha": "^8.0

Shortcut-Menu-Bar-VSCode-ExtensionAdd handy buttons like beautify, show opened files, save, toggle terminal, etc to the editor menu bar in VSCode. You can also create your own buttons with custom commands. VSCode Marketplace link: https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar项目地址:https://gitcode.com/gh_mirrors/sh/Shortcut-Menu-Bar-VSCode-Extension