# 示例
my_project_name
wl_admin
react_antd_webpack

# 示例
scripts/
styles/
images/
data_models/
components/
pages/

// 示例
userController.js;
roleModel.js;
authService.js;
permissionMiddleware.js;

// 示例
UserList.jsx;
RoleManagement.jsx;
PermissionDialog.jsx;

/* 示例 */
user_list.less
role_management.css
permission_dialog.scss

<!-- 示例 -->
error_report.html user_profile.html

// 变量
const userName = "admin";
const userList = [];

// 函数
function getUserInfo() {}
const handleClick = () => {};

// 常量
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";

// 类/组件
class UserService {}
function UserList() {}

// 私有变量
const _internalState = {};

-- 示例
CREATE TABLE user_info (
    id INT PRIMARY KEY,
    user_name VARCHAR(50),
    created_at DATETIME,
    INDEX idx_user_name (user_name)
);

{
  "semi": true, // 使用分号
  "trailingComma": "es5", // 尾随逗号（ES5 兼容）
  "singleQuote": false, // 使用双引号
  "printWidth": 100, // 最大行宽 100
  "tabWidth": 2, // 默认缩进 2 个空格
  "useTabs": false, // 不使用 Tab
  "arrowParens": "always", // 箭头函数参数始终使用括号
  "endOfLine": "lf", // 使用 LF 换行符
  "bracketSpacing": true, // 对象括号内空格
  "bracketSameLine": false, // 括号不换行
  "overrides": [
    {
      "files": ["*.{js,jsx,ts,tsx}"],
      "options": {
        "tabWidth": 4 // JS/TS/JSX/TSX 文件使用 4 个空格
      }
    }
  ]
}

# 格式化所有文件
pnpm format

# 格式化 apps 目录下的文件
pnpm format:apps

# 检查格式（不修改文件）
pnpm format:check

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

// ✅ 推荐
const userName = "admin";
let count = 0;
const getUserInfo = () => {};
const message = `Hello, ${userName}`;
const { name, age } = user;

// ❌ 不推荐
var userName = "admin";
function getUserInfo() {}
const message = "Hello, " + userName;

// ✅ 推荐
if (count === 0) {
}
if (name !== "") {
}

// ❌ 不推荐
if (count == 0) {
}
if (name != "") {
}

// ✅ 推荐
const name = "admin";
function getUser() {}

// ❌ 不推荐
const name = "admin";
function getUser() {}

// ✅ 推荐
const message = "Hello, World";

// ❌ 不推荐
const message = "Hello, World";

// ✅ 推荐
const obj = {};
const arr = [];

// ❌ 不推荐
const obj = new Object();
const arr = new Array();

// ✅ 推荐
const name = "admin";
const user = { name };

// ❌ 不推荐
const user = { name: name };

// ✅ 推荐
const newArr = arr.map((item) => item * 2);
const filtered = arr.filter((item) => item > 0);
const found = arr.find((item) => item.id === 1);

// ❌ 不推荐
for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2);
}

// ✅ 推荐（无状态组件）
function UserList({ users }) {
  return (
    <div>
      {users.map((user) => (
        <UserItem key={user.id} user={user} />
      ))}
    </div>
  );
}

// ✅ 推荐（有状态组件）
function UserList() {
  const [users, setUsers] = useState([]);
  return <div>{/* ... */}</div>;
}

// ❌ 不推荐（简单组件使用类组件）
class UserList extends React.Component {
  render() {
    return <div>{/* ... */}</div>;
  }
}

// ✅ 推荐
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    setLoading(true);
    const data = await api.getUsers();
    setUsers(data);
    setLoading(false);
  };

  return <div>{/* ... */}</div>;
}

// ✅ 推荐（简单数据类型）
class Button extends React.PureComponent {
  render() {
    return <button>{this.props.text}</button>;
  }
}

// ❌ 不推荐（复杂对象）
class UserList extends React.PureComponent {
  // 复杂对象可能导致浅比较失效
}

// 文件：UserList.jsx
function UserList() {
  return <div>User List</div>;
}

// 文件：RoleManagement.jsx
function RoleManagement() {
  return <div>Role Management</div>;
}

// ✅ 推荐
<Button />
<span />

// ❌ 不推荐
<Button></Button>
<span></span>

// ✅ 推荐（多个属性时换行）
<Button
    color="primary"
    onClick={handleClick}
    disabled={loading}>
    提交
</Button>

// ✅ 推荐（单个属性可单行）
<Button color="primary" />

// ✅ 推荐
{
  users.map((user) => <UserItem key={user.id} user={user} />);
}

// ❌ 不推荐（使用索引作为 key）
{
  users.map((user, index) => <UserItem key={index} user={user} />);
}

// JavaScript 项目
import PropTypes from "prop-types";

function Button({ text, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {text}
    </button>
  );
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
};

Button.defaultProps = {
  disabled: false,
};

// TypeScript 项目
interface ButtonProps {
    text: string;
    onClick?: () => void;
    disabled?: boolean;
}

function Button({ text, onClick, disabled = false }: ButtonProps) {
    return <button onClick={onClick} disabled={disabled}>{text}</button>;
}

/* 小写下划线 */
.user_list {
}
.user_item {
}
.user_item_active {
}

/* BEM 命名法 */
.user-list {
}
.user-list__item {
}
.user-list__item--active {
}

.user-list {
  padding: 16px;

  &__item {
    margin-bottom: 8px;

    &--active {
      background-color: #1890ff;
    }
  }
}

node-express-mysql/
├── config/              # 配置目录
│   ├── base/           # 基础配置（与环境无关）
│   └── env/            # 环境特定配置
├── src/
│   ├── controllers/    # 控制器（入站适配）
│   ├── models/         # 数据模型（存储访问）
│   ├── services/       # 领域服务/应用服务
│   ├── routes/         # 路由定义
│   ├── middlewares/    # 中间件
│   ├── utils/          # 工具类
│   └── infra/          # 基础设施（外部系统适配）

// ✅ 推荐
async function getUserById(id) {}
async function createUser(userData) {}
async function updateUser(id, userData) {}
async function deleteUser(id) {}

// ❌ 不推荐
async function user(id) {}
async function newUser(userData) {}

// 1. Node.js 内置模块
const fs = require("fs");
const path = require("path");

// 2. 第三方依赖
const express = require("express");
const mysql = require("mysql2/promise");

// 3. 配置
const config = require("../config");

// 4. 内部模块（按功能分组）
const userModel = require("../models/userModel");
const userService = require("../services/userService");

// ✅ 推荐（使用 async/await）
async function getUserById(id) {
  try {
    const user = await userModel.findById(id);
    return user;
  } catch (error) {
    logger.error("获取用户失败", error);
    throw error;
  }
}

// ❌ 不推荐（使用回调）
function getUserById(id, callback) {
  userModel.findById(id, (err, user) => {
    if (err) {
      callback(err);
    } else {
      callback(null, user);
    }
  });
}

// ✅ 推荐
async function createUser(userData) {
  try {
    // 参数验证
    if (!userData.username) {
      throw new Error("用户名不能为空");
    }

    // 业务逻辑
    const user = await userModel.create(userData);
    return user;
  } catch (error) {
    logger.error("创建用户失败", error);
    throw error;
  }
}

// ✅ 推荐（防止 SQL 注入）
const query = "SELECT * FROM users WHERE id = ?";
const [rows] = await db.execute(query, [userId]);

// ❌ 不推荐（SQL 注入风险）
const query = `SELECT * FROM users WHERE id = ${userId}`;
const [rows] = await db.execute(query);

// ✅ 推荐
async function transferMoney(fromId, toId, amount) {
  const connection = await db.getConnection();
  try {
    await connection.beginTransaction();

    await connection.execute("UPDATE accounts SET balance = balance - ? WHERE id = ?", [
      amount,
      fromId,
    ]);
    await connection.execute("UPDATE accounts SET balance = balance + ? WHERE id = ?", [
      amount,
      toId,
    ]);

    await connection.commit();
  } catch (error) {
    await connection.rollback();
    throw error;
  } finally {
    connection.release();
  }
}

// ✅ 推荐（使用统一日志模块）
const logger = require("../logger");

logger.info("用户登录", { userId: 1, username: "admin" });
logger.error("获取用户失败", error, { userId: 1 });
logger.warn("缓存未命中", { key: "user:1" });

app-rn-ts/
├── app/                # Expo Router 路由目录
├── src/
│   ├── components/    # 组件
│   ├── hooks/         # Hooks
│   ├── services/      # 服务层
│   ├── utils/         # 工具函数
│   ├── types/         # 类型定义
│   └── config/        # 配置文件

// ✅ 推荐
interface User {
  id: number;
  name: string;
  email: string;
}

type UserList = User[];

// ❌ 不推荐（使用 any）
function getUser(id: any): any {
  // ...
}

// ✅ 推荐
interface ButtonProps {
    title: string;
    onPress: () => void;
    disabled?: boolean;
}

function Button({ title, onPress, disabled = false }: ButtonProps) {
    return <TouchableOpacity onPress={onPress} disabled={disabled}>
        <Text>{title}</Text>
    </TouchableOpacity>;
}

// ✅ 推荐（使用路径别名）
import { login } from "@services/api";
import { useAuth } from "@hooks/useAuth";
import { Button } from "@components/common/Button";

// ❌ 不推荐（使用相对路径）
import { login } from "../../services/api";
import { useAuth } from "../../hooks/useAuth";

doc-next-ts/
├── src/
│   ├── app/           # Next.js App Router
│   ├── components/    # 组件
│   ├── lib/           # 工具函数
│   ├── styles/        # 样式文件
│   └── types/         # 类型定义

// ✅ 推荐
interface PageProps {
    params: {
        slug: string;
    };
}

export default function Page({ params }: PageProps) {
    return <div>{params.slug}</div>;
}

// ❌ 不推荐
export default function Page({ params }: any) {
    return <div>{params.slug}</div>;
}

// ✅ 推荐（函数组件）
export default function Sidebar() {
    return <aside>Sidebar</aside>;
}

// ✅ 推荐（客户端组件）
"use client";

export default function CodeBlock({ html }: { html: string }) {
    return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

<type>(<scope>): <subject>

<body>

<footer>

# 新功能
feat(user): 添加用户列表页面

# 或
feat: 添加用户列表页面

# 修复 Bug
fix(auth): 修复登录 Token 过期问题

# 或
fix: 修复登录 Token 过期问题

# 文档更新
docs(readme): 更新项目介绍文档

# 或
docs: 更新项目介绍文档

# 重构
refactor(api): 重构用户 API 接口

# 或
refactor: 重构用户 API 接口

# 性能优化
perf(cache): 优化缓存策略

# 或
perf: 优化缓存策略

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,jsx,ts,tsx}]
indent_size = 4

[*.{json,yml,yaml,md}]
indent_size = 2