VSCode插件开发-文件统计功能

修改package.json

在开发 VS Code 插件时，package.json 是整个插件的“说明书”。这里以一个简单的功能为例进行测试

"activationEvents": ["onCommand:code-auto-test.getFileState"],
"main": "./out/extension.js",
"contributes": {
  "commands": [
    {
      "command": "code-auto-test.getFileState",
      "title": "File State",
      "category": "Code Auto Test"
    }
  ],
  "menus": {
    "editor/context": [
      {
        "when": "editorFocus",
        "command": "code-auto-test.getFileState",
        "group": "navigation"
      }
    ],
    "explorer/context": [
      {
        "command": "code-auto-test.getFileState",
        "group": "navigation"
      }
    ]
  }
}

"activationEvents": ["onCommand:code-auto-test.getFileState"]

• 意义：插件不会在 VS Code 启动时就加载，而是在用户执行命令 code-auto-test.getFileState 时激活。
• 优势：提升启动性能，遵循 VS Code 插件的延迟加载机制。

指定插件的主入口

"main": "./out/extension.js"

• 指向插件的主模块，通常是 TypeScript 编译后的文件。
• extension.js 中通常包含 activate(context) 和 deactivate() 函数，用于插件的生命周期管理。

注册自定义命令

"commands": [
  {
    "command": "code-auto-test.getFileState",
    "title": "File State",
    "category": "Code Auto Test"
  }
]

• command：命令的唯一标识符，供代码调用。
• title：在命令面板（Ctrl+Shift+P）中的显示名称。
• category：命令分类，显示为 "Code Auto Test: File State"。

执行位置包括：

• 命令面板
• 上下文菜单（通过 menus 配置）

集成到右键菜单中

编辑器右键菜单

"editor/context": [
  {
    "when": "editorFocus",
    "command": "code-auto-test.getFileState",
    "group": "navigation"
  }
]

• 插入位置：当编辑器中有焦点时，在右键菜单的“导航”区域显示。
• when: 上下文条件，这里为 editorFocus 表示编辑器有焦点时才显示。

资源管理器右键菜单

"explorer/context": [
  {
    "command": "code-auto-test.getFileState",
    "group": "navigation"
  }
]

• 插入位置：资源管理器（文件树）右键菜单中。
• 可用于对选中的文件/文件夹执行操作。

通过这段简单的配置，我们实现了一个功能完整的 VS Code 插件功能点：

功能	实现方式
延迟激活	activationEvents 指定命令触发激活
注册命令	contributes.commands
集成编辑器右键菜单	menus.editor/context
集成资源管理器右键菜单	menus.explorer/context

这套模式是编写 VS Code 插件的基础，适用于各种需要通过右键或命令面板触发逻辑的场景，比如自动测试、代码分析、格式化工具等。

修改extension.ts

查看文件状态的命令实现（extension.ts）

我们前面在 package.json 中注册了命令 code-auto-test.getFileState，接下来在插件主入口文件中进行具体实现。

文件路径：src/extension.ts

// 引入 VS Code 扩展 API
import * as vscode from 'vscode';
import * as fs from 'fs';

// 插件激活时触发
export function activate(context: vscode.ExtensionContext) {
	console.log('插件已激活：code-auto-test');

	// 注册 getFileState 命令
	const disposable = vscode.commands.registerCommand('code-auto-test.getFileState', (uri: vscode.Uri) => {
		// 获取文件路径
		const filePath = uri.fsPath;

		// 异步获取文件信息
		fs.stat(filePath, (err, stats) => {
			if (err) {
				vscode.window.showErrorMessage(`获取文件信息失败: ${err.message}`);
				return;
			}

			// 判断是否为文件夹
			if (stats.isDirectory()) {
				vscode.window.showWarningMessage('检测的是文件夹，不是文件，请重新选择！');
				return;
			}

			// 若是普通文件，显示基本信息
			if (stats.isFile()) {
				const size = stats.size;
				const createTime = stats.birthtime.toLocaleString();
				const modifyTime = stats.mtime.toLocaleString();

				vscode.window.showInformationMessage(
					` 文件大小: ${size} 字节\n 创建时间: ${createTime}\n 修改时间: ${modifyTime}`,
					{ modal: true }
				);
			}
		});

		// 调试用：同步读取 stat 信息输出日志
		try {
			const statsSync = fs.statSync(filePath);
			console.log('statSync:', statsSync);
			console.log('isFile:', statsSync.isFile());
		} catch (err) {
			console.error('statSync 读取失败:', err);
		}
	});

	// 将命令加入插件上下文中
	context.subscriptions.push(disposable);
}

// 插件被卸载时触发
export function deactivate() {}

功能点	说明
vscode.Uri	命令参数自动传入，支持从资源管理器中点击文件触发命令。
fs.stat()	异步获取文件状态，包含文件大小、创建时间、修改时间等。
fs.statSync()	同步版本，用于调试或日志输出。
vscode.window.showInformationMessage(..., { modal: true })	使用模态窗口展示信息，确保用户注意查看。

在编辑器中右键文件：

• 显示：File State
• 点击后弹出文件大小、创建时间、修改时间

在资源管理器中右键文件：

• 同样支持显示该命令
• 若选中文件夹则给出提示

通过 package.json + extension.ts，我们构建了一个结构完整、功能清晰的 VS Code 插件，具备以下特征：

• 延迟激活（按需加载）
• 支持右键菜单调用
• 使用原生 Node.js 文件系统 API 获取信息
• 弹出信息提示（用户交互友好）