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