diff --git a/docs/docs/en/contribute/development-environment-setup.md b/docs/docs/en/contribute/development-environment-setup.md
index 06991dbed780..7d48faf91b07 100644
--- a/docs/docs/en/contribute/development-environment-setup.md
+++ b/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,28 @@ 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 the following commands to automatically fix ESLint-fixable issues and format the code:
+
+```shell
+pnpm run lint      # Fix ESLint issues
+pnpm run prettier  # Format code
+```
+
+Finally, you can run the following command to perform a full TypeScript type check and catch type-related errors early:
+
+```shell
+pnpm exec vue-tsc --noEmit  # Type check
+```
+
 ### Helm Template Guidelines
 
 After modifying files related to Helm templates, you can use the following command to debug the Helm templates:
diff --git a/docs/docs/zh/contribute/development-environment-setup.md b/docs/docs/zh/contribute/development-environment-setup.md
index 5446e971a23d..6a846c2129ec 100644
--- a/docs/docs/zh/contribute/development-environment-setup.md
+++ b/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,28 @@ pre-commit install
 
 现在，每次您提交代码时，`pre-commit`都会自动运行`Spotless`来检查代码风格和格式。
 
+### 前端代码风格
+
+DolphinScheduler使用`pnpm`检查并修复前端代码风格和格式问题。
+首先，进入前端项目文件夹：
+
+```shell
+cd dolphinscheduler-ui
+```
+
+然后，运行以下命令来自动修复 ESLint 可修复的问题，并格式化代码。
+
+```shell
+pnpm run lint      # 修复 ESLint 问题
+pnpm run prettier  # 格式化代码
+```
+
+最后，可以运行以下命令来执行完整的 TypeScript 类型检查，提前发现类型异常。
+
+```shell
+pnpm exec vue-tsc --noEmit  # 类型检查
+```
+
 ### Helm 模板规范
 
 当您修改了Helm模板相关的文件后， 可以使用如下命令来调试 Helm 模板：