Eavan's Blog LogoEavan's Blog
TAGSFRIENDSBOOKSSEARCH
TAGS
FRIENDS
BOOKS
SEARCH
Eavan's Blog LogoEAVAN
·

心如止水,字如清风

流水不争先 · 2025

我的cursor/windsurf规则(长期更新)

04/09/2025
3 分钟

作者

标签

参考

精选

google/gemini-2.5-pro-exp-03-25 Logo

AI 摘要 (由 google/gemini-2.5-pro-exp-03-25 生成)

本文分享了一套个人前端编码规范与习惯。核心内容包括:文件命名规则(路由用kebab-case,组件用PascalCase,其他用camelCase);推荐为复杂函数编写详细的JSDoc注释;代码风格上推崇函数式、RORO模式、TypeScript(接口优于类型,避免枚举);并提出了性能优化建议,如优先使用RSC、Suspense、动态加载、优化图片和Web Vitals。

12.99s
~2544 tokens

介绍:

下面仅仅是我个人的自己收藏的一些规则以及自己写代码的习惯,并且随着时间的发展,ai 能力的提升可能越来越不适用,仅供参考

文件命名规范

路由

使用 kebab-case (例如: /app/user-profile, /app/product-catalog)。

原因: 这与 URL 路径的常见格式保持一致,并且是 Next.js App Router 中的自然选择。

非路由文件夹及文件

使用 camelCase (例如: /src/lib/dataFetching.ts, /src/hooks/useAuth.ts, /src/utils/stringUtils.ts)。

原因: camelCase 是 JavaScript 和 TypeScript 世界中变量和函数的标准命名约定,用在这些辅助模块的文件名上也很自然。

React组件文件

使用 PascalCase (例如: /src/components/UserProfileCard.tsx, /src/components/ui/PrimaryButton.tsx)。

这是 React 社区的标准,清晰地标识出这些文件定义了 React 组件,并且与 JSX 中使用组件时的标签名 (<UserProfileCard />) 保持一致。


利用了不同场景下的约定俗成,并且通过大小写和分隔符的不同,在视觉上就能很好地区分出:

  • 路由结构 (kebab-case)
  • 功能性代码模块 (camelCase)
  • UI 组件 (PascalCase)


复杂函数注释

代码风格

  1. 什么是RORO 模式,可以阅读下面文章
Content from medium.com
Unable to fetch detailed metadata
网站图标medium.com
  1. 为什么不建议使用 enum
Why you shouldn&#39;t use Enums!
TypeScript Enums are heavily overused in my opinion. Here are plenty of reasons why!
网站图标www.wordman.dev
预览图片

性能优化

普通规则

特殊说明

因为 ai 特别喜欢写如下不必要的代码,可以通过这个eslint 规则网站图标you-might-not-need-an-effect去避免

ai code


项目结构

为什么要将lib和utils分开?

在许多项目中,开发者会创建一个 lib 或 utils 目录来存放共享的辅助代码。虽然两者有时可以互换使用,但进行区分有助于提升代码库的清晰度:

  • src/utils/: 推荐用于存放纯粹的、通用的、无副作用的辅助函数。这些函数通常不依赖于外部服务(如 API、数据库)或特定的框架特性,并且易于独立测试。
    • 示例: formatDate.ts (日期格式化), stringUtils.ts (字符串操作), validationHelpers.ts (简单的同步校验函数), mathUtils.ts (计算工具)。
  • src/lib/: 推荐用于存放更复杂的逻辑、与外部系统或框架集成的代码、核心业务逻辑封装、常量定义等。这些代码可能具有副作用,或者依赖于特定的环境或配置。
    • 示例: lib/apiClient.ts (封装的 API 请求客户端), lib/auth.ts (认证相关逻辑,可能涉及 NextAuth 或其他库), lib/db.ts (数据库连接或 ORM 实例), lib/constants.ts (应用级常量), lib/hooks/useCustomHook.ts (共享的自定义 Hooks), lib/featureFlags.ts (功能开关逻辑)。

区分的理由: 这种区分有助于开发者快速判断代码的性质和依赖程度。utils 目录下的代码通常是高度可移植和可复用的基础工具,而 lib 目录下的代码则更贴近应用的具体实现和外部依赖。

特殊规则

cursor 论坛流出的神级五大模式提问法,特别适合非 max 的模型使用,尤其是得益于 1M 容量的上下文长度,gemini 2.5 效果极佳,缺点就是会消耗更多的次数,相当于一个伪max 模式

I created an AMAZING MODE called &quot;RIPER-5 Mode&quot; Fixes Claude 3.7 Drastically! - Guides - Cursor - Community Forum
This has fixed just about EVERY SINGLE problem for me with Claude 3.7 in Cursor - It has turned my development into a CRACKED BEAST - I code about 12 hours a day, and I work on about 2 different Cursor windows at a time &amp;hellip;
网站图标forum.cursor.com
预览图片


如未标记非原创,转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,未经站长允许不得对文章文字内容进行修改演绎,不得用于商业目的。
本文采用CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。