📝 Coding Style 技能
規範索引
| 語言 |
規範 |
說明 |
| JavaScript - Airbnb |
最流行、嚴格 |
|
| JavaScript - Standard |
無分號風格 |
|
| TypeScript |
TypeScript 特定規範 |
|
| PHP - PSR-12 |
PHP 官方標準 |
|
| PHP - Laravel |
Laravel 風格 |
|
| Python - PEP8 |
Python 官方標準 |
|
| CSS - BEM |
命名規範 |
|
共通原則
命名規範
| 類型 |
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 精靈
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
tomevault-io