React Native Code Quality

name description

code-quality

React Native (Expo) 项目代码质量检测和修复，包括 TypeScript 检查、ESLint、Prettier 格式化、Jest 测试。当用户提到"代码检查"、"分析"、"格式化"、"代码风格"、"质量检测"、"测试"、"lint"时使用此 skill。

React Native 代码质量检测

确保 React Native/​Expo TypeScript 代码符合项目规范，自动检测和修复问题。

快速参考

核心命令

检测项 命令 说明

类型检查 pnpm tsc --noEmit TypeScript 编译检查

代码分析 pnpm eslint . ESLint 语法/规范检查

格式化 pnpm prettier --check . 代码格式检查

测试 pnpm jest 运行 Jest 单元测试

依赖检查 pnpm outdated 检查过期依赖

Expo 诊断 npx expo doctor Expo SDK 兼容性检查

完整质量检查（一键运行）

pnpm tsc --noEmit && pnpm eslint . && pnpm prettier --check . && pnpm jest

自动修复

ESLint 自动修复

pnpm eslint . --fix

Prettier 自动格式化

pnpm prettier --write .

快速检查清单

tsc --noEmit 无类型错误

eslint . 无 error/​warning

prettier --check . 无格式问题

jest 全部测试通过

无硬编码敏感信息

子代理执行（推荐）

建议通过子代理执行完整质量检查 ：

Task ( { subagent_type : 'general-purpose' , description : '运行 RN 代码质量检查' , prompt : 运行完整代码质量检查并修复问题，遵循 .claude/​skills/​code-quality/​SKILL.md , } ) ;

原因 ：质量检查失败时可能产生大量输出（10k-20k tokens），子代理可隔离处理。

目录结构规范

根据 comet.yaml 配置，项目应遵循以下结构：

src/ app/ # 应用入口、Provider、导航 core/ # 无业务基础设施（网络、存储、主题等） features/ # Feature-first 业务模块 <feature>/ presentation/ # Screen、组件、store domain/ # 实体、仓库接口（纯 TS） data/ # 数据源、仓库实现

分层检查

层级 允许依赖 禁止依赖

domain/ 纯 TypeScript react-native 、UI 相关包

presentation/ core/ 、本 feature 的 domain/ 其他 feature 的 store/组件

data/ domain/ 接口 presentation/

安全检查

敏感信息

禁止 允许

硬编码 API Key/​Token 环境变量 ( app.config.ts / .env.* )

硬编码密码 SecureStorage / Keychain

内部 URL/​IP core/​config/​env.ts 统一管理

常见漏洞

漏洞 预防

数据泄露 移除 console.log 敏感日志

本地存储 敏感数据使用 secureStorage

网络请求 强制 HTTPS

XSS/注入 验证用户输入

性能检查

检查项 标准

单文件行数 < 500 行

组件嵌套 < 10 层

列表渲染 使用 FlatList / FlashList

避免重渲染 使用 React.memo 、 useMemo 、 useCallback

图片优化 使用缓存策略

命名规范

根据设计文档约定：

类型 命名格式 示例

目录 kebab-case user-profile/

React 组件文件 PascalCase.tsx UserProfileScreen.tsx

非组件模块 camelCase.ts httpClient.ts

Hooks useXxx.ts useCounterStore.ts

Store use<Name>Store useCounterStore

Service <Name>Service AuthService

Repository <Name>Repository counterRepository.ts

测试文件 *.test.ts(x) UserProfileScreen.test.tsx

状态管理规范

命名约定

类型 命名 用途

useXxxQuery TanStack Query 服务端状态（请求缓存）

useXxxMutation TanStack Query 服务端状态变更

useXxxStore Zustand 客户端本地状态

Zustand Store 示例

// features/​counter/​presentation/​stores/​useCounterStore.ts import { create } from 'zustand' ;

type CounterState = { value : number ; inc : ( ) => void ; dec : ( ) => void ; } ;

export const useCounterStore = create < CounterState > ( ( set ) => ( { value : 0 , inc : ( ) => set ( ( s ) => ( { value : s . value + 1 } ) ) , dec : ( ) => set ( ( s ) => ( { value : s . value - 1 } ) ) , } ) ) ;

常见问题修复

// ❌ 未使用的导入 import { unused } from 'some-package' ;

// ✅ 移除未使用导入

// ❌ 缺少类型标注 const handlePress = ( data ) => { ... }

// ✅ 添加类型 const handlePress = ( data : UserData ) => { ... }

// ❌ 内联样式 < View style = { { padding : 10 , margin : 5 } } >

// ✅ 使用 StyleSheet 或 NativeWind < View className = "p-2.5 m-1.25" >

附录

A. ESLint 配置

配置文件： .eslintrc.js 或 eslint.config.js

推荐规则集：

@typescript-eslint/​recommended

react-hooks/​recommended

prettier (避免冲突)

B. TypeScript 配置

配置文件： tsconfig.json

推荐开启：

strict: true

noImplicitAny: true

strictNullChecks: true

C. 测试命令

pnpm jest # 所有测试 pnpm jest --watch # 监听模式 pnpm jest --coverage # 覆盖率报告 pnpm jest path/​to/​test.test.ts # 指定测试

D. CI/​CD 集成

.github/​workflows/​ci.yml

• name : Type Check run : pnpm tsc --noEmit
• name : Lint run : pnpm eslint .
• name : Format Check run : pnpm prettier --check .
• name : Test run : pnpm jest --coverage

E. Pre-commit Hook

使用 lint-staged + husky

npx husky init echo " pnpm lint-staged " > .husky/​pre-commit

// package.json { "lint-staged" : { ".{ts,tsx}" : [ " eslint --fix " , " prettier --write " ], ".{json,md}" : [ " prettier --write " ] } }