菜单
HiMarket 前端（React + TypeScript + Vite）代码规范：Prettier/ESLint、严格 TypeScript、注释与 Fast Refresh、Design Token、Tailwind、验证命令。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/higress-group/himarket --skill frontend-coding-standards命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | frontend-coding-standards |
| description | HiMarket 前端（React + TypeScript + Vite）代码规范：Prettier/ESLint、严格 TypeScript、注释与 Fast Refresh、Design Token、Tailwind、验证命令。 |
本 Skill 用于在修改 HiMarket Web 前端 时约束格式、类型、结构与可维护性，并与仓库内已配置的工具体系保持一致。
himarket-web/himarket-frontend 或 himarket-web/himarket-admin 下的源码、样式或类型定义lint / type-check / format:check 可通过| 目录 | 说明 |
|---|---|
himarket-web/himarket-frontend/ | 开发者门户（React 19 + Vite + TypeScript） |
himarket-web/himarket-admin/ | 管理门户（同上技术栈） |
约定：两个子项目各自在根目录执行 npm 脚本；若一次变更涉及两个应用，分别在对应目录运行验证命令（见第 9 节）。
.prettierrc 为准，提交前执行 npm run format 或确保 format:check 通过。| 项 | 要求 |
|---|---|
| 缩进 | 2 空格（tabWidth: 2，useTabs: false） |
| 引号 | 单引号（singleQuote: true） |
| 分号 |
使用分号（semi: true） |
| 行尾逗号 | 多行末尾始终加逗号（trailingComma: "all"） |
| 对象括号空格 | bracketSpacing: true |
| 箭头函数参数 | 单参数也保留括号（arrowParens: "always"） |
| 换行符 | LF（endOfLine: "lf"） |
| 最大行宽 | printWidth: 100（超出应换行，而非放宽配置） |
eslint-plugin-prettier（Prettier 问题在 ESLint 中报告）。不要在业务代码里用格式化风格与 Prettier 对抗；有争议以 .prettierrc 为准。eslint.config.js，禁止为“图省事”大面积 eslint-disable。@typescript-eslint/consistent-type-imports: error — 类型使用 import type。@typescript-eslint/no-explicit-any: error@typescript-eslint/no-non-null-assertion: erroreqeqeq: ['error', 'always'] — 必须使用 === / !==。import/order — 分组、字母序、@/** 作为 internal；组间空行。perfectionist/sort-jsx-props、perfectionist/sort-objects — 按字母序排序（保持与现有代码一致）。jsx-a11y/* — 可访问性（如 alt-text、click-events-have-key-events 等）。no-console: error（仅允许 console.warn / console.error）。no-warning-comments — 以 TODO / FIXME 开头的注释会触发 warn（见第 4 节 TODO 约定）。react-refresh/only-export-components — 见第 5.2 节 Fast Refresh。react-hooks/exhaustive-deps: error"strict": true，并包含如 noUnusedLocals、noUnusedParameters、noUncheckedIndexedAccess、noImplicitReturns 等加强选项（以各包 tsconfig*.json 为准）。tsc。anyany 逃避类型检查（与 ESLint 一致）。unknown 收窄，再辅以 类型守卫 或 有依据的类型断言（as），并尽量把断言收敛在边界层（API 解析、第三方回调等）。// 避免
function parse(input: any) {
return input.foo;
}
// 更好：unknown + 收窄或明确类型
function parse(input: unknown) {
if (typeof input === 'object' && input !== null && 'foo' in input) {
return (input as { foo: string }).foo;
}
throw new TypeError('Invalid payload');
}
!value! 假定非空；改用可选链、显式判空、早期返回或合理的数据结构（与 ESLint 一致）。=== 与 !==（禁止 == / !=）。src/types/ 目录（及同类类型定义文件）：注释必须使用英文（含 JSDoc / 行内说明）。// 注释达到 3 行及以上且仅为旧代码备份，必须删除或改为版本控制中的历史记录，不要留在主干。TODO / FIXME 开头的注释有警告；请仅在有真实跟进需求时使用，且必须带具体描述（负责人、工单链接、或明确下一步），避免 // TODO: fix 这类无意义占位。// 可接受：具体可执行
// TODO(himarket#123): migrate to new API response shape once backend deploys
// 避免
// TODO: handle error
export const UserPanel = () => { ... }）。function 声明，新代码优先箭头函数；大范围改写时可在同一 PR 内局部统一，避免无关重排。react-refresh/only-export-components）allowConstantExport: true — 允许与组件同文件的 常量 导出；hooks、工具函数、大型非组件逻辑 仍应 拆到独立文件（如 useXxx.ts、xxxUtils.ts）。export const / export function / export type），避免默认导出（export default），以利于静态分析与 tree-shaking、以及 IDE 重构。default，保持该文件职责单一、导出唯一。use 前缀命名，放在 hooks/ 或与领域就近的 useXxx.ts 文件中。utils/ 或 lib/ 等现有约定目录，不与组件混在一个巨型文件里。aliyunThemeToken（见 src/aliyunThemeToken 及 App.tsx 内 ConfigProvider）统一衍生，避免在业务里硬编码大量散落的色值/圆角；局部覆盖优先使用 theme / token 扩展或组件 styles / className 与 Token 一致。interface（或 type），命名清晰（如 UserPanelProps）；避免 props: any 或过度宽泛的对象类型。value + onChange（或等价 API）清晰可追溯；避免非受控与受控混用导致不可预期的同步问题。else 金字塔。data、temp、handler1 等模糊命名。在对应子项目根目录执行（路径示例）：
cd himarket-web/himarket-admin # 或 himarket-web/himarket-frontend
npm run lint
npm run type-check
npm run format:check
| 脚本 | 作用 |
|---|---|
npm run lint | ESLint（含 Prettier 集成规则） |
npm run type-check | TypeScript 类型检查（admin：tsc --noEmit；frontend：tsc -b，以各包 package.json 为准） |
npm run format:check | Prettier 仅检查（不写入） |
合并前要求：对上述已修改的应用目录，三项均须通过。必要时可运行 npm run lint:fix 与 npm run format 自动修复可修复项，再复查 diff。
any、无 ! 非空断言、无 ==types/ 下注释为英文；无大块注释死代码console.log 已移除aliyunThemeToken + Tailwind；props 有明确 interfacelint、type-check、format:check 均已通过