【亲测免费】 Qwerty Learner VSCode 插件使用教程

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

Qwerty Learner VSCode 插件的目录结构如下：

qwerty-learner-vscode/
├── .github/
├── assets/
├── src/
│   ├── commands/
│   ├── dictionary/
│   ├── extension.ts
│   ├── main.ts
│   ├── utils/
│   └── views/
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• .github/: 包含 GitHub 相关的配置文件，如 issue 模板、PR 模板等。
• assets/: 存放项目所需的静态资源文件，如图片、样式文件等。
• src/: 项目的源代码目录。
  • commands/: 包含插件的命令实现代码。
  • dictionary/: 包含词库文件，用于存储单词列表。
  • extension.ts: 插件的入口文件，负责初始化和注册命令。
  • main.ts: 主逻辑文件，处理用户输入和单词显示。
  • utils/: 包含一些工具函数和辅助类。
  • views/: 包含插件的界面相关代码。
• .gitignore: Git 忽略文件配置。
• package.json: 项目的配置文件，包含依赖、脚本、插件信息等。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/extension.ts，它是插件的入口点。该文件主要负责以下任务：

• 初始化插件环境。
• 注册插件命令。
• 监听用户输入事件。

关键代码片段

import * as vscode from 'vscode';
import { startPractice, pausePractice, changeDictionary } from './commands';

export function activate(context: vscode.ExtensionContext) {
    // 注册启动命令
    let startCommand = vscode.commands.registerCommand('qwerty-learner.start', () => {
        startPractice();
    });

    // 注册暂停命令
    let pauseCommand = vscode.commands.registerCommand('qwerty-learner.pause', () => {
        pausePractice();
    });

    // 注册切换词库命令
    let changeDictCommand = vscode.commands.registerCommand('qwerty-learner.changeDictionary', () => {
        changeDictionary();
    });

    context.subscriptions.push(startCommand, pauseCommand, changeDictCommand);
}

export function deactivate() {}

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了插件的所有配置信息。以下是一些关键配置项的介绍：

关键配置项

• name: 插件的名称。
• displayName: 插件的显示名称。
• version: 插件的版本号。
• publisher: 插件的发布者。
• engines: 插件支持的 VSCode 版本。
• categories: 插件的分类。
• activationEvents: 插件的激活事件。
• contributes: 插件的贡献点，如命令、菜单项等。

示例配置

{
    "name": "qwerty-learner",
    "displayName": "Qwerty Learner",
    "version": "1.0.0",
    "publisher": "kaiyi",
    "engines": {
        "vscode": "^1.53.0"
    },
    "categories": [
        "Education",
        "Other"
    ],
    "activationEvents": [
        "onCommand:qwerty-learner.start",
        "onCommand:qwerty-learner.pause",
        "onCommand:qwerty-learner.changeDictionary"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "qwerty-learner.start",
                "title": "Qwerty Learner: Start"
            },
            {
                "command": "qwerty-learner.