VSCode Auto Rename Tag 项目教程

VSCode Auto Rename Tag 项目教程

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

vscode-auto-rename-tag/
├── .github/
│   └── workflows/
│       └── ci.yml
├── .vscode/
│   └── settings.json
├── src/
│   ├── extension.ts
│   └── test/
│       └── extension.test.ts
├── .gitignore
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── tsconfig.json

• .github/workflows/ci.yml: GitHub Actions 的 CI 配置文件。
• .vscode/settings.json: VSCode 工作区设置文件。
• src/extension.ts: 扩展的主文件，包含扩展的主要逻辑。
• src/test/extension.test.ts: 扩展的测试文件。
• .gitignore: Git 忽略文件列表。
• .vscodeignore: VSCode 发布时忽略的文件列表。
• CHANGELOG.md: 项目更新日志。
• package.json: 项目的 npm 配置文件，包含依赖、脚本和扩展信息。
• README.md: 项目的说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

src/extension.ts 是项目的启动文件，它包含了扩展的主要逻辑。以下是该文件的主要内容：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 扩展激活时的逻辑
}

export function deactivate() {
    // 扩展停用时的逻辑
}

• activate: 当扩展被激活时调用的函数，通常在这里初始化扩展的功能。
• deactivate: 当扩展被停用时调用的函数，用于清理资源。

3. 项目的配置文件介绍

package.json 是项目的配置文件，它包含了扩展的所有配置信息。以下是该文件的主要内容：

{
    "name": "auto-rename-tag",
    "displayName": "Auto Rename Tag",
    "description": "Automatically rename paired HTML/XML tag",
    "version": "0.1.10",
    "publisher": "formulahendry",
    "engines": {
        "vscode": "^1.52.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onLanguage:html",
        "onLanguage:xml",
        "onLanguage:php",
        "onLanguage:javascript"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "configuration": {
            "type": "object",
            "title": "Auto Rename Tag",
            "properties": {
                "auto-rename-tag.activationOnLanguage": {
                    "type": "array",
                    "default": ["*"],
                    "description": "Set the languages that the extension will be activated"
                }
            }
        }
    },
    "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.52.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.4",
        "@types/node": "^12.11.7",
        "eslint": "^7.10.0",
        "glob": "^7.1.6",
        "mocha": "^8.1.3",
        "typescript": "^4.0.3",
        "vscode-test": "^1.4.0"
    }
}

• name: 扩展的名称。
• displayName: 扩展的显示名称。
• description: 扩展的描述。
• version: 扩展的版本号。
• publisher: 扩展的发布者