引入代碼檢查工具stylelint實(shí)戰(zhàn)問題經(jīng)驗(yàn)總結(jié)分享
前言
團(tuán)隊(duì)合作時，當(dāng)每個人的代碼都擁有自定義的格式化方式時，在提交merge的時候往往要解決很多沖突，此時我們可以使用eslint+stylelint來對團(tuán)隊(duì)的代碼進(jìn)行約束。
正文
stylelint是一個強(qiáng)大的，現(xiàn)代的代碼檢查工具，可以幫助你在團(tuán)隊(duì)合作中強(qiáng)制執(zhí)行樣式約定。
1. 安裝stylelint
yarn add -D stylelint
2. 配置文件
使用 stylelint檢測器需要一個配置對象，你可以使用三種方式來創(chuàng)建這個對象。
package.json?中的stylelint 屬性。
.stylelintrc.js文件
stylelint.config.js?文件輸出的js對象
一旦發(fā)現(xiàn)它們中的任何一個，將不再繼續(xù)進(jìn)行查找，進(jìn)行解析，將使用解析后的對象。 本次使用的是.stylelintrc.js?文件來進(jìn)行配置。
3. 使用stylelint
安裝官方文檔的說法你可以按照以下方法運(yùn)行stylelint檢測樣式代碼。
--fix?用來自動修復(fù)，但不能修復(fù)所有的問題。
// package.json
"scripts":{
"lint:css":"stylelint src/**/*.css --fix"
}
踩坑點(diǎn)1：
由于我的項(xiàng)目里使用的樣式語言是less。所以檢測css是肯定不對的，所以這里我們需要做一點(diǎn)改動
// package.json
"scripts":{
"lint:css":"stylelint src/**/*.less --fix"
}
于是我們可以運(yùn)行這串代碼了
yarn lint:css postcss-less
大家可以看到，這里報了一些提醒，簡單翻譯為讓我們用對應(yīng)的語法去解析我們的樣式。而這對應(yīng)的語法解析器是需要我們?nèi)グ惭b的。
yarn add -D? ?postcss-less
于是再次對腳本進(jìn)行修改。
// package.json
"scripts":{
"lint:css":"stylelint src/**/*.less --fix --custom-syntax postcss-less"
}
OK 到這里我們就可以正常的去跑lint命令對我們的樣式代碼進(jìn)行格式化了。接下來我們來配置lint規(guī)則
4. 配置規(guī)則
我們首先需要安裝三個npm包幫助我們完善規(guī)則
yarn add -D stylelint-config-standard stylelint-order stylelint-config-css-modules
stylelint-config-standard?是stylelint的推薦配置，stylelint-order是用來在格式化css文件時對代碼的屬性進(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", // 單引號
"at-rule-empty-line-before": null,
"at-rule-no-unknown":null,
"at-rule-name-case": "lower",// 指定@規(guī)則名的大小寫
"length-zero-no-unit": true, // 禁止零長度的單位（可自動修復(fù)）
"shorthand-property-no-redundant-values": true, // 簡寫屬性
"number-leading-zero": "never", // 小數(shù)不帶0
"declaration-block-no-duplicate-properties": true, // 禁止聲明快重復(fù)屬性
"no-descending-specificity": true, // 禁止在具有較高優(yōu)先級的選擇器后出現(xiàn)被其覆蓋的較低優(yōu)先級的選擇器。
"selector-max-id": 0, // 限制一個選擇器中 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?繼承一個已存在的配置文件。（在我的配置中，繼承了css-module和官方推薦的配置）
rules?規(guī)則決定檢測器要查找什么和要解決什么，所以，通過該選項(xiàng)你就可以開啟相應(yīng)規(guī)則，進(jìn)行相應(yīng)的檢測。所有規(guī)則必須顯式的進(jìn)行配置，因?yàn)?沒有默認(rèn)值。
注意：?null為禁用規(guī)則?？梢栽趓ules里面重寫覆蓋官方推薦的配置規(guī)則。
5. 忽略lint文件
此時我們已經(jīng)可以正常的使用stylelint來格式化樣式代碼了。但是在項(xiàng)目中往往會存在一些不需要格式化的代碼，比如我們會單獨(dú)抽離一個overrides文件來重寫antd的樣式。顯然這里是不需要格式化的，因?yàn)閍ntd的選擇器命名可能跟我們的規(guī)范不盡相同。所以我們需要在運(yùn)行l(wèi)int時忽略這個文件。
我們可以在.stylelintrc.js中配置ignoreFiles。
創(chuàng)建.stylelintignore文件。
我們可以通過?/* stylelint-disable */的方法，來對代碼快進(jìn)行忽略lint檢測。
我采用的是第二種方法，配置如下：
// .stylelintignore *.js *.tsx *.ts *.json *.png *.eot *.ttf *.woff *.css src/styles/antd-overrides.less
6. 自動格式化
在進(jìn)行完上文的配置之后，其實(shí)我們已經(jīng)達(dá)到了規(guī)范的目的，但是如果每次都要跑一次lint無疑就會加重我們的編碼負(fù)擔(dān)。這里介紹兩種方式在我們寫樣式代碼時，對代碼自動格式化的方法。
stylelint vs-code 插件
webpack plugin
為什么一個webpack插件可以幫助我們格式化樣式代碼呢，這是因?yàn)槲覀冊跓岣轮匦戮幾g的時候，這個插件會幫我們檢測代碼。并根據(jù).stylelintrc.js文件中配置的規(guī)則進(jìn)行fix。 如果有l(wèi)int錯誤可以選擇讓項(xiàng)目無法運(yùn)行，避免將沒有l(wèi)int的樣式上傳到代碼庫。
于是我在使用這個插件的時候踩了好多坑，接下來我一一的說。
?插件踩坑集錦
最開始時。按百度到的各路大神的寫法，只需要這么配置就可以：
new StyleLintPlugin({
context: "src",
configFile: path.resolve(__dirname, './stylelintrc.js'),
files: '**/*.less',
failOnError: false,
quiet: true,
syntax: 'less'
})
結(jié)局不出意料，沒有用。最恐怖的是他會給你一種假象，你本地運(yùn)行的時候沒有任務(wù)問題，讓你誤以為你的代碼沒有任何問題！其實(shí)，是這個插件沒有作用到。
另外這么配置如果使用stylelint的vscode擴(kuò)展時，還會有一大堆的讓你心態(tài)爆炸的紅波浪~~~~。
經(jīng)過我的踩坑，終于完成了一個沒有報錯，沒有假象，沒有錯誤檢查，沒有忽略我的忽略配置的配置！
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檢測
這個就比較簡單了，如果項(xiàng)目之前配置過eslint時的commit檢測，這里只需要在腳本中加入檢測樣式就可以。配置如下
"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時會全量檢測所有src下的樣式，然而其實(shí)我們只需要檢測修改的文件即可。
特別注意：?一定要加上?--custom-syntax postcss-less。
以上就是引入stylelint實(shí)戰(zhàn)遇到問題經(jīng)驗(yàn)總結(jié)分享的詳細(xì)內(nèi)容，更多關(guān)于引入stylelint實(shí)戰(zhàn)問題分享的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React配置代理方式(proxy),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了react顯示文件上傳進(jìn)度的示例，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React相比于Vue，更注重對JS的掌握，Vue把能做的都做了，只剩下最簡單的讓開發(fā)者使用，開發(fā)者需要記憶Vue的特定指令后就可很輕松地開發(fā)。相反，React是提供了一種思路和方式，沒有過多的限制，但要求會相對高些，需要開發(fā)者對JS達(dá)到精通的地步才能真正運(yùn)用好React。2021-05-05
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在React中,組件通信是一個重要的概念,它允許不同組件之間進(jìn)行數(shù)據(jù)傳遞和交互，本文主要介紹了React組件通信的實(shí)現(xiàn)示例，感興趣的可以了解一下2023-11-11
這篇文章主要介紹了react裝飾器與高階組件及簡單樣式修改的操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
最近在使用react開發(fā)項(xiàng)目，遇到這樣一個需求實(shí)現(xiàn)一個帶有動效的 React 彈窗組件，如果不考慮動效，很容易實(shí)現(xiàn)，接下來小編通過本文給大家介紹React實(shí)現(xiàn)動效彈窗組件的實(shí)現(xiàn)代碼，一起看看吧2021-06-06
React Native使用百度Echarts顯示圖表的示例代碼
本篇文章主要介紹了React Native使用百度Echarts顯示圖表的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
react組件中的constructor和super知識點(diǎn)整理
這篇文章主要介紹了react組件中的constructor和super知識點(diǎn)整理,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04