LogoMkSaaS文档
LogoMkSaaS文档
首页模板介绍入门文档环境配置
网站配置

功能集成

数据库身份验证邮件邮件订阅存储支付积分定时任务AI 功能统计分析通知验证码聊天框联盟营销

自定义

元数据字体主题图片国际化博客文档组件页面落地页用户管理

代码库

代码库IDE 设置项目结构格式化和代码检查更新代码库
X (Twitter)

IDE 设置

学习如何设置 VSCode、Cursor 或其他 IDE 以获得 MkSaaS 的最佳开发体验

MkSaaS 为流行的代码编辑器(如 VSCode 和 Cursor)提供了预配置设置,以提供最佳的开发体验。本文档将帮助您设置编辑器以获得最大的生产力。

推荐 IDE - Cursor

Cursor 是一个基于 VSCode 构建的代码编辑器,提供 AI 辅助开发功能。它对于使用 MkSaaS 特别有用。

如果您使用 Cursor,您可以利用其 AI 功能来:

  1. 获得上下文感知的代码补全
  2. 基于自然语言提示生成代码
  3. 智能重构代码
  4. 获得代码库复杂部分的文档和解释

用户规则

MkSaaS 在 .cursor/rules 目录中包含几个预定义的 Cursor 规则,为项目中使用的不同技术提供编码最佳实践和指导原则。这些规则有助于维护代码质量和一致性:

project-structure.mdc
development-workflow.mdc
database-state-management.mdc
ui-components.mdc
typescript-best-practices.mdc
nextjs-best-practices.mdc
react-best-practices.mdc
tailwindcss-best-practices.mdc
radix-ui-best-practices.mdc
react-hook-form-best-practices.mdc
zustand-best-practices.mdc
drizzle-orm-best-practices.mdc
date-fns-best-practices.mdc
zod-best-practices.mdc
stripe-best-practices.mdc
ai-sdk-best-practices.mdc

这些规则在 Cursor 中自动加载,可以通过从 Cursor 规则面板中选择它们来应用到您的代码中。它们提供上下文感知的指导,以改善您的开发工作流程。

文档

为了增强您的开发体验,建议将关键技术的官方文档添加到您的 Cursor 文档面板中。这允许您快速参考文档而无需离开编辑器。

考虑添加以下文档:

  • Next.js 文档 - 核心框架功能
  • Drizzle ORM 文档 - 数据库操作
  • Tailwind CSS 文档 - 样式
  • Radix UI 文档 - UI 组件
  • Shadcn/ui 文档 - 预构建组件
  • Magic UI 文档 - Magic UI 组件
  • Better Auth 文档 - 身份验证
  • Resend 文档 - 邮件和邮件订阅功能
  • Stripe 文档 - 支付处理
  • Vercel AI SDK 文档 - AI 功能
  • Vercel AI Gateway 文档 - AI 网关
  • Vercel AI Elements 文档 - AI 组件
  • Zod 文档 - 模式验证
  • Zustand 文档 - 状态管理
  • Next-Intl 文档 - 国际化
  • Fumadocs 文档 - 文档
  • Next-Safe-Action 文档 - 安全操作
  • Nuqs 文档 - 类型安全的搜索参数状态管理器
  • MkSaaS 文档 - MkSaaS 文档

在 Cursor 中添加文档:

  1. 打开 Cursor 设置
  2. 进入到 Indexing & Docs 选项卡
  3. 进入到 Docs 面板
  4. 点击 + Add doc 按钮
  5. 输入文档 URL 和名称

在您的 IDE 中随时可用这些文档将通过减少上下文切换显著加快开发速度。

Cursor 文档

推荐扩展

项目包含一个 .vscode/extensions.json 文件,当您在 VSCode 或 Cursor 中打开项目时,会提示您安装推荐的扩展。建议您选择立即安装,MkSaaS 与以下扩展配合使用效果最佳:

Biome

Biome 是一个强大的 JavaScript 和 TypeScript 项目格式化和代码检查工具。它是 ESLint 和 Prettier 等工具的高性能替代品,在单个快速包中提供格式化和代码检查功能。

下载 Biome 扩展

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 为 Tailwind CSS 类提供自动完成建议、代码检查和悬停预览,让 Tailwind CSS 变得更加容易使用。

下载 Tailwind CSS IntelliSense

i18n Ally

i18n Ally 是 VSCode 的强大国际化扩展,帮助您管理翻译,为键提供自动完成,并在代码中显示内联翻译。

下载 i18n Ally 扩展

GitLens

GitLens 增强了 VSCode/Cursor 中的 Git 功能。它帮助您可视化代码作者身份,无缝浏览 Git 仓库,探索提交历史,并直接在编辑器中比较更改。

下载 GitLens 扩展

EditorConfig

EditorConfig 帮助在不同编辑器和 IDE 之间维护一致的编码风格。它对于强制执行一致的代码格式和缩进规则特别有用。

下载 EditorConfig 扩展

MDX

MDX 扩展为 MDX 文件提供语法高亮、智能语言功能和丰富的编辑支持。它对于在 MkSaaS 项目中处理文档和内容至关重要。

下载 MDX 扩展

推荐编辑器配置

仓库在 .vscode/settings.json 中包含预配置设置,设置了:

推荐工作流程

为了获得 MkSaaS 的最佳开发体验:

使用编辑器内置终端

在 VSCode/Cursor 中使用集成终端运行开发命令,无需切换上下文。

使用源代码控制面板

VSCode/Cursor 中的 Git 管理插件使暂存、提交和推送更改变得容易。

利用 IntelliSense

TypeScript 和 React 的内置 IntelliSense 帮助您更快地编写正确的代码。

使用 i18n Ally 进行翻译

利用 i18n Ally 直接在编辑器中管理翻译,确保您的应用程序正确国际化。

视频教程

下一步

现在您的编辑器已配置好,探索这些相关主题:

项目结构

了解项目结构

代码检查和格式化

使用代码检查和格式化

环境配置

配置环境变量

更新代码库

更新项目代码库

代码库

购买 MkSaaS 后获得的所有代码库

项目结构

MkSaaS 模板文件和文件夹组织概述

目录

推荐 IDE - Cursor
用户规则
文档
推荐扩展
Biome
Tailwind CSS IntelliSense
i18n Ally
GitLens
EditorConfig
MDX
推荐编辑器配置
推荐工作流程
使用编辑器内置终端
使用源代码控制面板
利用 IntelliSense
使用 i18n Ally 进行翻译
视频教程
下一步