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

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

vscode-json/
├── .vscode/
│   ├── extensions.json
│   ├── settings.json
│   └── launch.json
├── src/
│   ├── extension.ts
│   ├── package.json
│   └── README.md
├── .gitignore
├── LICENSE
└── README.md

• .vscode/: 包含VSCode的配置文件，如扩展推荐、设置和启动配置。
  • extensions.json: 推荐安装的扩展列表。
  • settings.json: 项目特定的VSCode设置。
  • launch.json: 调试配置文件。
• src/: 源代码目录。
  • extension.ts: 插件的主入口文件。
  • package.json: 插件的元数据和依赖项。
  • README.md: 项目的说明文档。
• .gitignore: Git忽略文件配置。
• LICENSE: 项目的许可证。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

extension.ts

extension.ts 是插件的主入口文件，负责注册命令和激活插件。以下是文件的主要内容：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "vscode-json" is now active!');

    let disposable = vscode.commands.registerCommand('extension.prettyJson', () => {
        // 执行美化JSON的命令
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

• activate: 插件激活时调用的函数，注册命令并执行初始化操作。
• deactivate: 插件停用时调用的函数。

3. 项目的配置文件介绍

package.json

package.json 是插件的元数据和依赖项配置文件。以下是文件的主要内容：

{
    "name": "vscode-json",
    "displayName": "VSCode JSON",
    "description": "美化JSON数据格式",
    "version": "1.0.0",
    "publisher": "zainchen",
    "engines": {
        "vscode": "^1.50.0"
    },
    "categories": [
        "Formatters"
    ],
    "activationEvents": [
        "onCommand:extension.prettyJson"
    ],
    "main": "./src/extension.ts",
    "contributes": {
        "commands": [
            {
                "command": "extension.prettyJson",
                "title": "美化JSON"
            }
        ]
    },
    "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.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: 插件的发布者。
• engines: 插件支持的VSCode版本。
• categories: 插件的分类。
• activationEvents: 插件的激活事件。
• main: 插件的主入口文件。
• contributes: 插件的贡献