add frontend code check guide for developer

Author: 苏义超

docs/docs/en/contribute/development-environment-setup.md

@@ -29,11 +29,11 @@ Supporting system:
 
 Run `./mvnw clean install -Prelease -Dmaven.test.skip=true`
 
-### Code Style
+### Backend Code Style
 
-DolphinScheduler uses `Spotless` for code style and formatting checks.
+DolphinScheduler uses `Spotless` for backend code style and formatting checks.
 You could run the following command and `Spotless` will automatically fix
-the code style and formatting errors for you:
+the backend code style and formatting errors for you:
 
 ```shell
 ./mvnw spotless:apply
@@ -54,6 +54,27 @@ pre-commit install
 
 Now, every time you commit your code, `pre-commit` will automatically run `Spotless` to check the code style and formatting.
 
+### Frontend Code Style
+
+DolphinScheduler uses `pnpm` to check and automatically fix frontend code style and formatting issues.
+First, navigate to the frontend project directory:
+
+```shell
+cd dolphinscheduler-ui
+```
+
+Then, run `pnpm run lint` to check and fix frontend code style and formatting issues:
+
+```shell
+pnpm run lint
+```
+
+Finally, you can run `pnpm run build:prod` to perform a full TypeScript type check, ensuring that only type-safe code is committed.
+
+```shell
+pnpm run build:prod
+```
+
 ### Helm Template Guidelines
 
 After modifying files related to Helm templates, you can use the following command to debug the Helm templates:

docs/docs/zh/contribute/development-environment-setup.md

@@ -28,10 +28,10 @@ git clone git@github.com:apache/dolphinscheduler.git
 
 运行 `mvn clean install -Pstaging -Dmaven.test.skip=true`
 
-### 代码风格
+### 后端代码风格
 
-DolphinScheduler使用`Spotless`检查并修复代码风格和格式问题。
-您可以执行如下的命令，`Spotless`将会为您自动检查并修复代码风格和格式问题。
+DolphinScheduler使用`Spotless`检查并修复后端代码风格和格式问题。
+您可以执行如下的命令，`Spotless`将会为您自动检查并修复后端代码风格和格式问题。
 
 ```shell
 ./mvnw spotless:apply
@@ -51,6 +51,27 @@ pre-commit install
 
 现在，每次您提交代码时，`pre-commit`都会自动运行`Spotless`来检查代码风格和格式。
 
+### 前端代码风格
+
+DolphinScheduler使用`pnpm`检查并修复前端代码风格和格式问题。
+首先，进入前端项目文件夹：
+
+```shell
+cd dolphinscheduler-ui
+```
+
+然后，使用`pnpm run lint`检查并修复前端代码风格和格式问题。
+
+```shell
+pnpm run lint
+```
+
+最后，可以运行`pnpm run build:prod`来执行完整的 TypeScript 类型检查，确保只有类型正确的代码才能被提交。
+
+```shell
+pnpm run build:prod
+```
+
 ### Helm 模板规范
 
 当您修改了Helm模板相关的文件后， 可以使用如下命令来调试 Helm 模板：