Coding Standards

affaan-m/ECC/docs/zh-CN/skills/coding-standards

by affaan-mef648e01899ba3e8dc6371642deaaf64b4477775No license275K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 4 days ago

适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式。

Instructions onlySoftware Development
AI-generated overview

Provides general coding standards and best practices for TypeScript, JavaScript, React and Node.js development.

What it does
This skill supplies a reference set of coding standards covering readability, KISS, DRY and YAGNI principles, plus TypeScript/JavaScript naming, immutability, error handling, async patterns and type safety. It also documents React component, hook and state conventions, REST API design, response formats, input validation, file organization, comments, performance and testing standards. It produces guidance and examples rather than files or code changes.
When to use it
Use it when starting a new project or module, reviewing code quality and maintainability, refactoring code to follow conventions, or enforcing naming, formatting and structure consistency. It also fits setting up linting, formatting or type-checking rules and onboarding new contributors to coding conventions.
Requirements
No tools, packages or credentials are required; it is instructions only and ships no scripts.

编码标准与最佳实践

适用于所有项目的通用编码标准。

何时激活

  • 开始新项目或新模块时
  • 审查代码质量和可维护性时
  • 重构现有代码以遵循约定时
  • 强制执行命名、格式或结构一致性时
  • 设置代码检查、格式化或类型检查规则时
  • 引导新贡献者熟悉编码规范时

代码质量原则

1. 可读性优先

  • 代码被阅读的次数远多于被编写的次数
  • 清晰的变量和函数名
  • 优先选择自文档化代码,而非注释
  • 一致的格式化

2. KISS (保持简单,傻瓜)

  • 采用能工作的最简单方案
  • 避免过度设计
  • 不要过早优化
  • 易于理解 > 聪明的代码

3. DRY (不要重复自己)

  • 将通用逻辑提取到函数中
  • 创建可复用的组件
  • 跨模块共享工具函数
  • 避免复制粘贴式编程

4. YAGNI (你不会需要它)

  • 不要预先构建不需要的功能
  • 避免推测性泛化
  • 仅在需要时增加复杂性
  • 从简单开始,需要时再重构

TypeScript/JavaScript 标准

变量命名

typescript
// PASS: GOOD: Descriptive namesconst marketSearchQuery = 'election'const isUserAuthenticated = trueconst totalRevenue = 1000
// FAIL: BAD: Unclear namesconst q = 'election'const flag = trueconst x = 1000

函数命名

typescript
// PASS: GOOD: Verb-noun patternasync function fetchMarketData(marketId: string) { }function calculateSimilarity(a: number[], b: number[]) { }function isValidEmail(email: string): boolean { }
// FAIL: BAD: Unclear or noun-onlyasync function market(id: string) { }function similarity(a, b) { }function email(e) { }

不可变性模式 (关键)

typescript
// PASS: ALWAYS use spread operatorconst updatedUser = {  ...user,  name: 'New Name'}
const updatedArray = [...items, newItem]
// FAIL: NEVER mutate directlyuser.name = 'New Name'  // BADitems.push(newItem)     // BAD

错误处理

typescript
// PASS: GOOD: Comprehensive error handlingasync function fetchData(url: string) {  try {    const response = await fetch(url)
    if (!response.ok) {      throw new Error(`HTTP ${response.status}: ${response.statusText}`)    }
    return await response.json()  } catch (error) {    console.error('Fetch failed:', error)    throw new Error('Failed to fetch data')  }}
// FAIL: BAD: No error handlingasync function fetchData(url) {  const response = await fetch(url)  return response.json()}

Async/Await 最佳实践

typescript
// PASS: GOOD: Parallel execution when possibleconst [users, markets, stats] = await Promise.all([  fetchUsers(),  fetchMarkets(),  fetchStats()])
// FAIL: BAD: Sequential when unnecessaryconst users = await fetchUsers()const markets = await fetchMarkets()const stats = await fetchStats()

类型安全

typescript
// PASS: GOOD: Proper typesinterface Market {  id: string  name: string  status: 'active' | 'resolved' | 'closed'  created_at: Date}
function getMarket(id: string): Promise<Market> {  // Implementation}
// FAIL: BAD: Using 'any'function getMarket(id: any): Promise<any> {  // Implementation}

React 最佳实践

组件结构

typescript
// PASS: GOOD: Functional component with typesinterface ButtonProps {  children: React.ReactNode  onClick: () => void  disabled?: boolean  variant?: 'primary' | 'secondary'}
export function Button({  children,  onClick,  disabled = false,  variant = 'primary'}: ButtonProps) {  return (    <button      onClick={onClick}      disabled={disabled}      className={`btn btn-${variant}`}    >      {children}    </button>  )}
// FAIL: BAD: No types, unclear structureexport function Button(props) {  return <button onClick={props.onClick}>{props.children}</button>}

自定义 Hooks

typescript
// PASS: GOOD: Reusable custom hookexport function useDebounce<T>(value: T, delay: number): T {  const [debouncedValue, setDebouncedValue] = useState<T>(value)
  useEffect(() => {    const handler = setTimeout(() => {      setDebouncedValue(value)    }, delay)
    return () => clearTimeout(handler)  }, [value, delay])
  return debouncedValue}
// Usageconst debouncedQuery = useDebounce(searchQuery, 500)

状态管理

typescript
// PASS: GOOD: Proper state updatesconst [count, setCount] = useState(0)
// Functional update for state based on previous statesetCount(prev => prev + 1)
// FAIL: BAD: Direct state referencesetCount(count + 1)  // Can be stale in async scenarios

条件渲染

typescript
// PASS: GOOD: Clear conditional rendering{isLoading && <Spinner />}{error && <ErrorMessage error={error} />}{data && <DataDisplay data={data} />}
// FAIL: BAD: Ternary hell{isLoading ? <Spinner /> : error ? <ErrorMessage error={error} /> : data ? <DataDisplay data={data} /> : null}

API 设计标准

REST API 约定

GET    /api/markets              # 列出所有市场GET    /api/markets/:id          # 获取特定市场POST   /api/markets              # 创建新市场PUT    /api/markets/:id          # 更新市场(完整)PATCH  /api/markets/:id          # 更新市场(部分)DELETE /api/markets/:id          # 删除市场
# 用于筛选的查询参数GET /api/markets?status=active&limit=10&offset=0

响应格式

typescript
// PASS: GOOD: Consistent response structureinterface ApiResponse<T> {  success: boolean  data?: T  error?: string  meta?: {    total: number    page: number    limit: number  }}
// Success responsereturn NextResponse.json({  success: true,  data: markets,  meta: { total: 100, page: 1, limit: 10 }})
// Error responsereturn NextResponse.json({  success: false,  error: 'Invalid request'}, { status: 400 })

输入验证

typescript
import { z } from 'zod'
// PASS: GOOD: Schema validationconst CreateMarketSchema = z.object({  name: z.string().min(1).max(200),  description: z.string().min(1).max(2000),  endDate: z.string().datetime(),  categories: z.array(z.string()).min(1)})
export async function POST(request: Request) {  const body = await request.json()
  try {    const validated = CreateMarketSchema.parse(body)    // Proceed with validated data  } catch (error) {    if (error instanceof z.ZodError) {      return NextResponse.json({        success: false,        error: 'Validation failed',        details: error.errors      }, { status: 400 })    }  }}

文件组织

项目结构

src/├── app/                    # Next.js App Router│   ├── api/               # API routes│   ├── markets/           # Market pages│   └── (auth)/           # Auth pages (route groups)├── components/            # React components│   ├── ui/               # Generic UI components│   ├── forms/            # Form components│   └── layouts/          # Layout components├── hooks/                # Custom React hooks├── lib/                  # Utilities and configs│   ├── api/             # API clients│   ├── utils/           # Helper functions│   └── constants/       # Constants├── types/                # TypeScript types└── styles/              # Global styles

文件命名

components/Button.tsx          # 组件使用帕斯卡命名法hooks/useAuth.ts              # 使用 'use' 前缀的驼峰命名法lib/formatDate.ts             # 工具函数使用驼峰命名法types/market.types.ts         # 使用 .types 后缀的驼峰命名法

注释与文档

何时添加注释

typescript
// PASS: GOOD: Explain WHY, not WHAT// Use exponential backoff to avoid overwhelming the API during outagesconst delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
// Deliberately using mutation here for performance with large arraysitems.push(newItem)
// FAIL: BAD: Stating the obvious// Increment counter by 1count++
// Set name to user's namename = user.name

公共 API 的 JSDoc

typescript
/** * Searches markets using semantic similarity. * * @param query - Natural language search query * @param limit - Maximum number of results (default: 10) * @returns Array of markets sorted by similarity score * @throws {Error} If OpenAI API fails or Redis unavailable * * @example * ```typescript * const results = await searchMarkets('election', 5) * console.log(results[0].name) // "Trump vs Biden" * ``` */export async function searchMarkets(  query: string,  limit: number = 10): Promise<Market[]> {  // Implementation}

性能最佳实践

记忆化

typescript
import { useMemo, useCallback } from 'react'
// PASS: GOOD: Memoize expensive computations// Copy before sorting - Array.prototype.sort mutates in placeconst sortedMarkets = useMemo(() => {  return [...markets].sort((a, b) => b.volume - a.volume)}, [markets])
// PASS: GOOD: Memoize callbacksconst handleSearch = useCallback((query: string) => {  setSearchQuery(query)}, [])

懒加载

typescript
import { lazy, Suspense } from 'react'
// PASS: GOOD: Lazy load heavy componentsconst HeavyChart = lazy(() => import('./HeavyChart'))
export function Dashboard() {  return (    <Suspense fallback={<Spinner />}>      <HeavyChart />    </Suspense>  )}

数据库查询

typescript
// PASS: GOOD: Select only needed columnsconst { data } = await supabase  .from('markets')  .select('id, name, status')  .limit(10)
// FAIL: BAD: Select everythingconst { data } = await supabase  .from('markets')  .select('*')

测试标准

测试结构 (AAA 模式)

typescript
test('calculates similarity correctly', () => {  // Arrange  const vector1 = [1, 0, 0]  const vector2 = [0, 1, 0]
  // Act  const similarity = calculateCosineSimilarity(vector1, vector2)
  // Assert  expect(similarity).toBe(0)})

测试命名

typescript
// PASS: GOOD: Descriptive test namestest('returns empty array when no markets match query', () => { })test('throws error when OpenAI API key is missing', () => { })test('falls back to substring search when Redis unavailable', () => { })
// FAIL: BAD: Vague test namestest('works', () => { })test('test search', () => { })

代码异味检测

警惕以下反模式:

1. 长函数

typescript
// FAIL: BAD: Function > 50 linesfunction processMarketData() {  // 100 lines of code}
// PASS: GOOD: Split into smaller functionsfunction processMarketData() {  const validated = validateData()  const transformed = transformData(validated)  return saveData(transformed)}

2. 深层嵌套

typescript
// FAIL: BAD: 5+ levels of nestingif (user) {  if (user.isAdmin) {    if (market) {      if (market.isActive) {        if (hasPermission) {          // Do something        }      }    }  }}
// PASS: GOOD: Early returnsif (!user) returnif (!user.isAdmin) returnif (!market) returnif (!market.isActive) returnif (!hasPermission) return
// Do something

3. 魔法数字

typescript
// FAIL: BAD: Unexplained numbersif (retryCount > 3) { }setTimeout(callback, 500)
// PASS: GOOD: Named constantsconst MAX_RETRIES = 3const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES) { }setTimeout(callback, DEBOUNCE_DELAY_MS)

记住:代码质量不容妥协。清晰、可维护的代码能够实现快速开发和自信的重构。

Source and attribution

Source:affaan-m/ECCindocs/zh-CN/skills/coding-standardsat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal