From 96ff8b946e72bcccd6c49af3250f7cda2ea4d269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Fri, 16 Jun 2023 01:07:51 +0800
Subject: [PATCH] docs: update development workflow in the document about
 contributing (#43037)

* docs: update development workflow in the document about contributing

* docs: update docs

* docs: update docs

---------

Co-authored-by: lijianan <574980606@qq.com>
---
 docs/react/contributing.en-US.md | 54 ++++++++++++++++++++++----------
 docs/react/contributing.zh-CN.md | 54 ++++++++++++++++++++++----------
 2 files changed, 76 insertions(+), 32 deletions(-)

diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md
index 69c07dc68c..7d121fd205 100644
--- a/docs/react/contributing.en-US.md
+++ b/docs/react/contributing.en-US.md
@@ -49,12 +49,12 @@ The core team is monitoring for pull requests. We will review your pull request
 **Before submitting a pull request**, please make sure the following is done:
 
 1. Fork the repository and create your branch from the [correct branch](#branch-organization).
-1. Run `npm install` in the repository root.
-1. If you've fixed a bug or added code that should be tested, add tests!
-1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
-1. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates).
-1. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
-1. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
+2. Run `npm install` in the repository root.
+3. If you've fixed a bug or added code that should be tested, add tests!
+4. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
+5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates).
+6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
+7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
 
 Sending a Pull Request to [react-component](https://github.com/react-component/):
 
@@ -62,19 +62,41 @@ Since antd's components are based on react-component, sometimes you may need to
 
 ## Development Workflow
 
-Before you can start you must run the following command to enable [corepack](https://nodejs.org/api/corepack.html)。
+`npm` or `yarn` are recommended as package management tools.
 
-```bash
-corepack enable
-```
+After you clone the antd code and use following commands to install dependencies:
 
-After cloning antd, run `npm install` to fetch its dependencies. Then, you can run several commands:
+<InstallDependencies npm='$ npm install' yarn='$ yarn'></InstallDependencies>
 
-1. `npm start` runs Ant Design website locally.
-1. `npm run lint` checks the code style.
-1. `npm test` runs the complete test suite. (Make sure the `NODE_ENV` environment variable is unset, or it may causing some problems.)
-1. `npm run compile` compiles TypeScript code to the `lib` and `es` directory.
-1. `npm run dist` creates UMD build of antd.
+You can also run the following common commands:
+
+### Run locally
+
+Runs Ant Design website locally.
+
+<InstallDependencies npm='$ npm start' yarn='$ yarn start'></InstallDependencies>
+
+### Checks the code style
+
+<InstallDependencies npm='$ npm run lint' yarn='$ yarn lint'></InstallDependencies>
+
+### Run test
+
+runs the complete test suite. (Make sure the `NODE_ENV` environment variable is unset, or it may causing some problems.)
+
+<InstallDependencies npm='$ npm test' yarn='$ yarn test'></InstallDependencies>
+
+### Compile
+
+compiles TypeScript code to the `lib` and `es` directory.
+
+<InstallDependencies npm='$ npm run compile' yarn='$ yarn compile'></InstallDependencies>
+
+### Build
+
+creates UMD build of antd.
+
+<InstallDependencies npm='$ npm run dist' yarn='$ yarn dist'></InstallDependencies>
 
 ## Development Tools
 
diff --git a/docs/react/contributing.zh-CN.md b/docs/react/contributing.zh-CN.md
index ebf7e53882..0c6541ae60 100644
--- a/docs/react/contributing.zh-CN.md
+++ b/docs/react/contributing.zh-CN.md
@@ -49,12 +49,12 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并
 **在你发送 Pull Request 之前**，请确认你是按照下面的步骤来做的：
 
 1. 基于 [正确的分支](#分支管理) 做修改。
-1. 在项目根目录下运行了 `npm install`。
-1. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。
-1. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。
-1. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。
-1. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。**
-1. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。
+2. 在项目根目录下运行了 `npm install`。
+3. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。
+4. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。
+5. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。
+6. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。**
+7. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。
 
 给 [react-component](https://github.com/react-component/) 发送 pull request：
 
@@ -62,19 +62,41 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并
 
 ## 开发流程
 
-在开始之前，请先执行下面的命令启用 [corepack](https://nodejs.org/api/corepack.html)。
+推荐使用 `npm` 或 `yarn` 作为包管理工具
 
-```bash
-corepack enable
-```
+在你 clone 了 antd 的代码并且使用
 
-在你 clone 了 antd 的代码并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令：
+<InstallDependencies npm='$ npm install' yarn='$ yarn'></InstallDependencies>
 
-1. `npm start` 在本地运行 Ant Design 的网站。
-2. `npm run lint` 检查代码风格。
-3. `npm test` 运行测试。(在运行测试前请确保 `NODE_ENV` 环境变量没有被设定，否则可能会引发一些问题)
-4. `npm run compile` 编译 TypeScript 代码到 lib 和 es 目录。
-5. `npm run dist` 构建 antd 的 UMD 版本到 dist 目录。
+安装完依赖后，你还可以运行下面几个常用的命令：
+
+### 本地运行
+
+在本地运行 Ant Design 的网站。
+
+<InstallDependencies npm='$ npm start' yarn='$ yarn start'></InstallDependencies>
+
+### 代码风格检测
+
+<InstallDependencies npm='$ npm run lint' yarn='$ yarn lint'></InstallDependencies>
+
+### 运行测试用例
+
+运行测试。(在运行测试前请确保 `NODE_ENV` 环境变量没有被设定，否则可能会引发一些问题)
+
+<InstallDependencies npm='$ npm test' yarn='$ yarn test'></InstallDependencies>
+
+### 编译
+
+编译 TypeScript 代码到 lib 和 es 目录。
+
+<InstallDependencies npm='$ npm run compile' yarn='$ yarn compile'></InstallDependencies>
+
+### 构建
+
+构建 antd 的 UMD 版本到 dist 目录。
+
+<InstallDependencies npm='$ npm run dist' yarn='$ yarn dist'></InstallDependencies>
 
 ## 配套开发工具