Remote Config VS Code 插件教程

使用 VS Code 并安装此插件，你可以管理存储在 BytePower Remote Config 上的配置文件，功能包括新增、修改、查看文件详情、对比版本差异等。

下载 VS Code 并安装插件

下载安装 VS Code

VS Code 下载地址，详细的安装教程请参照官方文档。

下载安装插件

插件下载地址（最新版本：0.3.5）

如图所示，打开 VS Code，点击左侧菜单栏 Extensions 图标，然后点击菜单中的 Install from VSIX，选择本地的插件文件即可安装成功。

更新插件

目前此插件不支持自动更新，所以在新版本的插件发布之后，我们会把最新的插件安装包发给你，你需要做的是卸载，然后安装新的插件。

如图所示，首先点击左侧菜单栏 Extensions 图标，会自动显示已经安装的插件，找到 BytePower Remote Config Assistant，点击设置图标，然后点击 Uninstall。

插件的初始化配置

1. 在本地创建一个用来存放所有配置文件的空文件夹，并使用 VS Code 打开。
2. 使用 VS Code 在这个空文件夹内再创建一个新的文件夹，命名为 .config，然后选中此文件夹，创建一个新的文件，命名为 .config.json。
3. 在 .config.json 文件中，写入 BytePower Remote Config 相关的配置，请向 BytePower 组的同事申请。内容格式如下：

{
    "environments": [
        {
            "environment_name": "Test", // 配置根环境名称，必须唯一。一般用于区分测试和开发环境，本地会同步生成同名文件夹
            "domain": "console.bytepowerapp.cn", // 配置当前环境的 api 地址的一级域名
            "operator": "someone@ihandysoft.com", // 配置当前环境的操作用户，必须为有效 BP 用户，为空的话仅能执行查询操作，无法上传配置文件
            "applications": [
                {
                    "application_name": "test-app", // 配置 App 名称，必须唯一。用于树形菜单显示，本地会同步生成同名文件夹
                    "application_id": "APP3HGLRQILDI", // 配置 App ID，必须唯一。用于 api 接口访问
                    "ignore_collections": [
                        "prometheus_group" // 配置需要忽略的 collection，用于在树形菜单下隐藏某些不需要显示的项，可选
                    ]
                },
                {
                    "application_name": "prometheus",
                    "application_id": "APPDDT5JEIE"
                }
            ]
        },
        // 可配置多个环境，用名字区分
        ...
    ]
}

4. 完成上述步骤之后，点击插件的图标，完成初始化。如果有报错，请联系 BytePower 组的同事。
5. 此时插件的目录结构如下图所示：
   1. 目录的第一级为环境名称，例如图中的 test 和 production。
   2. 目录的第二级为 App 的名称，例如图中的 Walk 和 RunFast。
   3. 目录的第三级为每个 App 下的配置文件的名称，代表了一类配置文件，例如图中的 walk_configs。
   4. 目录的第四级为每个配置文件的 config_id，括号内为本地文件的名称，点击配置文件，在右侧可以看到配置文件的内容。

管理配置文件

下载配置文件

下载配置文件是最常用到的功能，此插件提供了三种不同的下载方式。

1. 下载所有环境、所有 App 的全部配置文件。
2. 下载指定环境下指定 App 的全部配置文件。
3. 下载单个配置文件。

下载所有环境、所有 App 的全部配置文件

按钮如下图所示，点击此按钮，插件会同步所有的线上最新配置到本地。

下载指定环境下指定 App 的全部配置文件

按钮如下图所示，点击此按钮，插件会同步指定 App 下的所有线上配置到本地。

下载单个配置文件

选中你想要下载的配置文件，右键点击，然后点击菜单中的 Download from BytePower CMS，如下图所示，插件会把此配置的线上版本到本地。

新增配置文件

1. 首先切换到系统文件目录，选中你要增加的配置文件对应的文件夹，创建一个新文件，文件命名的格式推荐使用 <config_id> + .json。例如如果你要增加一个 config_id 为 20 的配置，那么推荐命名为 20.json

2. 编辑完配置文件之后，选中此文件右键点击，出现菜单，然后点击 Upload to BytePower CMS

3. 此时在 VS Code 的上方出现输入框，依照输入框内的提示，依次输入此配置文件的 config_id/tag/description，每次填写之后，点击回车完成输入，然后此配置文件会被上传到 BytePower Remote Config。

注意

同一 App 下同一类配置的多个配置文件，不可以使用相同的 config_id。
新增配置文件填写配置信息时，config_id 为必填项。

修改配置文件

修改配置文件分为 3 步

1. 在修改之前，首先需要把 BytePower Remote Config 上最新版本的配置文件下载到本地。
2. 选中要修改的配置文件，进行修改，修改完成后记得按 cmd(ctrl) + s 保存。
3. 在插件的目录中，右键点击修改完成的配置文件，然后点击菜单选项中的 Upload to BytePower CMS，此时在 VS Code 上方出现输入框，可以填写此次更新的记录（选填），填写完按回车上传。

注意

在修改配置文件之前，一定要从 BytePower Remote Config 中下载最新版本的配置文件，否则本地的修改无法上传。 目前不支持多端同时修改同一份配置文件。

查看配置文件的详情

通过此插件，可以查看本地配置文件的详细信息，包括如下几项：

• Config ID: 此配置文件的 ID，在当前种类配置文件下保持唯一。
• Commit Code: 配置文件的版本号，每修改并 upload 一次，版本号自动 +1，初始版本号为 1。
• Tag: 配置文件的标签。
• Description: 当前版本的配置文件的描述。
• Update Time: 配置文件的更新时间，即配置的当前版本的创建时间。

查看方式：在插件的目录中，右键点击某一配置文件，点击 Detail，然后会在右侧显示上述几项信息。

对比版本差异

利用此插件，可以查看同一配置文件（相同 config_id）当前版本和上一版本之间的变化。

查看方式：在插件的文件目录中，右键点击要对比的配置文件，选择 Compare Last Version Difference，然后 VS Code 编辑区域会展示两个版本的对比（左侧为当前版本，右侧为上一版本）。

分组管理配置文件

你可以为每个配置文件设置一个标签，拥有同样标签的配置文件，会自动被划分到同一目录下，以便于对大量的配置文件进行分组管理。

添加标签

1. 在插件的文件目录中，选中某个没有标签的配置文件，右键点击，然后点击 Add Tag。
2. 在输入框中输入此配置文件的 tag，点击回车完成添加。
3. 给多个配置文件添加此标签，即可看到相同 tag 的配置文件被划分到同一目录下。

修改标签

1. 在插件的文件目录中，选中某个有标签配置文件右键点击，然后点击 Change Tag。
2. 在输入框中输入此配置文件更改之后的 tag，点击回车完成更改。
3. 更改 tag 成功之后的配置文件，会被自动划分到新的目录下。

添加、修改标签的操作如下图所示：

编辑配置文件辅助功能

目前大多数配置文件都是 JSON 格式，通过安装第三方插件，可以实现以下功能，让你更加便捷、直观地编写 JSON 文件。

对比任意两个 JSON 文件的差异

搜索、下载、安装 Diff Tool 这个 VS Code 插件。

把两个配置文件分别打开，在右侧展示。在第一个文件内点击右键，选择 DiffTool: Mark 1st file，然后切换到第二个文件，选择 DiffTool: Mark 2nd file。

此时对比两个文件差异的窗口会自动显示：

展现 JSON 文件的树形结构

搜索、下载、安装 json 这个 VS Code 插件。

打开一个 JSON 文件，点击左侧插件的图标，即可看到这个 JSON 文件的树形结构。

JSON 文件格式化

搜索、下载、安装 json tools 这个 VS Code 插件。

打开一个 JSON 文件，使用 Ctrl(command) + Alt(option) + M 可以进行格式化，使用 Alt(option) + M，可以使 JSON 文件最小化。

需要注意的是，如果 JSON 文件格式不正确，是无法格式化的，需要先进行修正。

在 VS Code WebView 中查看、编辑 JSON 文件

首先，请下载并安装 JSON Editor 插件，安装的方式和 BytePower CMS 插件一样。

如图所示，打开一个 JSON 文件，然后点击 Editor，可以在 VS Code 中打开一个 WebView。

在这个 WebView 中，你可以对 JSON 文件进行以下操作：

• 编辑 JSON 文件中 key/value 的值
• 通过拖拽来调整节点在 JSON 文件中的位置
• 插入、复制、删除、搜索节点，变换节点数据类型