自定义项目设置面板

面板介绍

项目设置 里存放的是和项目运行相关的配置，这部分配置存放在项目目录下的 settings 文件夹中，需要纳入版本管理，多人共享配置，否则可能导致不同机器上运行不一致的问题。

可在顶部菜单栏中找到 项目 -> 项目设置 菜单，如下图所示：

project-settings-menu

点击后可打开设置设置面板，如下图所示：

project-settings-panel

项目设置面板左侧是功能模块选项卡，右侧则对应功能的配置修改界面。

我们可以通过自定义此面板的显示数据，为项目新增自定义配置，借助项目设置面板实现项目配置的可视化管理。

如果想对所有项目都生效，则需要自定义编辑器相关的配置，请参考文档 自定义偏好设置。

自定义项目设置 功能允许一个我们注册多个选项卡，所以左侧选项卡上会有一行小字，标示选项卡属于哪一个功能。

数据配置与显示

自定义项目设置需要依赖数据配置，需要先在 contributions.profile.project 里定义好相关数据字段。

注意：项目设置里的配置数据，都应该存放在 profile.project 字段中。

当定义好数据字段后，还需要在 contributions.project 字段里定义需要显示的数据以及用什么 UI 组件来显示。如下所示：

  1. // package.json
  2. {
  3.     "name": "project-test",
  4.     "contributions": {
  5.         "profile": {
  6.             "project": {
  7.                 "foo": {
  8.                     "default": 1
  9.                 },
  10.                 "foo1": {
  11.                     "default": 0.4
  12.                 },
  13.                 "foo2": {
  14.                     "default": false
  15.                 },
  16.                 "foo3": {
  17.                     "default": 0
  18.                 },
  19.                 "foo4": {
  20.                     "default": "label"
  21.                 }
  22.             }
  23.         },        
  24.         "project": {
  25.             "tab1": {
  26.                 "label": "test",
  27.                 "content": {
  28.                     "foo": {
  29.                         "ui": "ui-num-input"
  30.                     },
  31.                     "foo1": {
  32.                         "ui": "ui-slider",
  33.                         "attributes": {
  34.                             "min": 0,
  35.                             "max": 1,
  36.                             "step": 0.1
  37.                         }
  38.                     },
  39.                     "foo2": {
  40.                         "ui": "ui-checkbox"
  41.                     },
  42.                     "foo3": {
  43.                         "ui": "ui-select",
  44.                         "items": [
  45.                             {
  46.                                 "value": 0,
  47.                                 "label": "ITEM 0"
  48.                             },
  49.                             {
  50.                                 "value": 1,
  51.                                 "label": "ITEM 1"
  52.                             },
  53.                             {
  54.                                 "value": 2,
  55.                                 "label": "ITEM 2"
  56.                             }
  57.                         ]
  58.                     }
  59.                 }
  60.             },
  61.             "tab2": {
  62.                 "label": "test2",
  63.                 "content": {
  64.                     "foo4": {
  65.                         "ui": "ui-input"
  66.                     }
  67.                 }
  68.             }
  69.         }        
  70.     }
  71. }

上面的示例中，在 contributions.profile.project 字段定义了 4 个数据项： foo、foo1、foo2、foo3。

关于如何定义 profile 相关配置，请参看 配置系统。

在 contributions.project 字段中定义了 2 个标签页：test、tes2。

在 test 标签页中，对 4 个数据项分别做了配置，具体的配置属性请看后面的 UI 组件配置。

在扩展管理器列表中刷新扩展后，通过 项目 -> 项目设置 菜单再次打开 项目设置面板, 可看到如下界面：

project-settings-panel-custom

UI 组件配置

本示例展示了 4 种常见 UI 组件在自定义项目设置面板时的用法，理论上所有带 value 属性的 UI 组件都可以用于自定义项目设置面板，具体用法请参考文档 UI 组件。