# Solidjs Basic Guide Solidjs Naming Conventions

> SolidJS 命名约定

- Skill: `liaosw97/solidjs-basic-guide-solidjs-naming-conventions` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/solidjs-basic-guide-solidjs-naming-conventions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/solidjs-basic-guide-solidjs-naming-conventions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/solidjs-basic-guide-solidjs-naming-conventions

---


# SolidJS 命名约定

本规则集定义了在 SolidJS 应用程序中推荐的命名约定，旨在提高代码的可读性、一致性和可维护性，使团队协作更加顺畅。

## 1. 文件命名

- **组件文件**: 使用 PascalCase（大驼峰命名法）命名组件文件，并以 `.jsx` 或 `.tsx` 扩展名结尾。
  - 示例: `UserProfile.jsx`, `Button.tsx`
- **Hooks/工具函数文件**: 使用 kebab-case（烤串命名法）或 snake_case（蛇形命名法）命名，并清晰地表明其用途。
  - 示例: `use-auth.js`, `data_utils.ts`
- **样式文件**: 与组件文件同名，并使用相应的样式扩展名（如 `.css`, `.module.css`, `.scss`）。
  - 示例: `UserProfile.module.css`
- **常量文件**: 使用 kebab-case 或 snake_case，通常放在 `constants` 目录下。
  - 示例: `app-constants.js`, `api_endpoints.ts`

## 2. 组件命名

- **组件名称**: 始终使用 PascalCase（大驼峰命名法）。组件名称应该清晰、描述性强，并反映其功能。
  - 示例: `Header`, `ProductCard`, `UserAvatar`
- **避免通用名称**: 避免使用过于通用的名称，如 `Component`, `Item`，除非它们在特定上下文中非常明确。

## 3. 信号 (Signals) 和存储 (Stores) 命名

- **信号**: 使用 `createSignal` 创建的信号，通常使用 `[value, setValue]` 的解构形式。`value` 部分使用 camelCase（小驼峰命名法）。
  - 示例: `const [count, setCount] = createSignal(0);`
  - 对于布尔值，通常以 `is` 或 `has` 开头。
    - 示例: `const [isLoading, setIsLoading] = createSignal(false);`
- **存储**: 使用 `createStore` 创建的存储，通常使用 `[state, setState]` 的解构形式。`state` 部分使用 camelCase。
  - 示例: `const [userStore, setUserStore] = createStore({});`
- **派生值 (Memos)**: 使用 `createMemo` 创建的派生值，使用 camelCase。
  - 示例: `const fullName = createMemo(() => `${firstName()} ${lastName()}`);`

## 4. 函数和变量命名

- **函数**: 使用 camelCase。函数名应该清晰地表明其执行的动作。
  - 示例: `handleClick`, `fetchData`, `formatDate`
- **事件处理函数**: 通常以 `handle` 开头，后跟事件名称。
  - 示例: `onClick={handleClick}`, `onChange={handleChange}`
- **布尔变量**: 通常以 `is`, `has`, `can` 等开头。
  - 示例: `const isActive = true;`, `let hasError = false;`
- **常量**: 使用 SCREAMING_SNAKE_CASE（全大写下划线命名法）。
  - 示例: `const MAX_ITEMS = 10;`, `const API_URL = '/api';`
- **循环变量**: 简短且具描述性。
  - 示例: `item`, `idx`, `user`

## 5. 属性 (Props) 命名

- **属性名称**: 使用 camelCase。
  - 示例: `<MyComponent userName={user.name} isActive={true} />`
- **布尔属性**: 避免使用 `isLoggedIn={true}` 这样的冗余写法，直接使用 `isLoggedIn`。
  - 示例: `<Button disabled />` 而不是 `<Button disabled={true} />`

## 6. CSS 类名命名 (可选)

- **BEM (Block-Element-Modifier)**: 推荐使用 BEM 命名约定，以提高 CSS 的可读性和可维护性。
  - 示例: `block-name__element-name--modifier-name`
- **CSS Modules**: 如果使用 CSS Modules，可以利用其局部作用域的特性，但仍建议保持一致的命名风格。

## 7. 最佳实践

- **保持一致性**: 在整个项目中保持命名约定的一致性是至关重要的。
- **清晰和描述性**: 名称应该足够清晰，能够传达其用途和含义，避免使用缩写或模糊的名称。
- **避免冲突**: 确保命名不会与 JavaScript 关键字、DOM 属性或 SolidJS 内部名称冲突。
- **团队约定**: 如果是团队项目，确保所有团队成员都遵循相同的命名约定，可以通过 ESLint 规则或代码审查来强制执行。