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