入门
我们将在 2023 年晚些时候停止使用助手功能,但您仍然可以在旧版本的 Sketch 或使用命令行界面中使用它。 了解更多信息
每个 Sketch 助手都是一个小型 JavaScript 项目,因此您需要在系统上安装 NodeJS 开发环境才能开始创建自己的助手。
要求
技能
- 您需要具备一些命令行技能
- 熟悉 Git 和 GitHub
- JavaScript 知识(理想情况下,还需了解一些 TypeScript,但这不是必需的)
NodeJS
您需要在系统上安装最新版本的 NodeJS,至少是 12 或更高版本。
您可能已经在系统上安装了 NodeJS,要检查是否已安装,请在终端中输入以下命令:
node --version
如果显示 12.x.x
或更高版本,则表示可以正常使用。否则,您有以下几种选择
编辑器
您还需要一个可以很好地处理 JavaScript 项目的编辑器。我们推荐 Visual Studio Code.
创建您的第一个助手
我们创建了 Sketch 助手模板 仓库,帮助您尽可能快地入门。这是一个最小的 Sketch 助手项目,其中包含所有正确配置的内容,可以立即使用。
按照以下步骤创建您的第一个助手项目,在本地构建它并将其添加到 Sketch 文档中
- 单击 此处,根据我们的模板在 GitHub 上生成您自己的助手仓库
- 按照 GitHub 上的 说明 将您的新仓库克隆到您的计算机
- 克隆完成后,在终端中
cd
到您新仓库的文件夹中,然后运行以下命令:npm install
- 仍然在仓库文件夹中,使用以下命令在本地构建并打包助手:
npm run package-tarball
这将在当前文件夹中构建一个名为
sketch-assistant-template-1.0.0.tgz
的文件 - 这是您的助手作为压缩包打包的,可以准备好在 Sketch 中使用! - 在 Sketch 中打开或创建一个文档,并通过文档的 ⚙️ › 从压缩包添加… 选项(在 管理助手… 面板中)将此文件添加到该文档中。您应该在助手面板中看到一个 Hello World 规则的结果 🎉
尝试在 Visual Studio Code 中打开您的助手项目,并浏览项目文件夹。助手及其 Hello World 规则都在 src/index.ts
文件中定义。
尝试对规则进行一些细微更改,例如将它的 title
值调整为一个新的字符串。每次进行更改后,重新运行 npm run package-tarball
以在 Sketch 中查看您的更改。
此时,您可能希望为您的助手命名,并添加一些描述性元数据。
- 找到并替换所有
sketch-assistant-template
字符串的实例,将其替换为新助手项目的名称。为助手命名时,请像命名 npm 包一样,即全部小写,不包含空格。 - 更新
package.json
中sketch-assistant
对象属性中的title
和description
值。 - 更新
package.json
中的homepage
值 - 这现在很可能只是 GitHub 仓库页面。Sketch 将引导用户访问此页面以了解更多关于您的助手的相关信息。
👉 如果您已准备好学习更多内容,请继续访问 编写规则。