Alauda Frontend VSCode Snippets

Alauda Frontend VSCode Snippets for Alauda UI and Common Library

TOC

• 安装
• 目的
• 开发指南
• 验证方式
• 发布

安装

VSCode alauda-snippets

目的

本插件是用户在使用 VSCode 开发时，可自定义的一些代码片段缩写，通过配置一些省略语与常见代码片段的映射关系，可以极大提高开发人员的编码效率。本代码库则是为 Alauda 业务开发时提供的配置。

具体的 VSCode snippets 定义规范可见 官方文档

为进行后续说明，举一个简单的例子。通过项目根路径创建一个 .vscode 文件，并新建一个 snippets.code-snippets 文件，可以为项目配置一个全局的 snippets 配置文件，并在其中插入：

{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "scopes": "typescript",
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

则可生成一项 snippets 配置，其中，"For Loop" 是此项配置的描述，prefix 可以是一个数组或者字符串，指的是用户在键入对应内容或者内容的前缀时会触发片段映射。scopes 可以是一个数组或者字符串，指的是本配置生效的文件格式。当用户在 .ts 文件键入 for 或者 for-const 的部分前缀时，VSCode 出现 description 提示，回车选中则会自动跳出 body 中的语句，，其中的 $0, $1 代表按下 Tab 键跳转顺序，其他具体功能可查阅上述规范链接。

alauda-snippets 正是以插件的形式配置我们业务开发时的常用代码片段。

开发指南

进入项目后，可在 src/snippets 下查阅，修改已有配置，或新增其他业务通用的代码片段。所有的新增的配置内容，应当从 acl, aui（或其他文件夹）的 index.ts 文件集中导入后通统一导出。编写配置项时可参考：

export const button: SnippetDefinition = {
  'aui-button-example': {
    prefix: 'aui-button-example',
    scopes: SnippetScope.HTML,
    body: /* HTML */ `
      <button aui-button>$1</button>
    `,
  },
}

其中 SnippetDefinition 要求必须填入 prefix 和 body，scopes 不填默认支持所有。SnippetScope 枚举支持 html 与 typescript 模式。其中的 /* HTML */ 用于帮助 prettier 优化 .ts 文件中 HTML 代码格式。

yarn dev 进入开发监听模式，进行的任何调整保存时都会自动 build 并在当前项目内立即生效。

验证方式

在 src/snippets 下进行修改已有项或者新增的文件，应当在 test/fixtures 下新建文件或者片段进行测试。

1. 直接在相应的 test 文件下通过键入验证调整是否正确。
2. 查看文件项目目录的 .vscode 文件夹下的 html.code-snippets 以及 typescript.code-snippets，查看新增的调整是否更新到配置中。

发布

日常开发时，如果有业务中经常用到的代码片段缩写，可以提 PR 到 master 分支，手动调整 package.json 文件的 version，PR 通过后，流水线会自动进行版本发布。