Skip to content

项目标准化

feuse-mcp 提供智能的项目标准化功能,能够分析项目结构并生成适合的开发规范和配置文件,特别是为 GitHub Copilot 和 Cursor 等 AI 编程助手优化的项目上下文。

核心功能

initialize-project-standard 工具

initialize-project-standard 工具会自动分析当前项目的结构、依赖和配置,生成以下内容:

  • 📋 项目规范文档:统一的编码规范和最佳实践
  • 🤖 AI 助手配置:针对 Copilot/Cursor 的项目上下文
  • 📁 目录结构指南:标准化的项目组织方式
  • 🔧 开发工具配置:ESLint、Prettier、TypeScript 等配置建议

使用方法

基本用法

#initialize-project-standard

该工具无需任何参数,会自动:

  1. 分析项目根目录和子目录结构
  2. 检测使用的技术栈和框架
  3. 识别现有的配置文件
  4. 生成对应的标准化文档

生成的文件

1. .copilot-instructions.md & .cursorrules

为 GitHub Copilot 和 Cursor 提供项目上下文的指导文件:

markdown
    ## 项目结构
    ### 1. 本地的pnpm-workspace.yaml文件可以获取详细的架构
    ### 2. 项目目录结构
    #### 参考
    - 请你从项目根目录去检索整个项目的结构,然后生成类似如下结构:
    ```
    ## 项目结构
    ### 1. 本地的pnpm-workspace.yaml文件可以获取详细的架构
    ### 2. 项目目录结构
    #### 参考
    - 请你从项目根目录去检索整个项目的结构,然后生成类似如下结构:
    ```bash
    一个pnpm-monorepo项目名称/
    ├── pnpm-workspace.yaml  # pnpm工作区配置文件
    ├── package.json         # 根目录的package.json文件
    ├── tsconfig.json        # 根目录的TypeScript配置文件
    ├── packages/            # 包目录
    ├── apps/                # 应用目录
        ├── xxx/               # 子项目
        │     ├── src /          # 源代码目录
        │     │   ├── components/ # 组件目录
        |     │   ├── router/     # 路由配置
        │     │   ├── store/      # 状态管理目录
        │     │   ├── utils/      # 工具函数目录
        │     │   ├── assets/     # 静态资源目录
        │     │       ├── icons/     # SVG图标目录
        │     │       ├── images/     # 图片资源目录
        │     │       ├── fonts/      # 字体资源目录
        │     │   ├── apis/       # 接口定义和地址常量
        │     │   ├── mock/       # mock数据
        │     │   ├── service/    # 通信函数
        │     │   ├── views/      # 视图组件
        │     │   ├── App.vue     # 根组件
        │     │   ├── main.ts     # 入口文件
        │     ├── public/        # 公共资源目录
        │     ├── package.json    # 项目配置文件
        │     ├── tsconfig.json    # TypeScript配置文件
        │     ├── vite.config.ts   # Vite配置文件
        │     ├── .env            # 环境变量配置文件
        │     ├── eslint.config.ts     # ESLint配置文件
        │     ├── uno.config.ts    # UnoCSS配置文件
        │     ├── .gitignore       # Git忽略文件
        │     └── README.md        # 项目说明文件
    ```
    - 注意: **请不要生成实际项目结构中没有的结构**


    ## 组件开发规范
    ### 1. 组件命名
    #### Vue组件规范
    - 组件文件名使用驼峰命名法,如 `MyComponent.vue`
    - views & pages 目录名使用小写字母和连字符,如 `my-component`
    - 项目/src/apis下为接口文件,具体生成
    #### React组件规范
    - 组件文件名使用驼峰命名法,如 `MyComponent.tsx`
    - 组件目录名使用小写字母和连字符,如 `my-component`
    - 项目/src/apis下为接口文件,具体生成

    ### 2. 项目标准
    #### 相关具体代码结构标准

    ##### SVG图标目录: 某个子项目/src/assets/icons
      - 所有SVG图标文件放在 `src/assets/icons` 目录下
      - 文件名使用小写字母和连字符,如 `icon-name.svg`

    ##### 图片资源目录: 某个子项目/src/assets/images
      - 所有图片资源放在 `src/assets/images` 目录下
      - 文件名使用小写字母和连字符,如 `image-name.png`

    ##### 接口定义以及地址常量:某个子项目/src/apis
      - 文件名为接口URL最后一部分并且用小驼峰命名,如 `queryOrderStatus.ts`
      - 代码结构参考如下:
        ```ts
        // 用户查询订单状态相关接口定义
        // path: /panzer_jack/api/v1/user/query_order_status
        // desc: 用户下单

        export const QUERY_ORDER_STATUS = '/panzer_jack/api/v1/user/query_order_status'

        // 请求参数接口
        export interface IQueryOrderStatusReq {
          order_id: string; // 订单ID
        }

        // 响应数据接口
        export interface IQueryOrderStatusResp {
          order_id: string; // 订单ID
          status: string; // 订单状态
        }
      ```

    ##### mock数据:某个子项目/src/mock
      - 文件名为接口URL最后一部分并且用小驼峰命名,如 `queryOrderStatus.ts`
      - 代码结构参考如下:
        ```ts
        // mock/queryOrderStatus.ts
        // path: /panzer_jack/api/v1/query_order_status
        // desc: 用户查询订单状态

        import type { IQueryOrderStatusReq } from '@/apis/queryOrderStatus'
        import { QueryOrderStatusErrorCode } from '@/apis/queryOrderStatus'

        export default [
          {
            url: '/panzer_jack/api/v1/query_order_status',
            method: 'post',
            response: ({ body }: { body: IQueryOrderStatusReq }) => {
              console.log('查询订单状态请求参数:', body)

              // 验证必要参数
              if (!body.order_id) {
                return {
                  code: 400,
                  message: '缺少必要参数 order_id',
                  data: body
                }
              }

              // 模拟随机系统错误的情况 (5%概率)
              if (Math.random() < 0.05) {
                return {
                  code: QueryOrderStatusErrorCode.SYSTEM_ERROR,
                  message: '发生未知错误,请前往订单列表确认是否下单成功或进行取消操作(订单列表展示可能有15分钟延迟)',
                  data: {}
                }
              }

              // 模拟不同的订单状态
              const statusArray = ['pending', 'processing', 'completed', 'cancelled']
              const randomStatus = statusArray[Math.floor(Math.random() * statusArray.length)]

              // 正常情况,返回订单状态
              return {
                code: 0,
                message: '查询订单状态成功',
                data: {
                  order_id: body.order_id,
                  status: randomStatus
                }
              }
            }
          }
        ]
        ```

    ##### 通信函数:某个子项目/src/service/index.ts
      - 函数名为接口URL最后一部分并且用小驼峰命名,如 `queryOrderStatus.ts`
      - 代码结构参考如下:
      ```ts
      import { QUERY_ORDER_STATUS, type IQueryOrderStatusResp, type IQueryOrderStatusReq } from '@/apis/queryOrderStatus.ts'

      // 使用当前项目已有的请求库和已有的请求函数规范去生成请求函数
      ```

最佳实践

  1. 利用该工具初步生成 Copilot / Cursor 项目规范样本
  2. 基于自身项目特点在对应生成的规范中进行手动修正

基于 MIT 许可发布