diff --git a/.eslintrc.js b/.eslintrc.js
index 387bb2c..c96e286 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,5 +14,6 @@ module.exports = {
     'jsx-a11y/label-has-for': 0,
     'jsx-a11y/no-noninteractive-tabindex': 0,
     'import/no-extraneous-dependencies': 0,
+    '@typescript-eslint/consistent-type-exports': 2,
   },
 };
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..d37daa0
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged
diff --git a/docs/examples/_util/motionUtil.ts b/docs/examples/_util/motionUtil.ts
index f68ad80..c822ca9 100644
--- a/docs/examples/_util/motionUtil.ts
+++ b/docs/examples/_util/motionUtil.ts
@@ -1,4 +1,4 @@
-import type { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
 
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });
diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
index b51f01b..ea3df8e 100644
--- a/docs/examples/custom-icon.tsx
+++ b/docs/examples/custom-icon.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import Collapse, { Panel } from 'rc-collapse';
-import motion from './_util/motionUtil';
+import * as React from 'react';
 import '../../assets/index.less';
+import motion from './_util/motionUtil';
 
 const initLength = 3;
 
@@ -48,40 +48,32 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array
-    .from<object, React.ReactNode>(
-      { length: initLength },
-      (_, i) => {
-        const key = i + 1;
-        return (
-          <Panel
-            header={`This is panel header ${key}`}
-            key={key}
-          >
-            <p>{text.repeat(time)}</p>
-          </Panel>
-        )
-      })
-    .concat(
-      <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
-        <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
-          <Panel header="This is panel nest panel" key="1" id="header-test">
-            <p>{text}</p>
-          </Panel>
-        </Collapse>
-      </Panel>,
-      <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
-        <Collapse defaultActiveKey="1">
-          <Panel header="This is panel nest panel" key="1" id="another-test">
-            <form>
-              <label htmlFor="test">Name:&nbsp;</label>
-              <input type="text" id="test" />
-            </form>
-          </Panel>
-        </Collapse>
+  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
+    const key = i + 1;
+    return (
+      <Panel header={`This is panel header ${key}`} key={key}>
+        <p>{text.repeat(time)}</p>
       </Panel>
     );
-
+  }).concat(
+    <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
+      <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
+        <Panel header="This is panel nest panel" key="1" id="header-test">
+          <p>{text}</p>
+        </Panel>
+      </Collapse>
+    </Panel>,
+    <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
+      <Collapse defaultActiveKey="1">
+        <Panel header="This is panel nest panel" key="1" id="another-test">
+          <form>
+            <label htmlFor="test">Name:&nbsp;</label>
+            <input type="text" id="test" />
+          </form>
+        </Panel>
+      </Collapse>
+    </Panel>,
+  );
 
   const tools = (
     <>
@@ -90,7 +82,7 @@ const App: React.FC = () => {
       </button>
       <br />
       <br />
-      <button type="button" onClick={() => setAccordion(prev => !prev)}>
+      <button type="button" onClick={() => setAccordion((prev) => !prev)}>
         {accordion ? 'Mode: accordion' : 'Mode: collapse'}
       </button>
       <br />
@@ -101,7 +93,7 @@ const App: React.FC = () => {
       <br />
       <br />
     </>
-  )
+  );
 
   return (
     <>
@@ -116,7 +108,7 @@ const App: React.FC = () => {
         {panelItems}
       </Collapse>
     </>
-  )
-}
+  );
+};
 
 export default App;
diff --git a/docs/examples/fragment.tsx b/docs/examples/fragment.tsx
index 2d31f4c..bb38c5b 100644
--- a/docs/examples/fragment.tsx
+++ b/docs/examples/fragment.tsx
@@ -1,6 +1,6 @@
+import Collapse, { Panel } from 'rc-collapse';
 import * as React from 'react';
 import { Fragment } from 'react';
-import Collapse, { Panel } from 'rc-collapse';
 import '../../assets/index.less';
 
 const App = () => (
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
index 3e7c341..5353415 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
 import type { CollapseProps } from 'rc-collapse';
 import Collapse, { Panel } from 'rc-collapse';
-import motion from './_util/motionUtil';
+import * as React from 'react';
 import '../../assets/index.less';
+import motion from './_util/motionUtil';
 
 const initLength = 3;
 
@@ -50,65 +50,44 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array
-    .from<object, React.ReactNode>(
-      { length: initLength },
-      (_, i) => {
-        const key = i + 1;
-        return (
-          <Panel
-            header={`This is panel header ${key}`}
-            key={key}
-          >
-            <p>{text.repeat(time)}</p>
-          </Panel>
-        )
-      })
-    .concat(
-      <Panel
-        header={`This is panel header ${initLength + 1}`}
-        key={initLength + 1}
-      >
-        <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
-          <Panel
-            header="This is panel nest panel"
-            key="1"
-            id="header-test"
-          >
-            <p>{text}</p>
-          </Panel>
-        </Collapse>
-      </Panel>,
-      <Panel
-        header={`This is panel header ${initLength + 2}`}
-        key={initLength + 2}
-      >
-        <Collapse defaultActiveKey="1">
-          <Panel
-            header="This is panel nest panel"
-            key="1"
-            id="another-test"
-          >
-            <form>
-              <label htmlFor="test">Name:&nbsp;</label>
-              <input type="text" id="test" />
-            </form>
-          </Panel>
-        </Collapse>
-      </Panel>,
-      <Panel
-        header={`This is panel header ${initLength + 3}`}
-        key={initLength + 3}
-        extra={<span>Extra Node</span>}
-      >
-        <p>Panel with extra</p>
+  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
+    const key = i + 1;
+    return (
+      <Panel header={`This is panel header ${key}`} key={key}>
+        <p>{text.repeat(time)}</p>
       </Panel>
     );
+  }).concat(
+    <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
+      <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
+        <Panel header="This is panel nest panel" key="1" id="header-test">
+          <p>{text}</p>
+        </Panel>
+      </Collapse>
+    </Panel>,
+    <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
+      <Collapse defaultActiveKey="1">
+        <Panel header="This is panel nest panel" key="1" id="another-test">
+          <form>
+            <label htmlFor="test">Name:&nbsp;</label>
+            <input type="text" id="test" />
+          </form>
+        </Panel>
+      </Collapse>
+    </Panel>,
+    <Panel
+      header={`This is panel header ${initLength + 3}`}
+      key={initLength + 3}
+      extra={<span>Extra Node</span>}
+    >
+      <p>Panel with extra</p>
+    </Panel>,
+  );
 
   const handleCollapsibleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const values = [undefined, 'header', 'icon', 'disabled'];
-    setCollapsible(values[e.target.value])
-  }
+    setCollapsible(values[e.target.value]);
+  };
 
   const tools = (
     <>
@@ -117,7 +96,7 @@ const App: React.FC = () => {
       </button>
       <br />
       <br />
-      <button type="button" onClick={() => setAccordion(prev => !prev)}>
+      <button type="button" onClick={() => setAccordion((prev) => !prev)}>
         {accordion ? 'Mode: accordion' : 'Mode: collapse'}
       </button>
       <br />
@@ -138,7 +117,7 @@ const App: React.FC = () => {
       <br />
       <br />
     </>
-  )
+  );
 
   return (
     <>
@@ -154,7 +133,7 @@ const App: React.FC = () => {
         {panelItems}
       </Collapse>
     </>
-  )
-}
+  );
+};
 
 export default App;
diff --git a/package.json b/package.json
index 6df3c9f..0c6b4ff 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,15 @@
     "compile": "father build && lessc assets/index.less assets/index.css",
     "coverage": "npm test -- --coverage",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "prepare": "husky install",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "start": "dumi dev",
     "test": "rc-test"
   },
+  "lint-staged": {
+    "**/*.{ts,tsx,js,jsx,json,md}": "npm run prettier"
+  },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
@@ -55,8 +59,10 @@
     "dumi": "^2.1.1",
     "eslint": "^7.11.0",
     "father": "^4.1.3",
+    "husky": "^8.0.3",
     "jest": "^29.1.2",
     "less": "^3.12.2",
+    "lint-staged": "^13.1.0",
     "np": "^6.0.0",
     "prettier": "^2.1.2",
     "rc-test": "^7.0.14",
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 3466d0e..4f1bc24 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import CollapsePanel from './Panel';
+import React from 'react';
 import type { CollapseProps, CollapsibleType } from './interface';
+import CollapsePanel from './Panel';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
   let currentActiveKey = activeKey;
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 7d87fd7..1daf893 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
-import type { CollapsePanelProps } from './interface';
-import KeyCode from 'rc-util/lib/KeyCode';
 import CSSMotion from 'rc-motion';
+import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
+import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
 
 const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((props, ref) => {
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index bdaf4b3..ba6d36e 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import classnames from 'classnames';
+import React from 'react';
 import type { CollapsePanelProps } from './interface';
 
 const PanelContent = React.forwardRef<
diff --git a/src/index.tsx b/src/index.tsx
index dcf24b0..8cda2ed 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,6 @@
 import Collapse from './Collapse';
 
-export type { 
-  CollapseProps,
-  CollapsePanelProps
-} from './interface';
+export type { CollapsePanelProps, CollapseProps } from './interface';
 
 export default Collapse;
 export const { Panel } = Collapse;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index a76b01b..b4ec8ae 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,5 +1,5 @@
-import { fireEvent, render } from '@testing-library/react';
 import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import React, { Fragment } from 'react';
 import Collapse, { Panel } from '../src/index';
@@ -623,11 +623,11 @@ describe('collapse', () => {
     const { container } = render(
       <Collapse>
         {null}
-        <Panel header="collapse 1" key="1" >
+        <Panel header="collapse 1" key="1">
           <p>Panel 1 content</p>
         </Panel>
         {0}
-        <Panel header="collapse 2" key="2" >
+        <Panel header="collapse 2" key="2">
           <p>Panel 2 content</p>
         </Panel>
         {undefined}