Ant Design Sketch Assistant 使用教程

Ant Design Sketch Assistant 使用教程

sketch-assistant-ant-design项目地址:https://gitcode.com/gh_mirrors/sk/sketch-assistant-ant-design

1、项目的目录结构及介绍

Ant Design Sketch Assistant 项目的目录结构如下：

sketch-assistant-ant-design/
├── src/
│   ├── index.ts # 助理入口
│   ├── functions/ # 核心校验方法
│   ├── rules/ # 校验规则
│   └── utils/ # 工具函数库
├── tests/
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── LICENSE.md
├── README.md
├── jest.config.js
├── package.json
├── tsconfig.json
└── webpack.config.js

目录介绍

• src/：包含项目的核心代码，包括助理入口文件、校验方法、校验规则和工具函数库。
  • index.ts：助理入口文件，包含助理的规则。
  • functions/：存放复杂的校验逻辑。
  • rules/：存放校验规则。
  • utils/：存放工具函数。
• tests/：包含项目的测试代码。
• .eslintignore、.eslintrc.js：ESLint 配置文件，用于代码风格检查。
• .gitignore：Git 忽略文件配置。
• .nvmrc：Node 版本管理配置文件。
• .prettierignore、.prettierrc：Prettier 配置文件，用于代码格式化。
• LICENSE.md：项目许可证文件。
• README.md：项目说明文档。
• jest.config.js：Jest 测试框架配置文件。
• package.json：项目依赖和脚本配置文件。
• tsconfig.json：TypeScript 配置文件。
• webpack.config.js：Webpack 打包配置文件。

2、项目的启动文件介绍

项目的启动文件是 src/index.ts，它是助理的核心入口文件，包含一个 Assistant 规则。Assistant 包含若干校验规则，例如：

• 图层的行高需要等于字号 + 8
• 文本需要符合盘古之白
• 图形颜色需要收敛到某个值，例如主蓝色需要是 #1890ff
• 间距判断：若干图层之间间距为 24px

3、项目的配置文件介绍

项目的配置文件主要包括以下几个：

• .eslintrc.js：ESLint 配置文件，用于代码风格检查。
• .prettierrc：Prettier 配置文件，用于代码格式化。
• jest.config.js：Jest 测试框架配置文件。
• tsconfig.json：TypeScript 配置文件。
• webpack.config.js：Webpack 打包配置文件。

配置文件介绍

• .eslintrc.js：配置 ESLint 规则，确保代码风格一致。
• .prettierrc：配置 Prettier 规则，用于自动格式化代码。
• jest.config.js：配置 Jest 测试框架，用于运行测试用例。
• tsconfig.json：配置 TypeScript 编译选项，确保 TypeScript 代码正确编译。
• webpack.config.js：配置 Webpack 打包选项，用于打包项目代码。

以上是 Ant Design Sketch Assistant 项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。

sketch-assistant-ant-design项目地址:https://gitcode.com/gh_mirrors/sk/sketch-assistant-ant-design