0

0

VSCode 如何设置编辑器的右键菜单选项 VSCode 编辑器右键菜单选项的设置技巧​

星夢妙者

星夢妙者

发布时间:2025-08-15 10:17:01

|

1066人浏览过

|

来源于php中文网

原创

定制vscode右键菜单需编辑settings.json文件,通过配置"editor.contextmenu"数组实现;2. 每个菜单项包含command(命令id)、group(分组与排序)和when(显示条件)属性;3. 命令id可通过命令面板搜索获取,如"format document"对应"editor.action.formatdocument";4. 使用when子句可控制菜单项显示条件,如"editorlangid == javascript"限定仅javascript文件显示;5. 自定义菜单项需开发vscode扩展,使用package.json注册命令并绑定到"editor/context"菜单;6. group属性格式为"组名@排序",预设组如navigation、1_modification、9_cutcopypaste、z_commands等,数字越小排序越靠前;7. 若配置不生效,应检查json语法、命令id正确性、when条件是否满足,并尝试重新加载或重启vscode。所有配置均需保存后生效,且正确无误才能正常显示菜单项。

VSCode 如何设置编辑器的右键菜单选项 VSCode 编辑器右键菜单选项的设置技巧​

VSCode 编辑器的右键菜单定制,其实就是修改

settings.json
文件,通过配置
editor.contextmenu
来实现。让常用的功能触手可及,提高开发效率。

解决方案

要定制 VSCode 的右键菜单,需要编辑

settings.json
文件。可以通过以下步骤操作:

  1. 打开 VSCode,按下
    Ctrl+Shift+P
    (Windows/Linux) 或
    Cmd+Shift+P
    (macOS) 打开命令面板。
  2. 输入 "Preferences: Open Settings (JSON)" 并选择该选项,打开
    settings.json
    文件。
  3. settings.json
    文件中,添加或修改
    editor.contextmenu
    属性。该属性是一个数组,每个元素定义一个菜单项。

editor.contextmenu
的基本结构如下:

"editor.contextmenu": [
    {
        "command": "命令ID",
        "group": "组名@排序",
        "when": "条件"
    }
]
  • command
    : 要执行的命令 ID。可以通过命令面板 (
    Ctrl+Shift+P
    Cmd+Shift+P
    ) 查找命令 ID。
  • group
    : 指定菜单项所属的组,以及在组内的排序。格式为
    组名@排序
    。常见的组名包括
    navigation
    1_modification
    9_cutcopypaste
    z_commands
    等。排序使用数字,数字越小,排序越靠前。
  • when
    : 可选属性,指定菜单项的显示条件。例如,
    editorFocus
    表示只有在编辑器获得焦点时才显示。

举个例子,如果想把 "Format Document" 命令添加到右键菜单,可以这样配置:

"editor.contextmenu": [
    {
        "command": "editor.action.formatDocument",
        "group": "1_modification@1"
    }
]

这个配置会将 "Format Document" 命令添加到

1_modification
组的最前面。

如何查找 VSCode 命令 ID?

查找 VSCode 命令 ID 最简单的方法是使用命令面板。

  1. 按下
    Ctrl+Shift+P
    (Windows/Linux) 或
    Cmd+Shift+P
    (macOS) 打开命令面板。
  2. 输入你想添加的命令的名称,例如 "Format Document"。
  3. 在搜索结果中,可以看到命令的名称和 ID。命令 ID 通常以
    editor.action.
    开头。

例如,"Format Document" 命令的 ID 是

editor.action.formatDocument

如何自定义右键菜单的显示条件?

when
属性可以用来控制右键菜单项的显示条件。VSCode 提供了很多内置的
when
子句,可以根据不同的情况显示不同的菜单项。

一些常用的

when
子句包括:

  • editorFocus
    : 编辑器获得焦点时显示。
  • editorHasSelection
    : 编辑器中有选中文本时显示。
  • editorLangId == javascript
    : 编辑器打开的是 JavaScript 文件时显示。
  • resourceExtname == .json
    : 打开的是 JSON 文件时显示。
  • resourceScheme == file
    : 打开的是本地文件时显示。

例如,如果想只在 JavaScript 文件中显示 "Format Document" 命令,可以这样配置:

"editor.contextmenu": [
    {
        "command": "editor.action.formatDocument",
        "group": "1_modification@1",
        "when": "editorLangId == javascript"
    }
]

这样,只有在打开 JavaScript 文件时,右键菜单才会显示 "Format Document" 命令。

如何添加自定义的右键菜单项?

视野自助系统小型企业版2.0 Build 20050310
视野自助系统小型企业版2.0 Build 20050310

自定义设置的程度更高可以满足大部分中小型企业的建站需求,同时修正了上一版中发现的BUG,优化了核心的代码占用的服务器资源更少,执行速度比上一版更快 主要的特色功能如下: 1)特色的菜单设置功能,菜单设置分为顶部菜单和底部菜单,每一项都可以进行更名、选择是否隐 藏,排序等。 2)增加企业基本信息设置功能,输入的企业信息可以在网页底部的醒目位置看到。 3)增加了在线编辑功能,输入产品信息,企业介绍等栏

下载

除了使用 VSCode 内置的命令,还可以添加自定义的右键菜单项。这需要使用 VSCode 的扩展 API。

首先,需要创建一个 VSCode 扩展。然后在扩展的代码中,使用

vscode.commands.registerCommand
注册一个命令,并使用
vscode.commands.executeCommand
执行该命令。

然后在

package.json
文件中,配置
contributes.menus.editor/context
属性,将自定义命令添加到右键菜单。

例如,以下是一个简单的示例:

// package.json
{
    "contributes": {
        "menus": {
            "editor/context": [
                {
                    "command": "myExtension.helloWorld",
                    "group": "z_commands",
                    "when": "editorFocus"
                }
            ]
        },
        "commands": [
            {
                "command": "myExtension.helloWorld",
                "title": "Hello World"
            }
        ]
    }
}

// extension.js
const vscode = require('vscode');

function activate(context) {
    let disposable = vscode.commands.registerCommand('myExtension.helloWorld', function () {
        vscode.window.showInformationMessage('Hello World from My Extension!');
    });

    context.subscriptions.push(disposable);
}

exports.activate = activate;

这个示例会在右键菜单的 "z_commands" 组中添加一个名为 "Hello World" 的菜单项。点击该菜单项会显示一个 "Hello World from My Extension!" 的消息框。

如何对右键菜单进行分组和排序?

group
属性用于对右键菜单进行分组和排序。
group
属性的格式为
组名@排序

VSCode 预定义了一些常用的组名,例如:

  • navigation
    : 导航相关的命令。
  • 1_modification
    : 修改相关的命令。
  • 9_cutcopypaste
    : 剪切、复制、粘贴相关的命令。
  • z_commands
    : 自定义命令。

排序使用数字,数字越小,排序越靠前。例如,

1_modification@1
表示
1_modification
组的最前面。

如果想创建一个新的组,可以使用自定义的组名。例如,

myGroup@1

需要注意的是,VSCode 会按照组名和排序对右键菜单进行排序。因此,选择合适的组名和排序可以使右键菜单更加清晰和易于使用。

如何解决右键菜单配置不生效的问题?

如果修改了

settings.json
文件,但右键菜单没有更新,可以尝试以下方法:

  1. 重新加载 VSCode:按下
    Ctrl+Shift+P
    (Windows/Linux) 或
    Cmd+Shift+P
    (macOS) 打开命令面板,输入 "Reload Window" 并选择该选项。
  2. 检查
    settings.json
    文件是否有语法错误:VSCode 会在编辑器中显示语法错误。
  3. 检查
    command
    是否正确:确保命令 ID 是正确的。
  4. 检查
    when
    子句是否正确:确保
    when
    子句的条件是满足的。
  5. 重启 VSCode:有时候重启 VSCode 可以解决一些奇怪的问题。

如果以上方法都不能解决问题,可以尝试删除

settings.json
文件,然后重新配置。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

420

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

536

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

804

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

435

2024.06.27

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

809

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1129

2023.07.27

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.6万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号