diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..fa51da2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/vite-react/src/Layout.jsx b/vite-react/src/Layout.jsx
index bc3874f..6b4f05a 100644
--- a/vite-react/src/Layout.jsx
+++ b/vite-react/src/Layout.jsx
@@ -1,6 +1,6 @@
-import React from "react";
-import { Menu } from "antd";
-import { Link } from "react-router-dom";
+import React from 'react'
+import { Menu } from 'antd'
+import { Link } from 'react-router-dom'
 
 export default function Layout() {
   return (
@@ -12,5 +12,5 @@ export default function Layout() {
         <Link to="/app">App</Link>
       </Menu.Item>
     </Menu>
-  );
+  )
 }
diff --git a/vite-react/src/index.css b/vite-react/src/index.css
index 4a1df4d..ec2585e 100644
--- a/vite-react/src/index.css
+++ b/vite-react/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
diff --git a/vite-react/src/index.jsx b/vite-react/src/index.jsx
index 4a1438a..902890d 100644
--- a/vite-react/src/index.jsx
+++ b/vite-react/src/index.jsx
@@ -1,9 +1,9 @@
-import React from "react";
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
-import Layout from "./Layout";
-import App from "~/pages/app/index";
-import User from "~/pages/user/index";
-import "antd/dist/antd.less";
+import React from 'react'
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
+import Layout from './Layout'
+import App from '~/pages/app/index'
+import User from '~/pages/user/index'
+import 'antd/dist/antd.less'
 
 export default function Index() {
   return (
@@ -18,5 +18,5 @@ export default function Index() {
         </Route>
       </Switch>
     </Router>
-  );
+  )
 }
diff --git a/vite-react/src/main.jsx b/vite-react/src/main.jsx
index 7ad1c31..d86a8a4 100644
--- a/vite-react/src/main.jsx
+++ b/vite-react/src/main.jsx
@@ -1,11 +1,11 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import Index from "./index";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import Index from './index'
 
 ReactDOM.render(
   <React.StrictMode>
     <Index />
   </React.StrictMode>,
-  document.getElementById("root")
-);
+  document.getElementById('root')
+)
diff --git a/vite-react/src/pages/app/index.jsx b/vite-react/src/pages/app/index.jsx
index 87b3b08..60e2e09 100644
--- a/vite-react/src/pages/app/index.jsx
+++ b/vite-react/src/pages/app/index.jsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
-import { DatePicker, Button } from "antd";
-import logo from "~/assets/logo.svg";
-import "./index.css";
+import React, { useState } from 'react'
+import { DatePicker, Button } from 'antd'
+import logo from '~/assets/logo.svg'
+import './index.css'
 
 function App() {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
   return (
     <div className="App">
@@ -26,7 +26,7 @@ function App() {
           >
             Learn React
           </a>
-          {" | "}
+          {' | '}
           <a
             className="App-link"
             href="https://vitejs.dev/guide/features.html"
@@ -38,7 +38,7 @@ function App() {
         </p>
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App
diff --git a/vite-react/src/pages/user/index.css b/vite-react/src/pages/user/index.css
index 53e5555..149180e 100644
--- a/vite-react/src/pages/user/index.css
+++ b/vite-react/src/pages/user/index.css
@@ -1,3 +1,3 @@
 .User {
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/vite-react/src/pages/user/index.jsx b/vite-react/src/pages/user/index.jsx
index 53fd51c..92be514 100644
--- a/vite-react/src/pages/user/index.jsx
+++ b/vite-react/src/pages/user/index.jsx
@@ -1,10 +1,6 @@
-import React from "react";
+import React from 'react'
 import './index.css'
 
 export default function User(props) {
-  return (
-    <div className="User">
-      User Page
-    </div>
-  )
-}
\ No newline at end of file
+  return <div className="User">User Page</div>
+}
diff --git a/vite-react/vite.config.js b/vite-react/vite.config.js
index ce00286..13b1c4c 100644
--- a/vite-react/vite.config.js
+++ b/vite-react/vite.config.js
@@ -1,9 +1,9 @@
-import { defineConfig } from "vite";
-import reactRefresh from "@vitejs/plugin-react-refresh";
-import { getThemeVariables } from "antd/dist/theme";
-import path from "path";
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import { getThemeVariables } from 'antd/dist/theme'
+import path from 'path'
 
-console.log(path.resolve(__dirname, "src"));
+console.log(path.resolve(__dirname, 'src'))
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [reactRefresh()],
@@ -16,9 +16,9 @@ export default defineConfig({
             dark: true,
           }),
           ...{
-            "primary-color": "#1DA57A",
-            "link-color": "#1DA57A",
-            "border-radius-base": "2px",
+            'primary-color': '#1DA57A',
+            'link-color': '#1DA57A',
+            'border-radius-base': '2px',
           },
         },
       },
@@ -26,10 +26,10 @@ export default defineConfig({
   },
   server: {
     proxy: {
-      "/api": {
-        target: "http://jsonplaceholder.typicode.com/",
+      '/api': {
+        target: 'http://jsonplaceholder.typicode.com/',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ""),
+        rewrite: (path) => path.replace(/^\/api/, ''),
       },
     },
   },
@@ -37,8 +37,8 @@ export default defineConfig({
     alias: [
       {
         find: /^~/,
-        replacement: path.resolve(__dirname, "src"),
+        replacement: path.resolve(__dirname, 'src'),
       },
     ],
   },
-});
+})