在webpack中使用stylelint(二) stylelint-webpack-plugin

stylelint

前言


上一篇我們已經(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.lintoptions藏否。

Options


options是一個對象,codefiles這兩個屬性至少有一個不能都有充包,其他屬性都是可選的副签。

code

一段待處理的CSS字符串。

codeFilename

在直接使用code屬性來傳遞css代碼的情況下基矮,你可以使用codeFilename來指定與這段css代碼對應(yīng)的文件淆储。

舉一個使用場景的例子:當(dāng)stylelint作為編輯器的插件來使用的時候,css代碼被直接傳遞給stylelint家浇,此時如果想要通過ignoreFiles參數(shù)來使某個文件不被檢查時就需要用到這個參數(shù)遏考。

config

stylelint配置對象。

configconfigFile都沒有時蓝谨,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_moduelsbower_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_modulesbower_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()返回一個promiseresolve一個對象赁温。當(dāng)文件內(nèi)部出現(xiàn)語法錯誤時坛怪,stylelint不會rejectpromise,它會在返回的結(jié)果中包含該語法錯誤股囊。

errored

如果該屬性為true袜匿,那么檢查結(jié)果里面包含至少一條error級別的錯誤。

output

檢查結(jié)果字符串稚疹。

postcssResults

一個數(shù)組居灯,包含在執(zhí)行的過程中積累的PostCSS LazyResult

results

包含styelint檢查結(jié)果的數(shù)組内狗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末怪嫌,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子柳沙,更是在濱河造成了極大的恐慌岩灭,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赂鲤,死亡現(xiàn)場離奇詭異噪径,居然都是意外死亡柱恤,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門找爱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來梗顺,“玉大人,你說我怎么就攤上這事车摄∷掳” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵练般,是天一觀的道長矗漾。 經(jīng)常有香客問我,道長薄料,這世上最難降的妖魔是什么敞贡? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮摄职,結(jié)果婚禮上誊役,老公的妹妹穿的比我還像新娘。我一直安慰自己谷市,他們只是感情好蛔垢,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著迫悠,像睡著了一般鹏漆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上创泄,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天艺玲,我揣著相機與錄音,去河邊找鬼鞠抑。 笑死饭聚,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的搁拙。 我是一名探鬼主播秒梳,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼箕速!你這毒婦竟也來了酪碘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤盐茎,失蹤者是張志新(化名)和其女友劉穎婆跑,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體庭呜,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡滑进,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年犀忱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扶关。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡阴汇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出节槐,到底是詐尸還是另有隱情搀庶,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布铜异,位于F島的核電站哥倔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏揍庄。R本人自食惡果不足惜咆蒿,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蚂子。 院中可真熱鬧沃测,春花似錦、人聲如沸食茎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽别渔。三九已至附迷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間哎媚,已是汗流浹背喇伯。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抄伍,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓管宵,卻偏偏與公主長得像截珍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子箩朴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容