約束前端專案中的目錄和檔名

亖混子發表於2022-04-13
前端
好的目錄設計架構就成功了一半 --- 如何約束專案中的目錄和檔名

程式設計中命名規範有：

  • camelCase (駝峰命名法)
  • PascalCase (帕斯卡命名法，又名大駝峰命名法)
  • snake_case (下劃線命名法)
  • kebab-case (中劃線命名法)
  • Hungarian notation（匈牙利命名法 - 一個十分系統又古老的命名規範）

背景

入職後接了個新的模組需求，筆者可以自由地建立程式碼檔案目錄和檔案。上線前回看了下程式碼，我滴老天爺一會兒大寫，一會小寫，一會駝峰，之前我好像沒這麼隨便。
為啥之前我沒亂寫呢？答案是有 CI、CD流水線卡控，不符合規範的程式碼無法進 master。

問題

程式碼的檔案目錄和檔案命名缺少約束會導致程式碼野蠻生長。有人說：好的目錄設計架構就成功了一半。

方案

通過正則匹配檔案路徑。問題來了：我既不會正則也不會獲取檔案路徑。找找工具吧，於是我找到了 ls-lint。 https://ls-lint.org/

ls-lint: ls-lint is an extremely fast file and directory name linter which provides a simple and fast way to bring some structure to your project directories

以前端為例，介紹下使用方式：

新增依賴

npm install @ls-lint/ls-lint # local

新增配置檔案

.ls-lint.yml

ls:
  src:
    .js: kebab-case
    .ts: kebab-case
    .d.ts: kebab-case
    .vue: kebab-case

ignore:
  - .git
  - node_modules

ls-lint 的配置非常靈活，可以按照字尾名和子目錄分別設定規則。規則包括：lowercase、camelcase、pascalcase、snakecase、screamingsnakecase、regex

執行命令

npx @ls-lint/ls-lint

執行時機

  1. Git Hook 的 pre-commit 階段可以讓開發者及時感知、及時修改

  2. 流水線上線前某個階段觸發命令，避免開發者本地使用 --no-verify 繞過，雙重保險。

    其他

    eslint、stylelint、commitlint 等各種lint 表面上會讓某些同學使用起來難受，但是從長遠角度看程式碼規範是非常有必要的。
    eslint-plugin-filename 和 eslint-plugin-folders 是否可以解決上述問題待調研。

相關文章