personal-frontend-coding-standard

name: "personal-frontend-coding-standard" description: "前端编码规范技能。提供前端开发的编码标准和最佳实践指导。"

前端编码规范技能

功能描述

提供前端开发的编码标准和最佳实践指导，帮助开发者编写高质量、可维护的前端代码。

何时使用

在以下情况调用此技能：

• 需要编写前端代码时
• 需要审查前端代码质量时
• 需要学习前端编码规范时
• 需要培训团队成员时

核心功能

• 命名规范：提供变量、函数、组件的命名标准
• 代码结构：指导代码组织和文件结构
• 样式规范：规范 CSS/SCSS 的编写
• 组件设计：指导 React/Vue 组件的设计
• 状态管理：规范状态管理的使用
• 性能优化：提供性能优化的最佳实践

输入参数

输出格式

{
  "status": "SUCCESS",
  "framework": "React",
  "language": "TypeScript",
  "focusArea": "naming",
  "rules": [
    {
      "category": "命名规范",
      "rules": [
        {
          "rule": "组件名使用 PascalCase",
          "example": "const UserProfile = () => {};",
          "description": "组件名应采用大驼峰命名法"
        }
      ]
    }
  ],
  "bestPractices": ["最佳实践1", "最佳实践2"]
}

编码规范分类

1. 命名规范

2. 代码结构

src/
├── components/          # 通用组件
│   ├── common/         # 公共基础组件
│   │   └── Button.tsx
│   ├── layout/         # 布局组件
│   │   └── Header.tsx
│   └── pages/          # 页面级组件
│       └── HomePage.tsx
├── hooks/              # 自定义 Hooks
│   └── useUser.ts
├── services/           # API 服务
│   └── api.ts
├── store/              # 状态管理
│   └── store.ts
├── types/              # 类型定义
│   └── index.ts
├── utils/              # 工具函数
│   └── format.ts
├── styles/             # 全局样式
│   └── global.css
└── App.tsx             # 主应用组件

3. 组件设计

4. 样式规范

5. 状态管理

6. 性能优化

最佳实践指南

React 前端开发最佳实践

// 组件示例
interface UserProfileProps {
  userId: string;
}

const UserProfile = ({ userId }: UserProfileProps) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await api.getUser(userId);
        setUser(data);
      } catch (err) {
        setError('Failed to fetch user');
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorDisplay message={error} />;
  if (!user) return null;

  return (
    <div className="user-profile">
      <Avatar src={user.avatar} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

export default UserProfile;

TypeScript 最佳实践

// 类型定义
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

// 联合类型
type Status = 'loading' | 'success' | 'error';

// 泛型工具类型
type PartialUser = Partial<User>;
type UserId = Pick<User, 'id'>;
type UserWithoutId = Omit<User, 'id'>;

代码审查检查清单

核心组件

配置要求

无需额外配置，基于规则引擎进行代码分析。

扩展指南

添加新的编码规则

1. 在规则引擎中添加新规则
2. 定义规则的检查逻辑
3. 更新代码审查检查清单

添加新框架支持

1. 创建对应框架的规则定义
2. 添加框架特定的最佳实践
3. 更新技能文档