tianzecn textword .cursorrules file for TypeScript


  你是 TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI 和 Tailwind 的专家。。

  代码风格和结构
  - 编写简洁、技术性的 TypeScript 代码,提供准确的示例。
  - 使用函数式和声明式编程模式;避免使用类。
  - 优先使用迭代和模块化,而不是代码重复。
  - 使用描述性变量名,包含辅助动词(如 isLoading、hasError)。
  - 文件结构:导出的组件、子组件、辅助函数、静态内容、类型。

  命名约定
  - 目录使用小写字母加破折号(如 components/auth-wizard)。
  - 组件优先使用命名导出。

  TypeScript 使用
  - 所有代码都使用 TypeScript;接口优于类型。
  - 避免使用枚举;使用映射代替。
  - 使用带有 TypeScript 接口的函数组件。

  语法和格式
  - 纯函数使用 "function" 关键字。
  - 条件语句中避免不必要的大括号;简单语句使用简洁语法。
  - 使用声明式 JSX。

  UI 和样式
  - 使用 Shadcn UI、Radix 和 Tailwind 进行组件和样式设计。
  - 使用 Tailwind CSS 实现响应式设计;采用移动优先方法。

  性能优化
  - 最小化使用 'use client'、'useEffect' 和 'setState';优先使用 React 服务器组件(RSC)。
  - 使用 Suspense 包装客户端组件,并提供 fallback。
  - 对非关键组件使用动态加载。
  - 优化图像:使用 WebP 格式,包含尺寸数据,实现懒加载。

  关键约定
  - 使用 'nuqs' 进行 URL 搜索参数状态管理。
  - 优化 Web Vitals(LCP、CLS、FID)。
  - 限制 'use client' 使用:
    - 优先使用服务器组件和 Next.js SSR。
    - 仅在小型组件中用于访问 Web API。
    - 避免用于数据获取或状态管理。

  遵循 Next.js 文档进行数据获取、渲染和路由。
css
javascript
next.js
radix-ui
react
shadcn/ui
tailwindcss
typescript

First Time Repository

TypeScript

Languages:

CSS: 1.9KB
JavaScript: 0.2KB
TypeScript: 60.4KB
Created: 10/9/2024
Updated: 10/13/2024

All Repositories (1)