diff --git a/.eslintrc.js b/.eslintrc.js
index a341d58bb440..1178d08ee021 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -205,6 +205,7 @@ module.exports = {
     '@typescript-eslint/no-shadow': [2, { ignoreTypeValueShadow: true }],
     // https://github.com/typescript-eslint/typescript-eslint/issues/2528#issuecomment-689369395
     'no-undef': 0,
+    'import/order': 0,
   },
   globals: {
     gtag: true,
diff --git a/.prettierrc b/.prettierrc
index 9d5b9bf640c1..d1c91d8d042d 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,10 @@
   "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
+  "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "overrides": [
     {
       "files": ".prettierrc",
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 3f4fb4b17651..af3c9e3f54c0 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import React, { createRef, forwardRef, useContext } from 'react';
+
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import omit from 'rc-util/lib/omit';
-import React, { createRef, forwardRef, useContext } from 'react';
+
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx
index 143b487049de..a7e23f68e618 100644
--- a/components/collapse/__tests__/index.test.tsx
+++ b/components/collapse/__tests__/index.test.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { act } from 'react-dom/test-utils';
+
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 
diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index d71fe4c64859..abdc869311fd 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -1,11 +1,13 @@
+import type { CSSProperties, FC } from 'react';
+import React, { useContext, useMemo, useRef, useState } from 'react';
+
 import type {
   HsbaColorType,
   ColorPickerProps as RcColorPickerProps,
 } from '@rc-component/color-picker';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { CSSProperties, FC } from 'react';
-import React, { useContext, useMemo, useRef, useState } from 'react';
+
 import genPurePanel from '../_util/PurePanel';
 import { getStatusClassNames } from '../_util/statusUtils';
 import warning from '../_util/warning';
diff --git a/components/tabs/demo/custom-tab-bar.tsx b/components/tabs/demo/custom-tab-bar.tsx
index 5a5fc4898441..1e538404a7ef 100644
--- a/components/tabs/demo/custom-tab-bar.tsx
+++ b/components/tabs/demo/custom-tab-bar.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import StickyBox from 'react-sticky-box';
+
 import type { TabsProps } from 'antd';
 import { Tabs, theme } from 'antd';
+import StickyBox from 'react-sticky-box';
 
 const items = new Array(3).fill(null).map((_, i) => {
   const id = String(i + 1);
diff --git a/package.json b/package.json
index c1121909aac7..77b4966344b1 100644
--- a/package.json
+++ b/package.json
@@ -181,6 +181,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/fs-extra": "^11.0.1",
     "@types/gtag.js": "^0.0.13",
     "@types/http-server": "^0.12.1",