您的第一个插件目录

本文档将带您创建您的第一个Sketch插件（“Hello World”），并将解释Sketch的基本扩展性概念。

在本演练中，您将向Sketch添加一个新命令，该命令将显示一个简单的“Hello World”消息。在稍后的演练中，您将与Sketch画布交互并查询用户当前选定的图层。

先决条件

您需要安装Node.js并且可以使用它$PATH。Node.js包括npm，Node.js包管理器，它将用于安装Sketch插件开发人员的工具链。

生成一个新的插件

将自己的功能添加到Sketch的最简单方法是通过添加命令。一个命令注册一个回调函数，该函数可以从插件菜单或键绑定中调用。

我们编写了一个小工具链，skpm以帮助您入门。安装skpm并搭建一个新的插件：

$ npm install -g skpm

$ skpm create my-plugin

$ cd my-plugin

运行你的插件

• 构建插件： npm run build
• 启动Sketch，打开文档
• 选择Plugins> my-plugin>My Command
• 恭喜！您刚刚创建并执行了您的第一个Sketch命令！

插件的结构

运行后，生成的插件应该具有以下结构：

.
├── .gitignore
├── README.md
├── src                         // sources
│   ├── manifest.json           // plugin's manifest
│   └── my-command.js           // source code of the command
├── node_modules
│   └── skpm                    // the sketch plugin developer toolchain
├── my-plugin.sketchplugin      // compilation output, the actual plugin
│   └── Contents
│       ├── Resources
│       └── Sketch
│           ├── manifest.json
│           └── my-command.js
└── package.json

让我们通过所有这些文件的目的，并解释他们做了什么：

插件清单： manifest.json

• 每个Sketch插件必须有一个描述它及其功能的manifest.json文件。
• Sketch在启动过程中读取此文件。
• 请阅读manifest.json 清单参考以获取更多信息。

package.json

如果您之前查看过nodejs包，则必须熟悉它package.json。它描述了你的包（在这种情况下是插件）的依赖关系，并包含一些关于它的元数据。

你会注意到一个特殊的领域：skpm。你可以在这里指定关于你的插件的元数据（而不是在这里manifest.json）。作为一个经验法则，我通常会manifest.json在将所有其他信息放入时将相关命令的信息放入package.json（skpm将在编译时将这些信息添加到manifest.json中，以便您不必复制它们）。

src/my-command.js

这是一个插件命令定义的地方。它被引用manifest.json并且必须导出一个函数。

一个简单的改变

在中src/my-command.js，尝试替换命令实现以显示所选图层的数量：

export default function(context) {
  const selectedLayers = context.selection
  const selectedCount = selectedLayers.length

  if (selectedCount === 0) {
    context.document.showMessage('No layers are selected.')
  } else {
    context.document.showMessage(`${selectedCount} layers selected.`)
  }
}

通过运行重新构建插件npm run build。打开一个Sketch文档，选择一些图层。当您运行my-plugin命令时，您现在应该可以看到所选图层的数量。

专业提示：您可以通过运行自动重建插件 npm run watch

发布您的扩展

阅读关于如何共享插件。

下一步

在这个演练中，我们看到了一个非常简单的插件。

如果您想更详细地了解插件API，请尝试以下主题：

• 扩展API概述 - 了解Sketch可扩展性的可能性。
• 其他插件示例 - 查看我们的示例插件项目列表。

原文：https://developer.sketchapp.com/guides/first-plugin/