引入代碼檢查工具stylelint實(shí)戰(zhàn)問題經(jīng)驗(yàn)總結(jié)分享

更新時(shí)間：2021年11月25日 16:49:28 作者：廈門在乎科技

eslint的配置引入比較簡(jiǎn)單，網(wǎng)上有比較多的教程，而stylelint的教程大多語焉不詳。在這里，我會(huì)介紹一下我在引入stylelint所遇到的坑，以及解決方法

前言

團(tuán)隊(duì)合作時(shí)，當(dāng)每個(gè)人的代碼都擁有自定義的格式化方式時(shí)，在提交merge的時(shí)候往往要解決很多沖突，此時(shí)我們可以使用eslint+stylelint來對(duì)團(tuán)隊(duì)的代碼進(jìn)行約束。

正文

stylelint是一個(gè)強(qiáng)大的，現(xiàn)代的代碼檢查工具，可以幫助你在團(tuán)隊(duì)合作中強(qiáng)制執(zhí)行樣式約定。

1. 安裝stylelint

yarn add -D stylelint

2. 配置文件

使用 stylelint檢測(cè)器需要一個(gè)配置對(duì)象，你可以使用三種方式來創(chuàng)建這個(gè)對(duì)象。

package.json?中的stylelint 屬性。

.stylelintrc.js文件

stylelint.config.js?文件輸出的js對(duì)象

一旦發(fā)現(xiàn)它們中的任何一個(gè)，將不再繼續(xù)進(jìn)行查找，進(jìn)行解析，將使用解析后的對(duì)象。本次使用的是.stylelintrc.js?文件來進(jìn)行配置。

3. 使用stylelint

安裝官方文檔的說法你可以按照以下方法運(yùn)行stylelint檢測(cè)樣式代碼。

--fix?用來自動(dòng)修復(fù)，但不能修復(fù)所有的問題。

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

踩坑點(diǎn)1：

由于我的項(xiàng)目里使用的樣式語言是less。所以檢測(cè)css是肯定不對(duì)的，所以這里我們需要做一點(diǎn)改動(dòng)

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

于是我們可以運(yùn)行這串代碼了

yarn lint:css postcss-less

大家可以看到，這里報(bào)了一些提醒，簡(jiǎn)單翻譯為讓我們用對(duì)應(yīng)的語法去解析我們的樣式。而這對(duì)應(yīng)的語法解析器是需要我們?nèi)グ惭b的。

yarn add -D? ?postcss-less

于是再次對(duì)腳本進(jìn)行修改。

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

OK 到這里我們就可以正常的去跑lint命令對(duì)我們的樣式代碼進(jìn)行格式化了。接下來我們來配置lint規(guī)則

4. 配置規(guī)則

我們首先需要安裝三個(gè)npm包幫助我們完善規(guī)則

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

stylelint-config-standard?是stylelint的推薦配置，stylelint-order是用來在格式化css文件時(shí)對(duì)代碼的屬性進(jìn)行排序。

?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": [ // 命名規(guī)范 -
            "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
            {
                "message": "Expected class selector to be kebab-case"
            }
        ],
        "string-quotes":"single", // 單引號(hào)
        "at-rule-empty-line-before": null,
        "at-rule-no-unknown":null,
        "at-rule-name-case": "lower",// 指定@規(guī)則名的大小寫
        "length-zero-no-unit": true,  // 禁止零長度的單位（可自動(dòng)修復(fù)）
        "shorthand-property-no-redundant-values": true, // 簡(jiǎn)寫屬性
        "number-leading-zero": "never", // 小數(shù)不帶0
        "declaration-block-no-duplicate-properties": true, // 禁止聲明快重復(fù)屬性
        "no-descending-specificity": true, // 禁止在具有較高優(yōu)先級(jí)的選擇器后出現(xiàn)被其覆蓋的較低優(yōu)先級(jí)的選擇器。
        "selector-max-id": 0, // 限制一個(gè)選擇器中 ID 選擇器的數(shù)量
        "max-nesting-depth": 3,
        "indentation": [2, {  // 指定縮進(jìn)  warning 提醒
            "severity": "warning"
        }],
        "order/properties-order": [ // 規(guī)則順序
            "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?屬性由于此次并沒有使用，所以不做介紹，有興趣的同學(xué)可以查詢官方文檔。

plugins?是由社區(qū)創(chuàng)建的規(guī)則或規(guī)則集，支持方法論、工具集，非標(biāo)準(zhǔn)?的 CSS 特性，或非常特定的用例。

extends?繼承一個(gè)已存在的配置文件。（在我的配置中，繼承了css-module和官方推薦的配置）

rules?規(guī)則決定檢測(cè)器要查找什么和要解決什么，所以，通過該選項(xiàng)你就可以開啟相應(yīng)規(guī)則，進(jìn)行相應(yīng)的檢測(cè)。所有規(guī)則必須顯式的進(jìn)行配置，因?yàn)?沒有默認(rèn)值。

注意：?null為禁用規(guī)則。可以在rules里面重寫覆蓋官方推薦的配置規(guī)則。

5. 忽略lint文件

此時(shí)我們已經(jīng)可以正常的使用stylelint來格式化樣式代碼了。但是在項(xiàng)目中往往會(huì)存在一些不需要格式化的代碼，比如我們會(huì)單獨(dú)抽離一個(gè)overrides文件來重寫antd的樣式。顯然這里是不需要格式化的，因?yàn)閍ntd的選擇器命名可能跟我們的規(guī)范不盡相同。所以我們需要在運(yùn)行l(wèi)int時(shí)忽略這個(gè)文件。

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

創(chuàng)建.stylelintignore文件。

我們可以通過?/* stylelint-disable */的方法，來對(duì)代碼快進(jìn)行忽略lint檢測(cè)。

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

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

6. 自動(dòng)格式化

在進(jìn)行完上文的配置之后，其實(shí)我們已經(jīng)達(dá)到了規(guī)范的目的，但是如果每次都要跑一次lint無疑就會(huì)加重我們的編碼負(fù)擔(dān)。這里介紹兩種方式在我們寫樣式代碼時(shí)，對(duì)代碼自動(dòng)格式化的方法。

stylelint vs-code 插件

webpack plugin

為什么一個(gè)webpack插件可以幫助我們格式化樣式代碼呢，這是因?yàn)槲覀冊(cè)跓岣轮匦戮幾g的時(shí)候，這個(gè)插件會(huì)幫我們檢測(cè)代碼。并根據(jù).stylelintrc.js文件中配置的規(guī)則進(jìn)行fix。如果有l(wèi)int錯(cuò)誤可以選擇讓項(xiàng)目無法運(yùn)行，避免將沒有l(wèi)int的樣式上傳到代碼庫。

于是我在使用這個(gè)插件的時(shí)候踩了好多坑，接下來我一一的說。

?插件踩坑集錦

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

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

結(jié)局不出意料，沒有用。最恐怖的是他會(huì)給你一種假象，你本地運(yùn)行的時(shí)候沒有任務(wù)問題，讓你誤以為你的代碼沒有任何問題！其實(shí)，是這個(gè)插件沒有作用到。

另外這么配置如果使用stylelint的vscode擴(kuò)展時(shí)，還會(huì)有一大堆的讓你心態(tài)爆炸的紅波浪~~~~。

經(jīng)過我的踩坑，終于完成了一個(gè)沒有報(bào)錯(cuò)，沒有假象，沒有錯(cuò)誤檢查，沒有忽略我的忽略配置的配置！

    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檢測(cè)

這個(gè)就比較簡(jiǎn)單了，如果項(xiàng)目之前配置過eslint時(shí)的commit檢測(cè)，這里只需要在腳本中加入檢測(cè)樣式就可以。配置如下

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

這里其實(shí)是不需要跑yarn lint:css的，因?yàn)槿绻@樣在commit時(shí)會(huì)全量檢測(cè)所有src下的樣式，然而其實(shí)我們只需要檢測(cè)修改的文件即可。

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

以上就是引入stylelint實(shí)戰(zhàn)遇到問題經(jīng)驗(yàn)總結(jié)分享的詳細(xì)內(nèi)容，更多關(guān)于引入stylelint實(shí)戰(zhàn)問題分享的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: