You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Visual Studio Code中自定义JSON文件右键执行JS代码的操作?

实现VSCode右键JSON文件执行自定义JS脚本并显示结果

当然可以实现!我给你两种实用的方案,分别适合快速上手和长期灵活使用:

方案一:无需编写扩展,用任务+自定义右键菜单(快速实现)

这个方案适合快速搞定,不需要额外开发扩展,结果会输出到VSCode终端:

  1. 配置任务文件
    在你的项目根目录下的.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文件生效
    }
  ]
}
  1. 修改你的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}`);
  1. 添加右键菜单选项
    打开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扩展(支持弹窗显示结果,更灵活)

如果想要弹窗显示结果,或者后续要扩展更多功能,推荐写一个轻量扩展:

  1. 初始化扩展项目
    先全局安装扩展生成工具:
npm install -g yo generator-code

然后运行yo code,选择New Extension (JavaScript),跟着向导填写项目信息,生成扩展模板。

  1. 修改扩展逻辑
    打开生成的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
};
  1. 配置右键菜单和命令
    打开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"
            }
        ]
    }
}
  1. 测试扩展
    F5启动扩展开发窗口,在这个窗口里右键点击JSON文件,就能看到Execute example.js选项,点击后会弹出提示框显示结果。

内容的提问来源于stack exchange,提问作者spaceman

火山引擎 最新活动