技能檔案

Code Formatting React

Name: Code Formatting React
Author: liaowilly12123

React and JavaScript code formatting standards. Use when: formatting React/JS code, setting up functional components, organizing file structure, configuring ESLint/Prettier, enforcing JSX patterns, reviewing component style.

liaowilly121230 星標2026年3月23日

職業
分類: 代碼質素

技能內容

React & JavaScript Code Formatting Standards

Apply these standards to maintain consistency in React/JavaScript projects.

Component Structure

Functional components only (no class components)
Import statements at top, organized by:
1. React
2. Third-party libraries
3. Local modules
Component function declaration follows imports
Hooks usage in this order: useState → useContext → useEffect → custom hooks
Helper functions at bottom of file or extracted to utils

JSX Formatting

Split multi-line JSX across lines when props exceed 80 chars per line:

<Component
  propOne={value1}
  propTwo={value2}
  propThree={value3}
/>

相關技能

Code Formatting React | Skills Pool

Code Formatting React

React & JavaScript Code Formatting Standards

Component Structure

JSX Formatting

Code Formatting React

React & JavaScript Code Formatting Standards

Component Structure

JSX Formatting

File Structure

File Naming

Tool Enforcement

Quick Workflow

Openclaw Release Maintainer

Verify

Flow

Fix

Hygiene

Add Policy

Code Formatting React

React & JavaScript Code Formatting Standards

Component Structure

JSX Formatting

Code Formatting React

React & JavaScript Code Formatting Standards

Component Structure

JSX Formatting

File Structure

File Naming

Tool Enforcement

Quick Workflow

Related Config Files

Openclaw Release Maintainer

Verify

Flow

Fix

Hygiene

Add Policy