coding-style

id	coding_style
name	coding_style
description	JavaScript、TypeScript、PHP、Python、CSS 代碼規範

📝 Coding Style 技能

規範索引

語言	規範	說明
JavaScript	Airbnb	最流行、嚴格
TypeScript	TS 規範	TypeScript 特定規範（含 strict 設定）
PHP	PSR-12	PHP 官方標準（Laravel 採用）
Python	PEP8	Python 官方標準
CSS	BEM	命名規範

框架特定規則：見 ../fe/react-rules.critical.md、vue-rules.critical.md、next-rules.critical.md。

---

共通原則

命名規範

類型	JavaScript	PHP	Python
變數	camelCase	$camelCase	snake_case
函式	camelCase	camelCase	snake_case
類別	PascalCase	PascalCase	PascalCase
常數	UPPER_SNAKE	UPPER_SNAKE	UPPER_SNAKE

格式化

項目	建議
縮排	2 或 4 空格（依語言）
行寬	80-120 字元
檔案結尾	保留空行
引號	統一使用單引號或雙引號

---

工具設定

ESLint + Prettier (JS/TS)

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser"
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

EditorConfig

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.{php,py}]
indent_size = 4

---

Git Hooks

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.css": ["stylelint --fix"]
  }
}

---

選擇精靈

不確定用什麼規範？使用 Coding Style 精靈

---

相關技能

• 優先級制度（CRITICAL/HIGH/MEDIUM/LOW）
• 通用反模式（資料流、DOM、樣式、表單、後端、a11y）
• 驗證指令（lint、test、build、audit）
• React 規則庫 ｜ optional
• Vue 規則庫 ｜ optional
• Next 規則庫 ｜ optional
• 元件組合模式
• 測試體系（Code Review 配套）

建議流程：PR 必跑 lint + typecheck + test（見 ../deploy/ci-github.md）。Code Review 時載入對應框架的 *-rules.optional.md 檔。