Lint 規范是對前端代碼的書寫規則進行限制,屬于代碼檢查和格式化工具。一般主要有以下幾種規范形式:ESLint規范、Prettier規范、StyleLint規范。
各種Lint 規范詳述
ESLint
- 主要職責:代碼質量檢查和編碼風格規范
- 關注點:
發現潛在的代碼錯誤和問題
強制執行編碼規范和最佳實踐
檢查變量使用、函數調用等邏輯問題 - 示例規則:
未使用的變量
未定義的變量
不合理的條件判斷
函數復雜度過高 - 配置文件
Prettier
- 主要職責:代碼格式化
- 關注點:
統一代碼格式,如縮進、空格、換行等
不關心代碼邏輯和質量問題
專注于代碼的"美觀" - 示例規則:
行寬限制
縮進風格(空格或制表符)
引號風格(單引號或雙引號)
尾隨逗號 - 配置文件
StyleLint
- 主要職責:CSS/SCSS等樣式代碼的檢查
- 關注點:
樣式代碼的質量和一致性
CSS屬性的順序和規范
避免冗余和過時的CSS規則 - 示例規則:
顏色格式(HEX、RGB等)
選擇器命名規范
屬性排序
避免使用!important - 配置文件
此外,還有些其他的 常用lint 規范:
- TypeScript的類型檢查(tsconfig.json)
- Commitlint,用于檢查Git提交信息是否符合規范(commitlint.config.js)
注意 - rush 項目
需要注意的是,在 rush 項目中,子項目可以共用 monorepo 中的公共 lint 規范,而不用單獨去聲明。
具體方式為在 monorepo 中可以用單獨一個 packages 來定義統一的 lint 規范,然后在各子項目中通過 package.json 引用該 lint 規范包,而不用單獨聲明 lint 文件的引用,子項目就會默認使用該統一的 lint 規范了。
如果子項目不直接引用 monorepo 中的公共 lint 規范包,各規范也會自動逐級向上找配置文件,直到找到并引用。但這種方式容易導致"幽靈依賴",不推薦。
配置文件的查找機制
各種lint工具(ESLint、Prettier、StyleLint等)在查找配置文件時,通常遵循以下查找機制:
- ESLint的查找機制
ESLint會按照以下順序查找配置:
首先查找項目內的配置文件(.eslintrc.*、package.json中的eslintConfig字段)
如果沒有找到,則向上級目錄查找,直到找到配置文件或到達根目錄
如果配置文件中設置了"root": true,則停止向上查找 - Prettier的查找機制
Prettier的查找邏輯類似:
從當前工作目錄開始查找配置文件(.prettierrc.*、prettier.config.*等)
如果沒有找到,則向上級目錄查找,直到找到配置文件或到達根目錄 - StyleLint的查找機制
StyleLint也遵循類似的模式:
從當前目錄查找配置文件(.stylelintrc.*、stylelint.config.*等)
如果沒有找到,則向上級目錄查找,直到找到配置文件或到達根目錄