前言
Sketch 是 Mac 上一款非常流行的设计工具，可用于 UI 设计、图标制作等。sketchapp-json-plugin 是一款 npm 包，可以将 Sketch 中的图层导出为 JSON 格式，方便进行后续的开发与操作。本篇文章将详细讲解如何使用这个工具，以及如何对其进行二次开发和定制化。
安装
确保电脑已安装 Sketch 和 npm，然后运行以下命令：
npm install -g sketchapp-json-plugin
使用
导出 sketch 文件
首先需要将 Sketch 文件导出为 JSON 格式，运行以下命令：
sketchtool --command=export --formats=json --output=/path/to/destination/folder /path/to/sketch/file.sketch
其中，/path/to/destination/folder 为导出的 JSON 文件的目标路径，/path/to/sketch/file.sketch 为 Sketch 文件的路径。
解析 JSON 文件
导出后的 JSON 文件可以通过 require 引入到代码中进行操作：
const jsonData = require('/path/to/destination/folder/file.json');获取图层信息
JSON 文件中的图层信息保存在 layers 属性下，可以通过遍历该属性获取各个图层的信息：
jsonData.layers.forEach(layer => {
console.log(layer);
});修改图层属性
可以通过修改 JSON 文件中的图层属性，来修改 Sketch 中的图层属性。例如，将所有图层的颜色修改为红色：
-- -------------------- ---- -------
----------------------------- -- -
-- ------------ -- ------------------ -
------------------------------ -- -
-- ------------ -
-------------- - --
---------------- - --
--------------- - --
---------------- - --
-
---
-
---导出修改后的 sketch 文件
可以使用 sketchapp-json-plugin 中提供的 jsonToSketch.js 脚本，将修改后的 JSON 文件转换为 sketch 文件。运行以下命令：
jsonToSketch /path/to/modified/json/file.json /path/to/destination/folder
将修改后的 JSON 文件及导出路径作为参数传入即可。
开发与定制化
sketchapp-json-plugin 提供了丰富的可定制化选项，可以根据需求扩展导入导出功能。以下是一些常见的功能：
导入 JSON 文件
可以使用 sketchapp-json-plugin 中提供的 sketch_json.js 脚本，将 JSON 文件导入并转换为 Sketch 文件。运行以下命令：
sketch_json /path/to/source/folder /path/to/destination/folder
将包含 JSON 文件的源路径及导出路径作为参数传入即可。
自定义导入导出过程
可以根据需要自定义导入导出过程，在 sketchapp-json-plugin 的源代码中进行修改。例如，自定义将 Sketch 文件导出为 YAML 格式：
export function toJsonString(obj) {
return jsYaml.dump(obj,{
lineWidth: -1
});
}在webpack.config.js 修改配置，添加对 yaml 的支持：
extension: ['*', '.js', '.json', '.yaml'],
修改 toFilename 方法，将导出文件名的后缀改为 .yaml：
-- -------------------- ---- -------
------ ----- ------------ -
-- ----
------------ -
----- --- - --------
-- ---------------------- -
-- ----------------------------------- --- ---- -
------ ---------------------
-
------ ------------------------------- ------------------------------ -------- - -----
-
------ ---------------------------------- -----
-
-参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f406837dbf7be33b25671fb