Coding Style 技能

by @BryantChi in Tools

# Install this skill:

npx skills add BryantChi/webdev-skills --skill "Coding Style 技能"

Install specific skill from multi-skill repository

# Description

JavaScript、TypeScript、PHP、Python、CSS 程式碼規範

# SKILL.md

name: Coding Style 技能
description: JavaScript、TypeScript、PHP、Python、CSS 程式碼規範

📝 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 精靈

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.