是不是很简单的就自定义了 VS Code 的样式？那我们现在就来分析一下我们上面做的事情。首先，我们修改了 package.json 里的配置，增加了一个 menus ，这个 menus 是什么呢？答案是菜单。菜单项定义包含选择时应调用的命令以及该项应显示的条件（when），所以你也可以给这个菜单项显示加个显示的逻辑，比如我们规定在打开 javascript 文件时才显示这个按钮：
{ "contributes": { "menus": { "editor/title": [ { "when": "resourceLangId == javascript", "command": "test.button", "group": "navigation" } ] } } }而 group 的含义呢，是用来定义菜单项的排序和分组的。来自官网的一个图，表示不同的 group 之间存在的顺序关系，当然这个菜单不是上面我们写的那个，而是 editor/context ，所以不同的菜单之间的 group 其实是有细微差别的，但是大体都差不多，而 navigation 的显示优先级是最高的：
我们也可以加一个这个看看：
"menus": { "editor/title": [ { "command": "test.button", "group": "navigation", "when": "resourceLangId == javascript" } ], "editor/context": [ { "command": "test.button", "group": "navigation", "when": "resourceLangId == javascript" } ] }效果是一样的：
如果你好奇还有哪些菜单，我这里简单整理「翻译」了一下官网的内容（仅常见菜单非全部）：
配置菜单项的名称 菜单位置commandPalette 全局命令面板
explorer/context 资源管理器上下文菜单
editor/context 编辑器右键上下文菜单
editor/title 编辑器标题栏，不配置图片就显示文字
editor/title/context 编辑器标题右键上下文菜单
debug/callstack/context 调试栈视图的上下文菜单
debug/toolbar 调试工具栏
scm/title SCM 标题菜单
view/title 看标题菜单
touchBar macOS 触摸栏
timeline/title 时间轴视图标题菜单栏
extension/context 扩展程序视图上下文菜单
六、做个总结
从上面的简单例子可以看出，VS Code 不仅可以支持我们自定义想要的命令，也允许我们在「限定范围内」对编辑器进行个性化的拓展。为什么说是限定范围呢？因为按官网的话来说，目前插件体系有下面这些局限性：
插件不具备访问 VS Code UI 的 DOM 的能力。所以不能将自定义的 CSS 应用于 VS Code 或将 HTML 元素添加到 VS Code UI 的扩展中去。这样的限制在于：
确保用户的操作在可控范围内，保证操作的一致性
防止因为底层 Web 技术的更迭导致对一些已存在的插件会有影响
保证开发人员可以继续在原有插件基础上进行一如往常的迭代，而不用再去打破原有的规则重新学习
其实我们今天的内容只是工作区拓展很小一部分内容，要学习这个庞大的体系，还是要不断的努力学习呀！下一次，我们来走进「声明类语言特性」，想知道编辑器里的自动提示和补全是怎么做到的嘛？