如何在Visual Studio Code中自定义JSON文件右键执行JS代码的操作?
实现VSCode右键JSON文件执行自定义JS脚本并显示结果
当然可以实现!我给你两种实用的方案,分别适合快速上手和长期灵活使用:
方案一:无需编写扩展,用任务+自定义右键菜单(快速实现)
这个方案适合快速搞定,不需要额外开发扩展,结果会输出到VSCode终端:
- 配置任务文件
在你的项目根目录下的.vscode文件夹里创建tasks.json(如果没有.vscode文件夹就新建一个),填入以下内容:
{ "version": "2.0.0", "tasks": [ { "label": "Execute example.js", "type": "shell", "command": "node ${workspaceFolder}/example.js ${file}", "presentation": { "reveal": "always", // 执行时自动打开终端 "panel": "shared" }, "when": "resourceExtname == .json" // 只对JSON文件生效 } ] }
- 修改你的example.js脚本
原来的脚本需要调整,因为要接收右键选中的JSON文件路径作为参数,修改成这样:
// example.js const fs = require('fs'); // 获取命令行传入的JSON文件路径 const jsonFilePath = process.argv[2]; // 读取并解析JSON文件(注意你的example.json里的id值要加引号,比如"a",不然JSON解析会报错) const fileContent = fs.readFileSync(jsonFilePath, 'utf8'); const data = JSON.parse(fileContent); // 你的业务逻辑:计算数组长度 const result = data.length; // 输出结果到终端 console.log(`✅ JSON数组的长度是:${result}`);
- 添加右键菜单选项
打开VSCode的键盘快捷方式JSON配置(按Ctrl+Shift+P,输入Open Keyboard Shortcuts (JSON)),添加以下内容:
{ "key": "", // 不需要绑定快捷键,只在右键菜单显示 "command": "workbench.action.tasks.runTask", "args": "Execute example.js", "when": "resourceExtname == .json && explorerViewletVisible && filesExplorerFocus", "menus": [ { "id": "explorer/context", "when": "resourceExtname == .json", "group": "navigation@100" // 控制菜单位置,数字越大越靠下 } ] }
现在右键点击JSON文件,就能看到Execute example.js的选项了,点击后终端会输出结果。
方案二:编写简单VSCode扩展(支持弹窗显示结果,更灵活)
如果想要弹窗显示结果,或者后续要扩展更多功能,推荐写一个轻量扩展:
- 初始化扩展项目
先全局安装扩展生成工具:
npm install -g yo generator-code
然后运行yo code,选择New Extension (JavaScript),跟着向导填写项目信息,生成扩展模板。
- 修改扩展逻辑
打开生成的extension.js,替换成以下代码:
const vscode = require('vscode'); const fs = require('fs'); function activate(context) { // 注册自定义命令 let disposable = vscode.commands.registerCommand('json-exec.executeExampleJs', async (uri) => { // 校验是否是JSON文件 if (!uri || uri.fsPath.split('.').pop() !== 'json') { vscode.window.showErrorMessage('请右键点击JSON文件执行此命令!'); return; } try { // 读取并解析JSON文件 const jsonContent = fs.readFileSync(uri.fsPath, 'utf8'); const data = JSON.parse(jsonContent); // 执行你的业务逻辑 const result = data.length; // 弹窗显示结果 vscode.window.showInformationMessage(`✅ JSON数组长度:${result}`); } catch (err) { vscode.window.showErrorMessage(`执行出错:${err.message}`); } }); context.subscriptions.push(disposable); } function deactivate() {} module.exports = { activate, deactivate };
- 配置右键菜单和命令
打开package.json,找到contributes字段,替换成以下内容:
"contributes": { "commands": [ { "command": "json-exec.executeExampleJs", "title": "Execute example.js" } ], "menus": { "explorer/context": [ { "command": "json-exec.executeExampleJs", "when": "resourceExtname == .json", "group": "myCommands@1" } ] } }
- 测试扩展
按F5启动扩展开发窗口,在这个窗口里右键点击JSON文件,就能看到Execute example.js选项,点击后会弹出提示框显示结果。
内容的提问来源于stack exchange,提问作者spaceman




