乐趣区

关于设计:GrowingIO-Design-组件库搭建之开发工具

jiezi

作者：潘杰
GrowingIO 工程经理，目前次要负责 GrowingIO Design 组件库搭建和微前端建设。

前言

在 20 世纪 60 年代，计算机技术开始超过软件编程的速度。计算机变得更快、更便宜，然而软件开发依然迟缓，难以保护，并且容易出错。这种差距，以及如何应答，被称为“软件危机”。

1968 年，在北约软件工程会议上，Douglas McIlroy 提出了基于组件的开发作为解决这一窘境的可能办法。基于组件的开发提供了一种通过使代码可重用来放慢编程后劲的办法，从而使其更高效且更易于扩大。这升高了工作量，进步了软件开发的速度，使软件可能更好地利用古代计算机的力量。

当初，50 年后，咱们正经验着相似的挑战，但这次是在设计方面。设计正在致力扩大它所反对的应用程序，因为设计依然是针对单个问题的定制解决方案。你是否已经执行过用户界面审计，发现你应用了几十种类似的蓝色色调，或者雷同按钮的排列？将其乘以应用程序中的每个 UI，您就会开始意识到设计变得如许不统一、不残缺和难以保护。

设计零碎通过使设计可重复使用，使团队可能更快地制作更好的产品成为可能。这是设计零碎的外围和次要价值。设计零碎是可重用组件的汇合，遵循明确的规范，能够将其组装在一起以构建任意数量的应用程序。

GrowingIO 产品研发团队也开始通过搭建本人的设计零碎—— GrowingIO Design System，来提供交互体验统一的产品和晋升研发效率。组件库做为设计零碎的重要组成部分，前端团队通过系列文章来介绍如何一步步搭建组件库。本篇文章次要介绍组件库 GrowingIO Design 应用的开发工具，正所谓：工欲善其事，必先利其器。

TL;DR

本文依照工具的作用把工具分为：代码标准和代码治理两类，这两类次要用到的工具有：

  1. 代码标准工具

    a. ​Prettier​：用于代码格式化

    b. ​stylelint​：对款式文件（CSS 和 Less）进行标准查看

    c. ​ESLint​：对 ECMAScript/JavaScript 代码进行标准查看

  2. 代码管理工具

    a. ​Commitzen​：帮忙编写标准的 commit message

    b. ​commitlint​：对 commit message 格局进行查看

    c. ​lint-stage​：只对 ​git​ 缓存的代码文件进行标准查看，进步速度

    d. ​husky​：整合所有的查看工具

husky 如何把查看工具都整合的，如下图所示：

其中：

  • pre-commit 阶段：执行 lint-staged ，会对暂存的文件执行 prettier、stylelint 和 eslint 三个命令。
  • commit-msg 阶段：执行 commitlint，查看 commit message 是否符合规范。

接下来，对这两类用到的工具进行具体介绍。

代码标准工具

代码标准相当于团队乃至公司的整个技术团队合作的契约，同时这些标准是通过许多我的项目实际进去的贵重教训，能够在开发中少走很多的弯路。代码规范性靠人工在 Code Review 时候查看太费时费力，所以次要用工具来保障。这里次要应用的是 Prettier、stylelint 和 ESLint 三个工具。

Prettier

Prettier 是一个“有态度”的代码格式化工具，它反对：

  • JavaScript（包含试验性功能）
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS、Less 和 SCSS
  • HTML
  • JSON
  • GraphQL
  • Markdown，包含 GFM 和 MDX
  • YAML

它移除了所有原始款式并确保输入的所有代码都合乎统一的款式。它也会把代码行的长度也纳入考量，而后把代码从新打印进去。

例如，对于以下代码：

foo(arg1, arg2, arg3, arg4);

这段代码一行正合适，因而格式化后代码将放弃原样。然而，咱们都遇到过这种状况：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

这段代码太长了，咱们之前调用办法的格局就不实用了。Prettier 会做详尽的工作从新输入这段代码，像上面的代码一样：

foo(reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne());

装置

$ yarn add --dev --exact prettier

配置

在我的项目根目录创立配置文件：

$ echo {}> .prettierrc.js

下一步创立 .prettierignore 文件，用来通知 Prettier CLI 或者编辑器哪些文件不须要代码格式化：

build
coverage

应用

运行一下命令来格式化现有代码：

$ yarn prettier --write .

这部分工作能够集成到 Git 流程中，详情见后文。

stylelint

stylelint 是一个弱小的，古代的 linter，帮忙你防止谬误，并在你的格调中执行常规。

它的弱小之处:

  • 理解最新的 CSS 语法，包含自定义属性和 4 级选择器
  • 从 HTML、markdown 和 CSS-in-JS 对象和模板文字中提取嵌入款式
  • 解析相似 CSS 的语法，如 SCSS、 Sass、 Less 和 SugarSS
  • 有超过 170 个 内置规定来捕获谬误、利用限度和执行格调常规
  • 反对插件，因而您能够创立本人的规定或应用社区编写的插件
  • 主动修复大多数格调违规
  • 通过超过 15000 个单元测试进行了良好的测试
  • 反对可扩大或创立的共享配置
  • 不回心转意，因而您能够依据本人的理论须要对其进行自定义
  • 领有一直倒退的社区，并被 Facebook、GitHub 和 WordPress 应用

装置
前文提到应用 Prettier 工具，为了和 Prettier 配置，这里额定装置 stylelint-config-prettier 插件：

$ yarn add --dev stylelint stylelint-config-standard stylelint-config-prettier

配置

在我的项目根目录创立配置文件 .stylelintrc.js：

module.exports = {extends: ["stylelint-config-standard", "stylelint-config-prettier"],
};

应用

查看文件的命令：

$ npx stylelint --syntax less --fix

GrowingIO Design 应用 ​less​ 来编写款式，这里减少了 ​--syntax less​ 参数，通过 ​--fix​ 参数间接批改不符合规范的文件。

ESLint

ESLint 是在 ECMAScript/JavaScript 代码中辨认和报告模式匹配的工具，它的指标是保障代码的一致性和防止谬误。在许多方面，它和 JSLint、JSHint 类似，除了多数的例外：

  • ESLint 应用 Espree 解析 JavaScript；
  • ESLint 应用 AST 去剖析代码中的模式；
  • ESLint 是齐全插件化的, 每一个规定都是一个插件并且你能够在运行时增加更多的规定。

Esprima 是用 ECMAScript 编写的高性能、规范兼容的 ECMAScript 解析器。

Espree 当初建设在 Acorn 之上，Acorn 具备模块化架构，容许扩大外围性能。Espree 的指标是通过相似的 API 产生相似于 Esprima 的输入，以便能够代替 Esprima 应用。

装置

$ yarn add --dev eslint

配置

这里用 ESLint 命令来初始化配置：

$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · YAML
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.20.0 
@typescript-eslint/eslint-plugin@latest 
eslint-config-airbnb@latest 
eslint@^5.16.0 || ^6.8.0 || ^7.2.0 
eslint-plugin-import@^2.21.2 
eslint-plugin-jsx-a11y@^6.3.0 
eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 
@typescript-eslint/parser@latest

同样，为了和 Prettier 配合，额定装置：

$ yarn add --dev eslint-plugin-prettier eslint-config-prettier

而后批改 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true,
  },
  extends: ['plugin:react/recommended', 'airbnb', 'prettier', 'prettier/react'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {jsx: true,},
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {'prettier/prettier': 'error',},
};

应用

运行命令：

$ npx eslint --cache --fix
  • --cache ：存储无关已解决文件的信息，以便仅对更改的文件进行操作。
  • --fix ：对违反规定的代码，会依据规定进行批改。

最终成果

代码标准工具后面都介绍完了，把它们集成到 CI 流程中，如下图所示：

这里 CI 工具用的是 GitHub Actions，这样能够把后果正文到代码中，如下图所示：

代码管理工具

这部分次要介绍如何把后面介绍的代码标准工具集成到代码提交流程中，并且标准每次代码提交。本文以代码管理工具 Git 为例，Git 每次提交代码，都要写 Commit Message（提交阐明），否则就不容许提交。格式化的 Commit Message，有几个益处：

  • 提供更多的历史信息，不便疾速浏览。
  • 能够过滤某些 commit（比方文档改变），便于疾速查找信息。
  • 能够间接从 commit 生成 Change log。

更多内容查看《Commit message 和 Change log 编写指南》文章。

Commitizen

​Commitizen 是一个撰写合格 Commit Message 的工具。

装置

命令如下：

$ yarn global add commitizen

而后，在我的项目目录里，运行上面的命令，使其反对标准的 Commit Message 格局：

$ commitizen init cz-conventional-changelog --yarn --dev --exact

应用

当前，但凡用到 git commit 命令，一律改为应用 git cz。这时，就会呈现选项，用来生成合乎格局的 Commit Message。

commitlint

commitlint 帮忙您的团队恪守提交约定。通过反对 npm 装置的配置，能够轻松共享提交约定。

装置

yarn add --dev @commitlint/config-conventional @commitlint/cli

配置

创立 .lintstagedrc.js 文件：

module.exports = {
  "**/*": "prettier --write --ignore-unknown",
  "*.less": "stylelint --syntax less --fix",
  "*.(j|t)s?(x)": "eslint --cache --fix",
};

husky

husky 改善你的 ​commits​  和更多 ???? 喔！您能够应用它来删除提交音讯、运行测试、删除代码等。当您提交或推送时。husky 反对所有的 git hooks。

装置

$ yarn add --dev husky

配置

这里通过配置 git hooks 把前文提到的工具全都串起来！

创立 .huskrc.js 文件：

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged',
    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
  },
};

应用

当前只有执行 git cz 后，就能够看到以下信息：

$ git cz
...
husky > pre-commit (node v12.20.0)
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
husky > commit-msg (node v12.20.0)
...

小结

文章结尾介绍了设计零碎通过设计可重复使用，让团队可能更快更好地研发出产品。这也是 GrowingIO 产品研发团队搭建组件库的次要起因。后续具体介绍了组件库用到的开发工具，能够做为大家在搭建组件库时候的一份参考。

参考

  • Design Systems Handbook
  • GrowingIO Design
  • Prettier · Opinionated Code Formatter
  • A mighty, modern style linter · stylelint
  • ESLint – Pluggable JavaScript linter
  • Commit message 和 Change log 编写指南
  • Commitizen by commitizen
  • commitlint – Lint commit messages
  • lint-staged – Run linters on git staged files
  • Husky improves your commits and more ????woof!
退出移动版