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

心如止水,字如清风

流水不争先 ·

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

04/09/2025
3 分钟

作者

标签

参考

精选

Gemini

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 模式,可以阅读下面文章
Elegant patterns in modern JavaScript: RORO
I wrote my first few lines of JavaScript not long after the language was invented. If you told me at the time that I would one day be…
网站图标medium.com
预览图片
  1. 为什么不建议使用 enum
Why you shouldn'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 "RIPER-5 Mode" Fixes Claude 3.7 Drastically!
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 on extremely complex workflows/code and this specific MODE I have fine tuned with trial and error and this is the best - How to use: Just paste this in your RULES or save it as a text file in your cursor and when you start any project simple drag it in: COPY THE EXACT TEXT BELL...
网站图标forum.cursor.com
预览图片


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

评论