目錄

• 前言
• 正文
• 1. 安裝stylelint
• 2. 配置檔案
• 3. 使用stylelint
• 踩坑點1：
• 4. 配置規則
• 5. 忽略lint檔案
• 6. 自動格式化
• 外掛踩坑集錦
• 7. commit檢測

前言

團隊合作時，當每個人的程式碼都擁有自定義的格式化方式時，在提交merge的時候往往要解決很多衝突，此時我們可以使用eslint+stylelint來對團隊的程式碼進行約束。

正文

stylelint是一個強大的，現代的程式碼檢查工具，可以幫助你在團隊合作中強制執行樣式約定。

1. 安裝stylelint

yarn add -D stylelint

2. 配置檔案

使用 stylelint檢測器需要一個配置物件，你可以使用三種方式來建立這個物件。

package.on中的stylelint 屬性。

.stylelintrc.js檔案

stylelint.config.js檔案輸出的js物件

一旦發現它們中的任何一個，將不再繼續進行查詢，進行解析，將使用解析後的物件。 本次使用的是.stylelintrc.js檔案來進行配置。

3. 使用stylelint

安裝官方文件的說法你可以按照以下方法執行stylelint檢測樣式程式碼。

--fix用來自動修復，但不能修復所有的問題。

// package.json
"scripts":{
  "lint:":"stylelint src/**/*.css --fix"
}

踩坑點1：

由於我的專案裡使用的樣式語言是less。所以檢測css是肯定不對的，所以這裡我們需要做一點改動

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.less --fix"
}

於是我們可以執行這串程式碼了

yarn lint:css postcss-less

大家可以看到，這裡報了一些提醒，簡單翻譯為讓我們用對應的語法去解析我們的樣式。而這對應的語法解析器是需要我們去安裝的。

yarn add -D postcss-less

於是再次對進行修改。

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.less --fix  --custom-syntax postcss-less"
}

OK 到這裡我們就可以正常的去跑lint命令對我們的樣式程式碼進行格式化了。接下來我們來配置lint規則

4. 配置規則

我們首先需要安裝三個npm包幫助我們完善規則

yarn add -D stylelint-config-standard stylelint-order stylelint-config-css-modules

stylelint-config-standard是stylelint的推薦配置，stylelint-order是用來在格式化css檔案時對程式碼的屬性進行排序。

stylelint-config-css-modules是css-module的方案來處理樣式檔案

我的配置檔案長這樣：

// .stylelintrc.js
module.exports = {
    processors: [],plugins: ['stylelint-order'],extends: [
        "stylelint-config-standard","stylelint-config-css-modules"
    ],rules: {
        "selector-class-pattern": [ // 命名規範 -
            "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{
                "message": "Expected class selector to be kebab-case"
            }
        ],"string-quotes":"single",// 單引號
        "at-rule-empty-line-before": null,"at-rule-no-unknown":null,       "at-rule-name-case": "lower",// 指定@規則名的大小寫
        "length-zero-no-unit": true,// 禁止零長度的單位（可自動修復）
        "shorthand-property-no-redundant-values": true,// 簡寫屬性
        "number-leading-zero": "never",// 小數不帶0
        "declaration-block-no-duplicate-properties": true,// 禁止宣告快重複屬性
        "no-descending-specificity": true,// 禁止在具有較高優先順序的選擇器後出現被其覆蓋的較低優先順序的選擇器。
        "selector-max-id": 0,// 限制一個選擇器中 ID 選擇器的數量
        "max-nesting-depth": 3,"indentation": [2,{  // 指定縮排  warning 提醒
            "severity": "warning"
        }],"order/properties-order": [ // 規則順序
            "position","top","right","bottom","left","z-index","display","float","width","height",'max-width','max-height','min-width','min-height','padding','padding-top','padding-right','padding-bottom','padding-left','margin','margin-top','margin-right','margin-bottom','margin-left','margin-collapse','margin-top-collapse','margin-right-collapse','margin-bottom-collapse',客棧   'margin-left-collapse','overflow','overflow-x','overflow-y','clip','clear','font','font-family','font-size','font-smoothing','osx-font-smoothing','font-style','font-weight',"line-height",'letter-spacing','word-spacing',"color","text-align",'text-decoration','text-indent','text-overflow','text-rendering','text-size-adjust','text-shadow','text-transform','word-break','word-wrap','white-space','vertical-align','list-style','list-style-type','list-style-position','list-style-image','pointer-events','cursor',"background","background-color","border","border-radius",'content','outline','outline-offset','opacity','filter','visibility','size','transform',],}
};

processors屬性由於此次並沒有使用，所以不做介紹，有興趣的同學可以查詢官方文件。

plugins是由社群建立的規則或規則集，支援方法論、工具集，非標準的 CSS 特性，或非常特定的用例。

extends繼承一個已存在的配置檔案。（在我的配置中，繼承了css-module和官方推薦的配置）

rules規則決定檢測器要查詢什麼和要解決什麼，所以，通過該選項你就可以開啟相應規則，進行相應的檢測。所有規則必須顯式的進行配置，因為沒有預設值。

注意：null為禁用規則。可以在rules裡面重寫覆蓋官方推薦的配置規則。

5. 忽略lint檔案

此時我們已經可以正常的使用stylelint來格式化樣式程式碼了。但是在專案中往往會存在一些不需要格式化的程式碼，比如我們會單獨抽離一個overrides檔案來重寫antd的樣式。顯然這裡是不需要格式化的，因為antd的選擇器命名可能跟我們的規範不盡相同。所以我們需要在執行lint時忽略這個檔案。

我們可以在.stylelintrc.js中配置ignoreFiles。

建立.stylelintignore檔案。

我們可以通過/* stylelint-disable */的方法，來對程式碼快進行忽略lint檢測。

我採用的是第二種方法，配置如下：

// .stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
*.css
src/styles/antd-overrides.less

6. 自動格式化

在進行完上文的配置之後，其實我們已經達到了規範的目的，但是如果每次都要跑一次lint無疑就會加重我們的編碼負擔。這裡介紹兩種方式在我們寫樣式程式碼時，對程式碼自動格式化的方法。

stylelint vs-code 外掛

webpack plugin

為什麼一個webpack外掛可以幫助我們格式化樣式程式碼呢，這是因為我們在熱更新重新編譯的時候，這個外掛會幫我們檢測程式碼。並根據.stylelintrc.js檔案中配置的規則進行fix。 如果有lint錯誤可以選擇讓專案無法執行，避免將沒有lint的樣式上傳到程式碼庫。

於是我在使用這個外掛的時候踩了好多坑，接下來我一一的說。

外掛踩坑集錦

最開始時。按百度到的各路大神的寫法，只需要這麼配置就可以：

new StyleLintPlugin({
    context: "src",configFile: path.resolve(__dirname,'./stylelintrc.js'),files: '**/*.less',failOnError: false,quiet: true,syntax: 'less'
})

結局不出意料，沒有用。最恐怖的是他會給你一種假象，你本地執行的時候沒有任務問題，讓你誤以為你的程式碼沒有任何問題！其實，是這個外掛沒有作用到。

另外這麼配置如果使用stylelint的vscode擴充套件時，還會有一大堆的讓你心態爆炸的紅波浪~~~~。

經過我的踩坑，終於完成了一個沒有報錯，沒有假象，沒有錯誤檢查，沒有忽略我的忽略配置的配置！

    new StylelintPlugin({
      configFile: path.resolve(__dirname,'./.stylelintrc.js'),extensions: ['less'],files: 'src/**/*.less',fix: true,customSyntax: 'postcss-less',lintDirtyModulesOnly: true,threads: true,exclude: ['node_modules','src/styles/antd-overrides.less'],})

7. commit檢測

這個就比較簡單了，如果專案之前配置過eslint時的commit檢測，這裡只需要在指令碼中加入檢測樣式就可以。配置如下

  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --ext js,ts,tsx --fix","git add"
    ],"*.less": [
      "stylelint --fix  --custom-syntax postcss-less","git add"
    ]
  }

這裡其實是不需要跑yarn lint:css的，因為如果這樣在commit時會全量檢測所有src下的樣式，然而其實我們只需要檢測修改的檔案即可。

特別注意：一定要加上--custom-syntax postcss-less。

以上就是引入stylelint實戰遇到問題經驗總結分享的詳細內容，更多關於引入stylelint實戰問題分享的資料請關注我們其它相關文章！