前言
上一篇我們已經(jīng)將stylelint
環(huán)境運行起來了疏橄,在進一步配置之前,我們先來了解一下stylelint-webpack-plugin
這個插件奶浦,本文主要介紹這個插件的參數(shù)和返回值兄墅。大部分內(nèi)容翻譯自stylelint
官網(wǎng)的這篇教程。
stylelint
的使用場景之一就是作為webpack
的插件之一澳叉,這個插件就是stylelint-webpack-plugin
隙咸,具體用法如下:
var StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [
new StyleLintPlugin(options),
],
// ...
}
接下來我們會詳細(xì)探討一下options
的取值情況沐悦。
stylelint
的另外一個用法是通過API調(diào)用,像這樣:
stylelint.lint(options)
.then(function(resultObject) { .. });
因為stylelint-webpack-plugin
接收到的參數(shù)是直接傳遞給stylelint.lint
這個方法的五督,所以實際上我們探討的是stylelint.lint
的options
藏否。
Options
options
是一個對象,code
和files
這兩個屬性至少有一個且不能都有充包,其他屬性都是可選的副签。
code
一段待處理的CSS字符串。
codeFilename
在直接使用code
屬性來傳遞css
代碼的情況下基矮,你可以使用codeFilename
來指定與這段css
代碼對應(yīng)的文件淆储。
舉一個使用場景的例子:當(dāng)stylelint
作為編輯器的插件來使用的時候,css
代碼被直接傳遞給stylelint
家浇,此時如果想要通過ignoreFiles
參數(shù)來使某個文件不被檢查時就需要用到這個參數(shù)遏考。
config
stylelint
配置對象。
config
和configFile
都沒有時蓝谨,stylelint
會按照如下順序查找配置對象:
- 在
package.json
中查找stylelint
屬性。 - 找
.stylelintrc
文件青团,文件格式可以是JSON
或者YAML
譬巫。也可以給該文件加后綴,像這樣:.stylelintrc.json
,.stylelintrc.yaml
,.stylelintrc.yml
,
.stylelintrc.js
督笆。 - 找
stylelint.config.js
文件芦昔,該文件exports
一個配置對象。
configBasedir
如果config
對象中存在相對路徑娃肿,通過該參數(shù)指定那些相對路徑的相對目錄是什么咕缎。
configFile
stylelint
配置文件路徑,可以是一個JSON
料扰,JS
或者YAML
凭豪。
可以是一個絕對路徑,也可以是一個相對路徑晒杈,相對于你當(dāng)前進程的運行路徑(process.cwd()
)嫂伞。
官方推薦的是絕對路徑。
configOverrides
部分配置對象拯钻,擁有最高的優(yōu)先級帖努,可以覆蓋其他的配置,包括config
屬性指定的粪般,.stylelintrc
指定的等等拼余。
在你沒有指定config
的情況下,stylelint
會去找.stylelintrc
文件亩歹,此時匙监,如果你想要覆蓋該文件的部分屬性時凡橱,就可以使用該屬性了。
files
文件查找規(guī)則字符串舅柜,或者包含一組文件查找規(guī)則字符串的數(shù)組梭纹,該參數(shù)會被直接傳遞給node-glob來查找需要檢查的文件。
相對路徑致份,默認(rèn)情況下是相對于process.cwd()
变抽。
默認(rèn)情況下node_moduels
和bower_components
會被忽略。
formatter
可取值有:"json"
氮块,"string"
绍载,"verbose"
或者一個函數(shù),默認(rèn)值是"json"
滔蝉。
指定stylelint
運行結(jié)果的輸出格式击儡。
運行結(jié)果格式如下:
// A stylelint result object
{
source: "path/to/file.css", // The filepath or PostCSS identifier like <input css 1>
errored: true, // This is `true` if at least one rule with an "error"-level severity triggered a warning
warnings: [ // Array of rule violation warning objects, each like the following ...
{
line: 3,
column: 12,
rule: "block-no-empty",
severity: "error",
text: "You should not have an empty block (block-no-empty)"
},
..
],
deprecations: [ // Array of deprecation warning objects, each like the following ...
{
text: "Feature X has been deprecated and will be removed in the next major version.",
reference: "https://stylelint.io/docs/feature-x.md"
}
],
invalidOptionWarnings: [ // Array of invalid option warning objects, each like the following ...
{
text: "Invalid option X for rule Y",
}
],
ignored: false // This is `true` if the file's path matches a provided ignore pattern
}
formatter
為函數(shù)時會接收到一個包含該對象的數(shù)組,函數(shù)需要處理這些對象后輸出一個字符串蝠引。
ignoreDisables
是否忽略禁用標(biāo)識阳谍,比如:/* stylelint-disable block-no-empty */
,默認(rèn)值是false
螃概。
disableDefaultIgnores
默認(rèn)值為false矫夯,此時stylelint
會忽略node_modules
和bower_components
的內(nèi)容。
cache
保存上次stylelint
的檢查結(jié)果吊洼,再次運行時只對改變的文件進行檢查训貌,可以大大提高stylelint
的運行效率。
緩存結(jié)果保存在process.cwd()
目錄下的.stylelintcache
文件中冒窍。文件位置可以通過cacheLocation
指定递沪。
已經(jīng)保存了緩存的情況下,將cache
置為false
后再次運行時综液,stylelint
認(rèn)為.stylelintcache
文件已經(jīng)失效款慨,會直接刪除該文件。
cacheLocation
stylelint
緩存文件地址谬莹。
如果該地址指向一個文件夾樱调,stylelint
會在該文件夾下根據(jù)process_cwd()
的hash
值來創(chuàng)建文件,比如cache_hashOfCwd
届良,這樣stylelint
可以在不同的項目中使用一個緩存目錄笆凌。
如果cacheLocation
指定的目錄不存在,一定要在目錄末尾加上/
(windows
上加\
)士葫,否則該目錄會被認(rèn)為是一個文件乞而。
reportNeedlessDisables
該值設(shè)為true
時,ignoreDisables
也會被設(shè)為true
慢显。此時stylelint
的運行結(jié)果將包含一個needlessDisables
屬性爪模,值為一個數(shù)組欠啤,輸出每一個文件中包含的無用禁用stylelint
檢查的注釋。
一般可以通過該屬性來對代碼進行檢查和清理屋灌。
ignorePath
需要忽略的文件目錄規(guī)則洁段,可以是絕對目錄,也可以是相對于process.cwd()
的目錄共郭。一般情況下stylelint
會在process.cwd()
目錄下的.stylelintignore
文件中查找忽略規(guī)則祠丝。
syntax
可取值有:"scss"
,"less"
除嘹,"sugarss"
写半。
用來指定語法規(guī)則纱注,不指定的情況下通過文件后綴自動識別:.less
肴捉,.scss
俯渤,.sss
挽懦。
或者通過customSyntax
自定義語法規(guī)則。
customSyntax
一個絕對路徑剿配,指向一個自定義語法規(guī)則模塊响迂,該模塊需要兼容PostCss
蹋笼,詳情单芜。
fix
設(shè)置為true
時炎功,stylelint
會在源文件中盡可能多的修復(fù)發(fā)現(xiàn)的錯誤,不能修復(fù)的錯誤才會被報告出來缓溅。
返回值
stylelint.lint()
返回一個promise
,resolve
一個對象赁温。當(dāng)文件內(nèi)部出現(xiàn)語法錯誤時坛怪,stylelint
不會reject
該promise
,它會在返回的結(jié)果中包含該語法錯誤股囊。
errored
如果該屬性為true
袜匿,那么檢查結(jié)果里面包含至少一條error
級別的錯誤。
output
檢查結(jié)果字符串稚疹。
postcssResults
一個數(shù)組居灯,包含在執(zhí)行的過程中積累的PostCSS LazyResult。
results
包含styelint
檢查結(jié)果的數(shù)組内狗。