扩展助手

我们将在 2023 年晚些时候停止使用助手功能，但您仍然可以在旧版本的 Sketch 或使用命令行界面中使用它。 了解更多信息

助手旨在进行重新利用。它们可以通过完全依赖他人编写的规则（包括 Sketch 提供的规则）来创建，这些规则只需要一个配置，定义哪些规则处于活动状态以及如何应用它们。

通常有三个理由扩展助手

  1. 在您自己的助手使用一个或多个其他人编写的规则。
  2. 调整现有助手的特定规则的配置。
  3. 禁用现有助手的一个或多个规则。

💡 只有在绝对必要时才编写自定义规则。如果您确实需要这样做，请考虑让您自己的规则 可配置，以便其他人可以在他们的助手中重复使用它们。

概述

助手由两个主要部分组成

  1. 一个规则列表，每个规则都包含实现您的规则想法的 JavaScript 逻辑。
  2. 指定哪些规则处于活动状态（以及规则选项的值，如果需要）的配置。

从助手扩展允许您在他们的规则列表和配置的基础上构建，同时可以选择进行调整。

通常，在定义单个助手时，它会作为默认导出进行导出，并采用返回助手定义的异步函数的形式。

const assistant: AssistantPackage = async (env) => {
  return {
    name: 'my-assistant',
    rules: [],
    config: { rules: {} },
  }
}

export default assistant

或者，如果您决定在其他助手之上构建助手，那么您将导出两个或多个助手的数组，将您的助手置于数组中的最后一个助手。

import UsefulAssistant from 'useful-assistant'

const assistant: AssistantPackage = [
  UsefulAssistant,
  async (env) => {
    return {
      name: 'my-assistant',
      rules: [],
      config: {
        rules: {
          'useful-assistant/beep': { active: false },
          'useful-assistant/boop': { active: true },
        },
      },
    }
  },
]

export default assistant

在上面的示例中，我们能够自由地配置 UsefulAssistant 提供的任何规则。具体来说，这里我们禁用了它的 beep 规则，并激活了它的 boop 规则。

💡 添加到 my-assistant 的配置将覆盖 UsefulAssistant 中任何现有规则的配置。换句话说，由数组中放置较后的助手定义的配置覆盖了由数组中放置较前的助手定义的配置。

扩展核心助手

我们专门开发了我们的 核心助手 以便扩展。它导出一个庞大且广泛有用的规则集，但不包含任何自己的配置。通过这种方式，它形成了一个空白画布，准备扩展。

我们官方的助手集大量使用了这种模式。它们每个都扩展了核心助手，只激活了核心规则的一个子集，以创建新的助手，每个助手都有一个专注的目的。探索它们的定义以获取更多示例。

💡 也可以扩展多个助手，将来自不同来源的规则混合搭配到一个新的助手。添加包含您自己的自定义规则的可能性，您可以选择最适合您的助手的规则。

示例

以下是关于如何创建一个从我们的 核心助手 扩展的助手的指南，只激活它的 groups-max-layers 规则，以确保 Sketch 文档中的组中最多允许三个图层。

首先，请遵循我们的指南 创建您的第一个助手，使用我们的入门项目。

由于我们正在扩展核心助手，因此我们首先需要使用 npm 将其添加为项目的依赖项。

npm install -S @sketch-hq/sketch-core-assistant

将项目 src/index.ts 的内容替换为以下内容：

import CoreAssistant from '@sketch-hq/sketch-core-assistant'
import { AssistantPackage } from '@sketch-hq/sketch-assistant-types'

const assistant: AssistantPackage = [
  CoreAssistant,
  async () => {
    return {
      name: 'sketch-assistant-template',
      rules: [],
      config: {
        rules: {
          '@sketch-hq/sketch-core-assistant/groups-max-layers': {
            active: true,
            maxLayers: 3,
            skipClasses: [],
          },
        },
      },
    }
  },
]

export default assistant

需要注意的几点

  • 我们在文件顶部导入了核心助手。
  • 我们将助手导出为数组，其中助手定义是最后一个元素，核心助手位于其前面的位置。
  • 我们激活了 groups-max-layers 并提供了它所需的所有选项，如它的 文档 中所述。

如果您还没有这样做，现在是时候在您的项目文件夹中运行 npm run package-tarball，并尝试将您的新助手添加到 Sketch 文档中。创建一个包含四个图层的组，您应该会看到一些结果 🎉