您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)怎樣引入代碼檢查工具stylelint,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
團隊合作時,當每個人的代碼都擁有自定義的格式化方式時,在提交merge的時候往往要解決很多沖突,此時我們可以使用eslint
+stylelint
來對團隊的代碼進行約束。
stylelint是一個強大的,現(xiàn)代的代碼檢查工具,可以幫助你在團隊合作中強制執(zhí)行樣式約定。
yarn add -D stylelint
使用 stylelint檢測器需要一個配置對象,你可以使用三種方式來創(chuàng)建這個對象。
package.json
中的stylelint 屬性。
.stylelintrc.js
文件
stylelint.config.js
文件輸出的js對象
一旦發(fā)現(xiàn)它們中的任何一個,將不再繼續(xù)進行查找,進行解析,將使用解析后的對象。 本次使用的是.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
大家可以看到,這里報了一些提醒,簡單翻譯為讓我們用對應的語法去解析我們的樣式。而這對應的語法解析器是需要我們?nèi)グ惭b的。
yarn add -D postcss-less
于是再次對腳本進行修改。
// package.json "scripts":{ "lint:css":"stylelint src/**/*.less --fix --custom-syntax postcss-less" }
OK 到這里我們就可以正常的去跑lint命令對我們的樣式代碼進行格式化了。接下來我們來配置lint規(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ī)則??梢栽趓ules里面重寫覆蓋官方推薦的配置規(guī)則。
此時我們已經(jīng)可以正常的使用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
在進行完上文的配置之后,其實我們已經(jīng)達到了規(guī)范的目的,但是如果每次都要跑一次lint無疑就會加重我們的編碼負擔。這里介紹兩種方式在我們寫樣式代碼時,對代碼自動格式化的方法。
為什么一個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' })
結(jié)局不出意料,沒有用。最恐怖的是他會給你一種假象,你本地運行的時候沒有任務問題,讓你誤以為你的代碼沒有任何問題!其實,是這個插件沒有作用到。
另外這么配置如果使用stylelint的vscode擴展時,還會有一大堆的讓你心態(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'], })
這個就比較簡單了,如果項目之前配置過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
。
關(guān)于怎樣引入代碼檢查工具stylelint就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。