前端守则

技术栈

类型	要求
编辑器	Visual Studio Code
浏览器	Chrome
语言	TypeScript
UI 库	React
组件库	Ant Design / Deepsea Components
脚手架	Rsbuild / Next
路由	React Router
包管理器	Yarn
时间处理	Day.js
CSS	Tailwind / Emotion
hooks	ahooks
状态共享	ahooks / Soda Hooks / React Soda
网络请求	fetch
数据验证	Zod
数据库管理	Prisma
移动端	Capacitor
移动端组件库	Ionic
代码格式化	Prettier

要求

1. 所有 React 组件必须使用以下形式书写：

   const Component: FC = () => <div></div>
   
   export default Component
   
   // 有参数组件
   import { FC } from "react"
   
   export type ComponentProps = {}
   
   const Component: FC<ComponentProps> = props => {
       const {} = props
   
       return <div></div>
   }
   
   export default Component

2. 全局共享状态优先使用 ahooks 实现，其次 React Soda ：

   import { useRequest } from "ahooks"
   
   export function useCount() {
       return useRequest(() => Promise.resolve(Math.random()), {
           cacheKey: "abc",
       })
   }

   注意

   ahooks 在 StrictMode 下有 Bug，需要关闭严格模式

   import createStore from "react-soda"
   
   export const useCount = createStore(0)

3. CSS 样式优先使用 Tailwind 实现，其次 Emotion 或者行内样式实现。

   注意

   • Tailwind 不支持动态属性，如 `bg-${color}`
   • 尽量不要在 Emotion 中书写动态样式，Emotion 生成的样式不会被自动清除。如果有动态需求，可以使用 CSS 变量 var(--name) 搭配行内样式实现

4. 对于 Ant Design 的样式修改尽量通过修改主题来实现

5. 对于表单查询的参数使用 Soda Hooks 中的 useQueryState 来存储和控制

   import { useQueryState } from "soda-hooks"
   
   const [query, setQuery] = useQueryState({
       keys: ["name", "unit"],
       parse: {
           age: value => (value ? Number(value) : undefined),
       },
   })

6. 在项目根目录配置 Prettier：

   // prettier.config.cjs
   module.exports = {
       // tailwind 格式化插件
       plugins: ["prettier-plugin-tailwindcss"],
       semi: false,
       tabWidth: 4,
       arrowParens: "avoid",
       printWidth: 800,
       trailingComma: "none",
   }

7. 命令规范