Sketch如何开发一个插件？

sketch插件时通过js来编写的，可以通过两种方式创建插件：

使用Sketch Plugin Manager skpm（官方实用程序）来创建，构建和发布Sketch插件。

通过自己直接组织所有文件或使用Rollup或webpack之类的模块捆绑器手动组织所有文件。

为了快速入门，Sketch Plugin Manager提供了一组模板，用于不同类型的插件，包括数据供应商和使用Webview提供用户界面的插件。

1.使用 skpm

要求

您需要npm安装才能安装skpmSketch插件及其任何依赖项。

安装 skpm

使用来安装Sketch Plugin Manager npm。

npm install -g skpm

查看用法说明以查看所有可用命令。

skpm --help

从模板创建

使用默认插件在磁盘上的任何位置创建一个新插件。skpm会自动将符号链接添加到Sketch插件安装文件夹，以使该插件在Sketch中立即可用。

skpm create my-plugin

结果文件夹包含插件源和生成的Sketch插件包。更改文件夹结构时，请确保skpm在package.json必要时调整其中的设置。 . ├── README.md ├── assets │ └── icon.png ├── my-plugin.sketchplugin │ └── Contents │ ├── Resources │ │ └── icon.png │ └── Sketch │ ├── manifest.json │ ├── my-command.js │ └── my-command.js.map ├── node_modules ├── package-lock.json ├── package.json └── src ├── manifest.json └── my-command.js

文件夹 描述

*.sketchplugin 由skpm构建过程生成的插件包。不要编辑此文件夹中的任何文件，任何更改都将被下一个版本覆盖。

assets 应该与插件捆绑在一起的所有资源文件的文件夹。要使用其他路径或添加文件夹，请在中修改skpm.assets设置package.json。

src 包含清单和要使用Webpack捆绑的脚本的源文件夹。

切换到Sketch并从“插件”菜单运行插件。 新创建的插件可在Sketch中立即使用 快速提示：有关其他模板，请参见skpm官方文档。

构建插件包

对插件源进行更改后，需要重新构建.sketchplugin捆绑软件。用src/my-command.js以下脚本替换的内容。

import sketch from 'sketch'

export default function() {
  const doc = sketch.getSelectedDocument()
  const selectedLayers = doc.selectedLayers
  const selectedCount = selectedLayers.length

  if (selectedCount === 0) {
     sketch.UI.message('No layers are selected.')
  } else {
     sketch.UI.message(`${selectedCount} layers selected.`)
  }
}

使用构建插件npm。

npm run build

要验证插件是否已更新，请创建或打开Sketch文档并选择一些图层。当您从“插件”菜单再次运行该插件时，现在应该看到带有选定层数的消息。 快速提示：改为通过运行更改后自动重建插件npm run watch。

2.手动创建sketch插件

如果您更喜欢使用自己的方法来捆绑插件，则必须确保正确定义清单，并包括插件运行所需的所有脚本。

例子

该示例插件包含两个JavaScript文件。command.js定义在Sketch中选择插件的菜单项时调用的处理程序，并shared.js包含command.js使用导入的代码require。 . └── Contents ├── Resources └── Sketch ├── command.js ├── manifest.json └── shared.js

manifest.json

清单文件告诉Sketch如何从“插件”菜单中运行插件。有关选项的完整列表，请参见清单文档。

{
"author": "",
"commands": [
 {
  "script": "command.js",
  "name": "Greeting",
  "handlers": {
  "run": "onRun"
 },
  "identifier": "messages.greeting"
 }
 ],
  "menu": {
  "title": "Message…",
  "items": ["messages.greeting"]
 },
  "identifier": "com.bohemiancoding.sketch.messages",
  "version": "1.0",
  "description": "An introduction on how to build plugins.",
  "authorEmail": "developer@sketch.com",
  "name": "Messages"
 }
 command.js
 const sketch = require('sketch')
 const { randomEmoji } = require('./shared')

 varBfwOnRun= function(context) {
 sketch.UI.message(`Hello Sketch ${randomEmoji()}`)
}

shared.js

let emojis = ['