Remote Config VS Code 插件教程

# Remote Config VS Code 插件教程

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

# 下载 VS Code 并安装插件

# 下载安装 VS Code

VS Code 下载地址 (opens new window),详细的安装教程请参照官方文档。

# 下载安装插件

插件下载地址(最新版本:0.3.5)

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

install_extension

# 更新插件

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

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

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"
                }
            ]
        },
        // 可配置多个环境,用名字区分
        ...
    ]
}
  1. 完成上述步骤之后,点击插件的图标,完成初始化。如果有报错,请联系 BytePower 组的同事。
  2. 此时插件的目录结构如下图所示:
    1. 目录的第一级为环境名称,例如图中的 testproduction
    2. 目录的第二级为 App 的名称,例如图中的 WalkRunFast
    3. 目录的第三级为每个 App 下的配置文件的名称,代表了一类配置文件,例如图中的 walk_configs
    4. 目录的第四级为每个配置文件的 config_id,括号内为本地文件的名称,点击配置文件,在右侧可以看到配置文件的内容。

init_finish

# 管理配置文件

# 下载配置文件

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

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

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

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

download_config

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

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

download_config

# 下载单个配置文件

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

download_single_config

# 新增配置文件

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

new_config_file

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

upload_to_cms

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

upload_to_cms_2

注意

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

# 修改配置文件

修改配置文件分为 3 步

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

upload_config upload_config

注意

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

# 查看配置文件的详情

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

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

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

detail

# 对比版本差异

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

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

compare_difference

# 分组管理配置文件

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

# 添加标签

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

# 修改标签

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

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

add_edit_tag

# 编辑配置文件辅助功能

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

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

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

diff_tool

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

diff_1

diff_2

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

comparing

# 展现 JSON 文件的树形结构

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

json_plugin

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

json_tree

# JSON 文件格式化

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

json_plugin

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

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

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

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

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

json_editor_icon

json_editor_show

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

  • 编辑 JSON 文件中 key/value 的值
  • 通过拖拽来调整节点在 JSON 文件中的位置
  • 插入、复制、删除、搜索节点,变换节点数据类型
上次更新: 2022-10-26 20:21:34