一直在用 Laravel + Vue 寫網站，但在寫多人協作專案中，遇到了很多痛點：
每次新建頁面，都要手寫很多重複的程式碼，Laravel 還好，依靠程式碼片段功能可以緩解。小程式直接需要你新建
index.json、index.wxml、index.wxss、index.js新建完頁面之後，需要手動去新增路由，很多時候開啟
404，想了半天，才想起來是忘記去新增路由制定了 Git Commit 規範，執行難，總會有人不遵守不規範
依據 Git 分支做了持續整合，透過提交不同的分支，來發布測試版、預釋出版、生產版。但經常性的忘記切回開發分支，改了半天改到了別的分支上……
所以我爆肝一週，寫了一個解決這些痛點的 VSCode 擴充套件。它的思路是在專案根目錄中新建一個 .pm 資料夾，來儲存對此擴充套件的各種配置。把這個資料夾提交到 Git 中，所有開發者就擁有了相同的配置，受到了相同的約束。同時共享各種程式碼模板。
GitHub 在這裡 ➡️ 求 Star！
Project Maid 是一款 Visual Studio Code 擴充套件，為開發與組織中大型工程，提供了一系列實用工具集，All in One！
概述
Project Maid 主要關注中大型工程的組織、開發與協作方面，並提供了一系列實用工具集。
只要在工程的根目錄，建立一個 .pm 資料夾，並進行簡單的配置，即可啟用 Project Maid。
你可以將 .pm 資料夾一同提交到版本控制工具中，這樣整個工程成員，都將共享相關配置。
具體用法，敬請閱讀你感興趣的功能章節。
安裝
在 Visual Studio Code 擴充套件商店中，搜尋 project-maid 並安裝即可。或者點選此處
功能列表 (Todo)
-
模板功能：透過模板建立資料夾
-
模板功能：透過模板建立檔案
-
模板功能：建立模板後，自動修改某些檔案，如新增路由等
-
Git 功能：一鍵提交至所選分支，並切換回原分支
-
Git 功能：Commit 模板功能，打造團隊 Commit 規範
-
Git 功能：在 Commit 前，執行指定 Shell 指令碼
-
文件功能：根據註釋生成 .md 文件
模板功能
我們在開發過程中，尤其是前端開發，經常會遇到重複性複製的場景。
例如小程式開發，我們每次新建頁面，都需要建立 index.json、index.wxml、index.wxss、index.js 這些檔案。模板功能就可以讓我們化繁為簡。
入門
我們在 .pm 目錄下新建一個 templates 目錄，在這裡存放我們的模板。
接著，我們建立一個以模板名為名的資料夾。例如，我想建立一個用於新建頁面的模板，那麼我將它取名為 view。
此時，我們的目錄結構，應當如下：
> /.pm/templates/view在此目錄中，我們再新建一個資料夾，名為 {{your-name}}-view。是的， 這是一個包含大括號的檔名！ 大括號和其內容，稍後會由 Project Maid， 自動替換為我們想要的名稱~ 我們先如實地複製這個檔名稱即可。
此時，我們的目錄結構，應當如下：
> /.pm/templates/view/{{your-name}}-view我們在此資料夾內，新建一個 {{your-name}}.ts.tpl 檔案，內容為：
export function {{yourName}}() {
console.log('Say {{YourName}}!');
}完成以上操作後，我們選擇任意目錄，在其上單機滑鼠右鍵，我們可以就看到 Create from template.. 的選項選單。
我們輸入任意想要的名稱，比如 welcome，再選擇名為 view 的模板，我們就會發現目錄中，根據模板，建立了一個新的資料夾，名稱為：welcome-view
其內部，有一個名為 welcome.ts 的檔案，內容為：
export function welcome() {
console.log("Say Welcome!");
}到此為止，我們的第一個模板就完成啦！這不是什麼魔法，在接下來的文章，我們將詳細討論他是如何實現的。
單檔案模板
前文中，我們的模板是以資料夾為單位的，有時我們不需要新建一個資料夾，只需要新建一個檔案。
我們只需要將前文中的模板資料夾，更換為一個以 .tpl 為結尾的檔案即可。
> /.pm/templates/vue/{{YourName}}.vue.tpl我們總結一下：
我們可以透過模板功能，來新建檔案和新建資料夾。其中：
/.pm/templates/模板名稱下，有且只有一個資料夾，那麼此模板，將新建此資料夾/.pm/templates/模板名稱下，有且只有一個.tpl結尾的模板檔案，那麼此模板，將新建此檔案
模板變數
變數是以 {{}} 所包含的內容，它會根據建立時的輸入，動態替換為相應的內容。這就是我們前文中建立了一個名為 {{your-name}}-view 的模板，最終生成了名為 welcome-view 的檔案的原因。
目前，我們可以使用的變數，可以在 模板變數 中查閱。
Project Maid 會在兩種情況下，嘗試使用模板變數，分別是：
/.pm/templates/你的模板名稱/*中所有資料夾，會嘗試在其名稱中使用模板變數。最終生成的資料夾的實際名稱，是被模板變數替換過的。/.pm/templates/你的模板名稱/*中所有以.tpl結尾的檔案，會嘗試在其檔名稱、和其內容中，使用模板變數。最終生成的檔名，會刪去.tpl。/.pm/templates/你的模板名稱/*中，不以.tpl結尾的檔案，將被原封不動的複製。
反轉義
我們可能在使用一些框架，它們同樣在使用 {{}} 來處理變數，例如 Vue、Blade 等。我們只需要在前面新增 \ 進行反轉義，這些變數即可不經過 Project Maid 處理。
<!-- PHP Blade Template -->
<h1>\{{ $group->title }}</h1>將輸出以下內容，可以看到，變數未被處理，同時轉義符被刪去：
<!-- PHP Blade Template -->
<h1>{{ $group->title }}</h1>註釋
除了變數，你還可以書寫註釋，註釋的內容不會真的生成到實際程式碼中。
{{!-- 我是一行註釋 --}}修改其他檔案
在建立模板後，我們可能還需要更新一些其他檔案，例如新增路由。目前有三種方式完成此步驟的自動化，分別是更新 JSON 檔案、生成程式碼檔案 (可根據 JSON 生成) 和執行指定命令。
更新 JSON 檔案
透過配置此功能，我們可以實現當我們新建模板時，自動在此 JSON 檔案中追加內容。
修改 config.yaml 檔案，例如 /.pm/template/模板名稱/config.yaml（如果不存在，建立即可）
appendConfigs:
- filePath: app.json # 檔案路徑，可填寫絕對路徑，相對路徑以當前工程根目錄為起始
append: | # 追加的 JSON 內容，其中可使用模板變數
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "{{ YourName }}",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
space: 2 # 可選，最終 JSON 中縮排的空格數，預設為 2
appendPath: ["foo", "bar"] # 可選，向哪個層級中追加，被新增的層級必須是陣列，預設認為 JSON 根層是一個陣列，在根層追加
# ...生成檔案 (基於 JSON 檔案)
透過配置此功能，我們可以實現，在新建模板之後，自動在指定位置生成檔案。
假設，我們擁有一個 /configs/views.json 檔案，內容如下：
[
{
"name": "foo",
"file": "/src/views/Foo.vue"
},
{
"name": "bar",
"file": "/src/views/Bar.vue"
},
{
"name": "baz",
"file": "/src/views/Baz.vue"
}
]接下來，我們嘗試實現以下功能：
使用模板新建檔案，自動向
/configs/views.json內追加內容。根據
/configs/views.json中的內容，生成router/index.js檔案的程式碼。
修改 config.yaml 檔案，例如 /.pm/template/模板名稱/config.yaml（如果不存在，建立即可）
# 我們先設定，每次新建模板後更新此 JSON 檔案
appendConfigs:
- filePath: configs/views.json
append: |
{
"name": "{{your-name}}",
"file": "/{{path}}/{{YourName}}.vue"
}
# 接著，我們配置如何生成檔案
rewritedFiles:
- filePath: router/index.js # 檔案生成位置。若此位置的檔案存在，將覆蓋。可填寫絕對路徑，相對路徑以當前工程根目錄為起始
jsons: # 可選，將這些 json 檔案注入到模板變數中。我們這裡使用 appendConfigs 中剛剛更新的 JSON 檔案
- name: yourJsonVarViews # 名稱，可在模板中直接使用此名稱，來使用變數
path: configs/views.json # 檔案路徑，可填寫絕對路徑，相對路徑以當前工程根目錄為起始
rewrite: | # 檔案模板內容
/* ======== WARNING ======== */
/* The contents of this file are generated according to /configs/views.json. Please do not modify this file directly */
import { createRouter, createWebHistory } from 'vue-router';
{{#each yourJsonVarViews}}
import {{this.name}} from '{{this.file}}';
{{/each}}
const routes = [
{{#each yourJsonVarViews}}
{
name: '{{this.name}}',
path: '/{{this.name}}',
component: {{this.name}},
},
{{/each}}
];
const router = createRouter({
history: createWebHistory(),
routes: routes,
});
export default router;
# ...你可能注意到了，我們在 rewrite 中不但可以使用 模板變數，還將 JSON 檔案內容轉為了變數，在其中使用。另外，我們還透過 #each 來遍歷 JSON，最終生成出我們所期望的檔案。
執行指定命令
儘管，前文所述的兩種方法已經可以滿足大部分場景，但有時，我們還需要更加可自定義的方式完成我們想要的操作。例如，當我們建立一個模型檔案後，我們需要執行框架的命令，實現自動從資料庫中查詢此模型對應的表中所擁有的列，同時更新到我們新建立的模型檔案中。
我們可以配置一個掛鉤，在模板建立階段結束後，掛鉤中的所有命令都將被按順序執行。
配置命令時，我們同樣可以使用 模板變數。
修改 config.yaml 檔案，例如 /.pm/template/模板名稱/config.yaml（如果不存在，建立即可）
createdHooks:
- echo hello-{{YourName}}-1 # 要執行的命令，我們同樣可以使用模板變數
# ...Git 功能
在 /.pm/templates/git 中，建立一個 config.yaml 檔案，即可啟用 Git 功能。
其中，只要宣告工程中，擁有的分支即可（這些分支甚至不需要你事先建立）。
branches:
- master
- developer
- producer一鍵提交
Project Maid 可以幫你，將你工程中所有的更改，一鍵提交。
它會幫你一鍵執行以下操作：
將所有更改提交到暫存區
根據你填寫的資訊，進行提交
推送到遠端倉庫的指定分支，如果分支不存在，自動幫你建立
結束後，自動幫你切換回原先的當前分支
如果你選擇的分支不是當前分支，還會同時幫你推送到當前分支
只需要點選右上角的 Github 圖示即可 (章魚貓貓)。
Commit 模板
你可以為使用者提供模板，並指定 Commit 的格式。
Commit 時分為兩部分，scopes 和 subject。
scopes 用來描述本次提交的更改範疇，subject 用來描述其具體事務。
預設的 scopes 如下：
["✨ feat", "? fix", "? docs", "? style", "⚡️ perf", "✅ test", "? chore", "? build", "? refactor", "? init"];預設的 subject 是空字串，須使用者手動填寫。
你可以在 config.yaml 中自定義它們：
scopes:
- 新增功能
- 修復問題
- 補充文件
subject: 更新內容預設的訊息組成格式是 {{scope}}: {{subject}}，你同樣可以在 config.yaml 中自定義，例如：
message: 【{{scope}}】{{subject}}前置鉤子
你可以在提交前執行任意命令，只要在 config.yaml 中自定義，例如：
prehooks: echo {{branch}}其中命令所執行的目錄為，當前工程的根目錄。
變數
在 config.yaml 中的 message 欄位和 prehooks 欄位中，我們同樣可以使用變數。
目前，我們可以使用的變數可以在 Git 變數 中查閱。
待續
本作品採用《CC 協議》，轉載必須註明作者和本文連結