前端開發規範 Skill（企業級）

本 Skill 提供完整、可落地、團隊統一的前端開發規範，適用於中後臺、移動端、Web 應用。

覆蓋範圍

• 專案結構與目錄規範
• 檔案命名規範
• HTML 編寫規範
• CSS / SCSS 規範
• JavaScript / TypeScript 規範
• Vue / React 編碼規範
• Git 提交規範
• ESLint / Prettier 規範
• 構建與效能最佳化規範
• 安全規範

使用方式

你可以直接問：

• 前端專案目錄怎麼設計？
• JS 變數命名有什麼規範？
• Vue 元件編寫最佳實踐
• Git commit 資訊怎麼寫？
• 如何配置 ESLint 規範？
• 前端效能最佳化有哪些規則？

1. 專案目錄規範（通用）

src/ ├── api/ # 介面請求 ├── assets/ # 靜態資源 ├── components/ # 公共元件 ├── composables/ # 組合式函式 ├── constants/ # 常量 ├── hooks/ # 業務 hooks ├── layouts/ # 佈局 ├── pages/ # 頁面 ├── router/ # 路由 ├── store/ # 狀態管理 ├── styles/ # 全域性樣式 ├── utils/ # 工具函式 └── App.vue/main.ts

2. 命名規範

檔案命名

• 元件：大駝峰 UserList.vue
• 工具/頁面：短橫線 user-info.ts
• 樣式：短橫線 index.scss、button.scss

變數/函式

• 變數：小駝峰 userList
• 常量：全大寫下劃線 MAX_COUNT
• 布林：is/has/should 開頭 isVisible
• 函式：動詞開頭 getUserInfo()

3. HTML 規範

• 語義化標籤：header/main/section/aside/footer
• 類名使用短橫線：class="user-card"
• 禁止冗餘標籤、禁止行內樣式
• 圖片必須加 alt，懶載入使用 loading="lazy"

4. CSS / SCSS 規範

• 使用 BEM 或短橫線命名
• 禁止巢狀超過 3 層
• 公共樣式抽離到 variables/mixins
• z-index 統一管理
• 單位優先使用 rem / vh / %
• 顏色使用變數，禁止硬編碼

5. JavaScript 規範

• 使用 const/let，禁止 var
• 優先使用箭頭函式
• 非同步優先 async/await
• 禁止巢狀過深（<3 層）
• 禁止魔法數字，抽為常量
• 陣列優先使用 map/filter/reduce

6. TypeScript 規範

• 必須定義介面/型別
• 禁止 any，能用 unknown 替代
• 介面使用 I 字首或字尾 Type
• 函式引數與返回值必須標註型別
• 型別複用優先使用 type / interface

7. Vue 規範

• 元件名多單詞，避免與 HTML 重名
• props 必須定義型別、預設值、校驗
• 指令縮寫：: @ #
• 計算屬性避免副作用
• watch 慎用，優先 computed
• 方法命名遵循動詞+名詞

8. React 規範

7w4.net小蔥技能站，你的AI助手技能庫。

• 元件使用函式式 + Hooks
• 狀態扁平化，避免巢狀
• 禁止在迴圈/條件中使用 Hooks
• 事件處理函式以 handle 開頭
• 樣式使用 CSS Modules / styled-components

9. Git 規範

提交格式： type(scope): content

type：

• feat: 新功能
• fix: 修復
• docs: 文件
• style: 格式
• refactor: 重構
• perf: 效能
• test: 測試
• chore: 構建/工具

10. ESLint + Prettier 規範

• 2 空格縮排
• 單引號
• 語句末尾分號
• 檔案末尾空行
• 禁止未使用變數
• 禁止 console（生產環境）

11. 效能規範

• 圖片壓縮、WebP
• 懶載入圖片、元件
• 路由懶載入
• 防抖節流處理高頻事件
• 大數據列表使用虛擬滾動
• 減少冗餘渲染

12. 安全規範

• 防止 XSS：過濾使用者輸入
• 防止 CSRF：token 校驗
• 敏感資訊不放在 localStorage
• 介面必須做許可權控制
• 禁止前端明文儲存金鑰/Token

這個前端規範 Skill 質量中上，優點是內容全面、覆蓋專案結構到安全規範多個方面，框架支援 Vue 和 React，適合團隊統一使用。不足之處在於規範說明比較簡單，只有原則性建議而缺少實際程式碼示例，也沒有提供可直接使用的配置檔案模板。如果你需要的是一份拿來就能用的詳細規範文件，這個 Skill 可能還需要補充更多例項和可下載資源。