這篇文章將為大家詳細講解有關怎樣引入代碼檢查工具stylelint，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
團隊合作時，當每個人的代碼都擁有自定義的格式化方式時，在提交merge的時候往往要解決很多沖突，此時我們可以使用eslint+stylelint來對團隊的代碼進行約束。
stylelint是一個強大的，現代的代碼檢查工具，可以幫助你在團隊合作中強制執行樣式約定。
yarn add -D stylelint
使用 stylelint檢測器需要一個配置對象，你可以使用三種方式來創建這個對象。
package.json 中的stylelint 屬性。
.stylelintrc.js文件
stylelint.config.js 文件輸出的js對象
一旦發現它們中的任何一個，將不再繼續進行查找，進行解析，將使用解析后的對象。 本次使用的是.stylelintrc.js 文件來進行配置。
安裝官方文檔的說法你可以按照以下方法運行stylelint檢測樣式代碼。
--fix 用來自動修復，但不能修復所有的問題。
// package.json
"scripts":{
"lint:css":"stylelint src/**/*.css --fix"
}由于我的項目里使用的樣式語言是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規則
我們首先需要安裝三個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為禁用規則?？梢栽趓ules里面重寫覆蓋官方推薦的配置規則。
此時我們已經可以正常的使用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
在進行完上文的配置之后，其實我們已經達到了規范的目的，但是如果每次都要跑一次lint無疑就會加重我們的編碼負擔。這里介紹兩種方式在我們寫樣式代碼時，對代碼自動格式化的方法。
為什么一個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'],
})這個就比較簡單了，如果項目之前配置過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就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
