則詳解：selector-pseudo-element-no-unknown —— 禁止未知偽元素選擇器)
代碼質(zhì)量靜態(tài)分析前端【免費(fèi)下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項(xiàng)目地址https://gitcode.com/gh_mirrors/st/stylelint點(diǎn)擊查看免費(fèi)下載selector-pseudo-element-no-unknown是 stylelint 內(nèi)置的核心規(guī)則之一用于在樣式表中攔截所有未被 CSS 規(guī)范收錄的偽元素選擇器如a::pseudo {}同時(shí)自動(dòng)放行廠商前綴偽元素如::-moz-placeholder。本文將基于該規(guī)則在 stylelint 倉(cāng)庫(kù)中的官方文檔 README.md 展開(kāi)結(jié)合其 規(guī)則實(shí)現(xiàn)、已知偽元素清單 與 單元測(cè)試 三個(gè)層面的源碼證據(jù)講透它“已知/未知”的判定標(biāo)準(zhǔn)、兩種配置選項(xiàng)的完整寫(xiě)法以及底層判定流程。讀完你可以直接在自己的 stylelint 配置中落地該規(guī)則并能按需用ignorePseudoElements擴(kuò)展自定義偽元素白名單。規(guī)則概覽它檢查什么、又放過(guò)什么先看官方文檔給出的規(guī)則示意圖a::before {} /** ↑ * This pseudo-element selector */規(guī)則的核心語(yǔ)義包含三條關(guān)鍵約定已知范圍 CSS 規(guī)范全集凡是在 CSS 規(guī)范CSS Specifications中定義過(guò)的偽元素包括最新到 Editors Draft編輯器草案階段的內(nèi)容都被視為“已知”不會(huì)報(bào)錯(cuò)。廠商前綴一律忽略帶-webkit-、-moz-、-ms-等廠商前綴的偽元素選擇器不會(huì)被該規(guī)則檢查原因見(jiàn)下文源碼分析因此input::-moz-placeholder這類寫(xiě)法天然通過(guò)。只針對(duì)偽元素不針對(duì)偽類偽類:hover、:focus等單冒號(hào)由selector-pseudo-class-no-unknown等規(guī)則負(fù)責(zé)本規(guī)則只關(guān)心雙冒號(hào)::開(kāi)頭的偽元素詳見(jiàn)實(shí)現(xiàn)中value.slice(0, 2) ! ::的判斷。此外該規(guī)則支持1 個(gè) message 參數(shù)見(jiàn) 配置文檔 message 說(shuō)明即被判定為未知的那個(gè)偽元素本身可用于自定義報(bào)錯(cuò)文案。啟用方式與主選項(xiàng)true在 stylelint 配置中開(kāi)啟該規(guī)則只需將主選項(xiàng)設(shè)為true{ selector-pseudo-element-no-unknown: true }視為問(wèn)題的寫(xiě)法會(huì)被報(bào)錯(cuò)以下三種寫(xiě)法都會(huì)觸發(fā)Unknown pseudo-element selector警告a::pseudo {}a::PSEUDO {}a::element {}注意第二個(gè)例子大小寫(xiě)不敏感地判定“未知”。::PSEUDO與::pseudo同樣會(huì)被拒絕因?yàn)樵创a最終用name.toLowerCase()去查已知表而pseudo本身不在已知清單里無(wú)論怎么寫(xiě)大小寫(xiě)都通不過(guò)。不會(huì)被視為問(wèn)題的寫(xiě)法a:before {}a::before {}::selection {}input::-moz-placeholder {}這里的判定要點(diǎn)a:before是單冒號(hào)的舊式偽元素寫(xiě)法CSS 1/2 時(shí)代合法因?yàn)椴粷M足“雙冒號(hào)”前提直接被放行a::before、::selection都在已知偽元素清單內(nèi)input::-moz-placeholder帶-moz-前綴命中“忽略廠商前綴”約定?？蛇x次選項(xiàng)ignorePseudoElements自定義白名單當(dāng)項(xiàng)目里使用規(guī)范之外的自定義偽元素例如 Web Components 場(chǎng)景時(shí)可用次選項(xiàng)把特定名字加入白名單{ ignorePseudoElements: [array, of, pseudo-elements, /regex/] }數(shù)組元素既可以是普通字符串精確匹配也可以是以/包裹的正則表達(dá)式字符串正則匹配。完整示例{ selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [/^--my-/, --pseudo-element] } ] }配置后以下寫(xiě)法都不再報(bào)錯(cuò)a::--my-pseudo {}a::--my-other-pseudo {}a::--pseudo-element {}測(cè)試用例tests/index.mjs中對(duì)[pseudo, /^my-/, /foo/i]的驗(yàn)證進(jìn)一步揭示了匹配細(xì)節(jié)a::pseudo字符串精確匹配? 放行a::my-pseudo正則/^my-/前綴匹配? 放行a::FOO-pseudo正則/foo/i大小寫(xiě)不敏感? 放行a::pSeUdO、a::PSEUDO、a::MY-other-pseudo、a::not-my-pseudo? 仍被拒絕——其中::MY-other-pseudo之所以被拒是因?yàn)槠ヅ浒l(fā)生在去掉::前綴之后的名字MY-other-pseudo上而正則/^my-/區(qū)分大小寫(xiě)首字母大寫(xiě) M 無(wú)法匹配小寫(xiě)my-。若要放行需寫(xiě)成/^my-/i或在正則里同時(shí)覆蓋大寫(xiě)形式。深入源碼一條未知偽元素的完整判定流程規(guī)則實(shí)現(xiàn)位于 index.mjs整個(gè)判定可拆成六個(gè)步驟選項(xiàng)校驗(yàn)validateOptions校驗(yàn)主選項(xiàng)與次選項(xiàng)ignorePseudoElements只接受字符串或正則[isString, isRegExp]且次選項(xiàng)可缺省optional: true。校驗(yàn)邏輯見(jiàn) validateOptions.mjs配置不合法時(shí)會(huì)以invalidOption類型告警?？焖龠^(guò)濾root.walkRules(mayIncludeRegexes.pseudo, ...)只遍歷含冒號(hào)的規(guī)則mayIncludeRegexes.pseudo /:/見(jiàn) regexes.mjs是一個(gè)性能優(yōu)化——不含冒號(hào)的規(guī)則直接跳過(guò)無(wú)需進(jìn)入后續(xù)解析。標(biāo)準(zhǔn)語(yǔ)法過(guò)濾isStandardSyntaxRule和isStandardSyntaxSelector兩層把關(guān)把 SCSS/Less 插值如::#{$variable}、占位符選擇器、Less mixin 等非標(biāo)準(zhǔn)語(yǔ)法排除在外判定細(xì)節(jié)見(jiàn) isStandardSyntaxSelector.mjs。偽類分流parseSelector(...).walkPseudos(...)遍歷所有偽選擇器后先檢查value.slice(0, 2) ! ::——單冒號(hào)的偽類直接 return 放行只有雙冒號(hào)的偽元素進(jìn)入下一步。白名單與廠商前綴先看optionsMatches(secondaryOptions, ignorePseudoElements, pseudoNode.value.slice(2))是否命中白名單實(shí)現(xiàn)見(jiàn) optionsMatches.mjs再看vendor.prefix(name)是否提取到廠商前綴或pseudoElements.has(name.toLowerCase())是否命中已知表三者任一成立即放行。報(bào)告問(wèn)題都不滿足時(shí)調(diào)用report()用pseudoNode.sourceIndex與index value.length計(jì)算告警區(qū)間消息為Unknown pseudo-element selector ${selector}并統(tǒng)一追加規(guī)則名后綴(selector-pseudo-element-no-unknown)見(jiàn) ruleMessages.mjs。廠商前綴“一律忽略”的實(shí)現(xiàn)原理為什么文檔說(shuō)“This rule ignores vendor-prefixed pseudo-element selectors”關(guān)鍵在于 vendor.mjs 中的prefix()prefix(prop) { const match prop.match(/^(-\w-)/); return match ? (match[0] || ) : ; }只要偽元素名以-xxx-開(kāi)頭例如-moz-placeholder、-webkit-scrollbar就會(huì)提取出前綴并直接放行。注意這意味著即使是完全不存在的廠商前綴寫(xiě)法如input::-moz-test也不會(huì)報(bào)錯(cuò)——這一點(diǎn)在測(cè)試用例中專門(mén)有input::-moz-test { }被接受的確證。已知偽元素清單從規(guī)范到代碼判定“已知”的最終依據(jù)是 selectors.mjs 中導(dǎo)出的pseudoElements集合它由uniteSets合并以下幾組構(gòu)成分組成員說(shuō)明levelOneAndTwoPseudoElementsbefore、after、first-line、first-letterCSS 1/2 時(shí)代的四個(gè)經(jīng)典偽元素允許單冒號(hào)舊寫(xiě)法shadowTreePseudoElementspartShadow DOM 偽元素配合::part(...)使用deprecatedPseudoElementscontent、shadow已被廢棄但仍被規(guī)范記錄的偽元素vendorSpecificPseudoElements-moz-focus-inner、-ms-clear、-webkit-scrollbar系列等數(shù)十個(gè)各瀏覽器私有偽元素雖然這些會(huì)被vendor.prefix提前放行仍保留在集合中其余現(xiàn)代偽元素backdrop、cue、file-selector-button、grammar-error、highlight、marker、placeholder、selection、slotted、spelling-error、target-text、view-transition系列、scroll-marker系列等含編輯草案階段的較新提案因此::selection、::marker、::placeholder、::spelling-error、::grammar-error、::search-text、::view-transition以及::scroll-marker、::picker(select)、::part(shadow-part)等都能通過(guò)測(cè)試用例中均有對(duì)應(yīng)斷言。邊界行為與測(cè)試佐證tests/index.mjs 覆蓋了不少容易被忽略的邊界場(chǎng)景大小寫(xiě)容忍a:Before、a::bEfOrE、a::BEFORE等任意大小寫(xiě)組合都被接受查表前統(tǒng)一toLowerCase()復(fù)雜選擇器a:hover::before、選擇器列表a,\nb .foo::before正常處理未知偽元素按行定位a:hover::element的告警定位在column: 8b .foo::error定位在line: 2, column: 9非標(biāo)準(zhǔn)語(yǔ)法跳過(guò)使用postcss-scss自定義語(yǔ)法時(shí)::#{$variable}、a::#{$variable}等 SCSS 插值寫(xiě)法不被檢查行內(nèi)禁用生效/* stylelint-disable-next-line selector-pseudo-element-no-unknown */注釋可精確抑制下一行的::pseudo報(bào)錯(cuò)一處規(guī)則多報(bào)同一選擇器列表中出現(xiàn)多個(gè)未知偽元素時(shí)逐一出報(bào)例如 5 行代碼中 3 處a::pseudo產(chǎn)生 3 條 warning行號(hào)列號(hào)一一對(duì)應(yīng)。實(shí)際配置示例把以上內(nèi)容落地到一個(gè).stylelintrc.json{ rules: { selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [ --my-custom-element, /^x-/i ] } ] } }此配置下::before、::selection、::-webkit-scrollbar正常通過(guò)::pseudo、::element、::PSEUDO報(bào)錯(cuò)::--my-custom-element與::x-foo、::X-BAR正則i標(biāo)志被白名單放行。小結(jié)selector-pseudo-element-no-unknown的設(shè)計(jì)思路清晰以 CSS 規(guī)范含編輯草案為“已知”基線用vendor.prefix兜底廠商前綴用ignorePseudoElements為用戶自定義偽元素留出擴(kuò)展口。理解它的判定鏈路雙冒號(hào)前提 → 標(biāo)準(zhǔn)語(yǔ)法過(guò)濾 → 白名單/前綴/已知表三層命中你就能準(zhǔn)確預(yù)判任意偽元素寫(xiě)法的檢查結(jié)果并在團(tuán)隊(duì)規(guī)范中放心啟用它來(lái)攔截拼寫(xiě)錯(cuò)誤與不存在的偽元素。若需要檢查單冒號(hào)偽類可配合selector-pseudo-class-no-unknown一起使用兩者覆蓋完整的偽選擇器檢查面。贊分享代碼質(zhì)量靜態(tài)分析前端【免費(fèi)下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項(xiàng)目地址https://gitcode.com/gh_mirrors/st/stylelint點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析 導(dǎo)讀 cilium operator alibabaclou代碼質(zhì)量靜態(tài)分析前端eslint-plugin-unicorn 規(guī)則詳解no-unknown-pseudo-selectors 校驗(yàn)未知 CSS 偽類與偽元素eslint plugin unicorn 規(guī)則詳解no unknown pseudo selectors 校驗(yàn)未知 CSS 偽類與偽元素 導(dǎo)讀 no unkLint代碼質(zhì)量cross-en-it-roberta-sentence-transformer常見(jiàn)問(wèn)題解答10個(gè)開(kāi)發(fā)者必知的技術(shù)要點(diǎn)cross en it roberta sentence transformer常見(jiàn)問(wèn)題解答10個(gè)開(kāi)發(fā)者必知的技術(shù)要點(diǎn) cross en it roberta代碼質(zhì)量靜態(tài)分析前端上一篇React Native FBSDK Next用戶資料獲取終極指南如何安全訪問(wèn)用戶信息下一篇7步搞定深度學(xué)習(xí)數(shù)據(jù)預(yù)處理Pandas特征工程實(shí)戰(zhàn)指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 stylelint 規(guī)則詳解：selector-pseudo-element-no-unknown —— 禁止未知偽元素選擇器
代碼質(zhì)量靜態(tài)分析前端【免費(fèi)下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項(xiàng)目地址https://gitcode.com/gh_mirrors/st/stylelint點(diǎn)擊查看免費(fèi)下載selector-pseudo-element-no-unknown是 stylelint 內(nèi)置的核心規(guī)則之一用于在樣式表中攔截所有未被 CSS 規(guī)范收錄的偽元素選擇器如a::pseudo {}同時(shí)自動(dòng)放行廠商前綴偽元素如::-moz-placeholder。本文將基于該規(guī)則在 stylelint 倉(cāng)庫(kù)中的官方文檔 README.md 展開(kāi)結(jié)合其 規(guī)則實(shí)現(xiàn)、已知偽元素清單 與 單元測(cè)試 三個(gè)層面的源碼證據(jù)講透它“已知/未知”的判定標(biāo)準(zhǔn)、兩種配置選項(xiàng)的完整寫(xiě)法以及底層判定流程。讀完你可以直接在自己的 stylelint 配置中落地該規(guī)則并能按需用ignorePseudoElements擴(kuò)展自定義偽元素白名單。規(guī)則概覽它檢查什么、又放過(guò)什么先看官方文檔給出的規(guī)則示意圖a::before {} /** ↑ * This pseudo-element selector */規(guī)則的核心語(yǔ)義包含三條關(guān)鍵約定已知范圍 CSS 規(guī)范全集凡是在 CSS 規(guī)范CSS Specifications中定義過(guò)的偽元素包括最新到 Editors Draft編輯器草案階段的內(nèi)容都被視為“已知”不會(huì)報(bào)錯(cuò)。廠商前綴一律忽略帶-webkit-、-moz-、-ms-等廠商前綴的偽元素選擇器不會(huì)被該規(guī)則檢查原因見(jiàn)下文源碼分析因此input::-moz-placeholder這類寫(xiě)法天然通過(guò)。只針對(duì)偽元素不針對(duì)偽類偽類:hover、:focus等單冒號(hào)由selector-pseudo-class-no-unknown等規(guī)則負(fù)責(zé)本規(guī)則只關(guān)心雙冒號(hào)::開(kāi)頭的偽元素詳見(jiàn)實(shí)現(xiàn)中value.slice(0, 2) ! ::的判斷。此外該規(guī)則支持1 個(gè) message 參數(shù)見(jiàn) 配置文檔 message 說(shuō)明即被判定為未知的那個(gè)偽元素本身可用于自定義報(bào)錯(cuò)文案。啟用方式與主選項(xiàng)true在 stylelint 配置中開(kāi)啟該規(guī)則只需將主選項(xiàng)設(shè)為true{ selector-pseudo-element-no-unknown: true }視為問(wèn)題的寫(xiě)法會(huì)被報(bào)錯(cuò)以下三種寫(xiě)法都會(huì)觸發(fā)Unknown pseudo-element selector警告a::pseudo {}a::PSEUDO {}a::element {}注意第二個(gè)例子大小寫(xiě)不敏感地判定“未知”。::PSEUDO與::pseudo同樣會(huì)被拒絕因?yàn)樵创a最終用name.toLowerCase()去查已知表而pseudo本身不在已知清單里無(wú)論怎么寫(xiě)大小寫(xiě)都通不過(guò)。不會(huì)被視為問(wèn)題的寫(xiě)法a:before {}a::before {}::selection {}input::-moz-placeholder {}這里的判定要點(diǎn)a:before是單冒號(hào)的舊式偽元素寫(xiě)法CSS 1/2 時(shí)代合法因?yàn)椴粷M足“雙冒號(hào)”前提直接被放行a::before、::selection都在已知偽元素清單內(nèi)input::-moz-placeholder帶-moz-前綴命中“忽略廠商前綴”約定?？蛇x次選項(xiàng)ignorePseudoElements自定義白名單當(dāng)項(xiàng)目里使用規(guī)范之外的自定義偽元素例如 Web Components 場(chǎng)景時(shí)可用次選項(xiàng)把特定名字加入白名單{ ignorePseudoElements: [array, of, pseudo-elements, /regex/] }數(shù)組元素既可以是普通字符串精確匹配也可以是以/包裹的正則表達(dá)式字符串正則匹配。完整示例{ selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [/^--my-/, --pseudo-element] } ] }配置后以下寫(xiě)法都不再報(bào)錯(cuò)a::--my-pseudo {}a::--my-other-pseudo {}a::--pseudo-element {}測(cè)試用例tests/index.mjs中對(duì)[pseudo, /^my-/, /foo/i]的驗(yàn)證進(jìn)一步揭示了匹配細(xì)節(jié)a::pseudo字符串精確匹配? 放行a::my-pseudo正則/^my-/前綴匹配? 放行a::FOO-pseudo正則/foo/i大小寫(xiě)不敏感? 放行a::pSeUdO、a::PSEUDO、a::MY-other-pseudo、a::not-my-pseudo? 仍被拒絕——其中::MY-other-pseudo之所以被拒是因?yàn)槠ヅ浒l(fā)生在去掉::前綴之后的名字MY-other-pseudo上而正則/^my-/區(qū)分大小寫(xiě)首字母大寫(xiě) M 無(wú)法匹配小寫(xiě)my-。若要放行需寫(xiě)成/^my-/i或在正則里同時(shí)覆蓋大寫(xiě)形式。深入源碼一條未知偽元素的完整判定流程規(guī)則實(shí)現(xiàn)位于 index.mjs整個(gè)判定可拆成六個(gè)步驟選項(xiàng)校驗(yàn)validateOptions校驗(yàn)主選項(xiàng)與次選項(xiàng)ignorePseudoElements只接受字符串或正則[isString, isRegExp]且次選項(xiàng)可缺省optional: true。校驗(yàn)邏輯見(jiàn) validateOptions.mjs配置不合法時(shí)會(huì)以invalidOption類型告警?？焖龠^(guò)濾root.walkRules(mayIncludeRegexes.pseudo, ...)只遍歷含冒號(hào)的規(guī)則mayIncludeRegexes.pseudo /:/見(jiàn) regexes.mjs是一個(gè)性能優(yōu)化——不含冒號(hào)的規(guī)則直接跳過(guò)無(wú)需進(jìn)入后續(xù)解析。標(biāo)準(zhǔn)語(yǔ)法過(guò)濾isStandardSyntaxRule和isStandardSyntaxSelector兩層把關(guān)把 SCSS/Less 插值如::#{$variable}、占位符選擇器、Less mixin 等非標(biāo)準(zhǔn)語(yǔ)法排除在外判定細(xì)節(jié)見(jiàn) isStandardSyntaxSelector.mjs。偽類分流parseSelector(...).walkPseudos(...)遍歷所有偽選擇器后先檢查value.slice(0, 2) ! ::——單冒號(hào)的偽類直接 return 放行只有雙冒號(hào)的偽元素進(jìn)入下一步。白名單與廠商前綴先看optionsMatches(secondaryOptions, ignorePseudoElements, pseudoNode.value.slice(2))是否命中白名單實(shí)現(xiàn)見(jiàn) optionsMatches.mjs再看vendor.prefix(name)是否提取到廠商前綴或pseudoElements.has(name.toLowerCase())是否命中已知表三者任一成立即放行。報(bào)告問(wèn)題都不滿足時(shí)調(diào)用report()用pseudoNode.sourceIndex與index value.length計(jì)算告警區(qū)間消息為Unknown pseudo-element selector ${selector}并統(tǒng)一追加規(guī)則名后綴(selector-pseudo-element-no-unknown)見(jiàn) ruleMessages.mjs。廠商前綴“一律忽略”的實(shí)現(xiàn)原理為什么文檔說(shuō)“This rule ignores vendor-prefixed pseudo-element selectors”關(guān)鍵在于 vendor.mjs 中的prefix()prefix(prop) { const match prop.match(/^(-\w-)/); return match ? (match[0] || ) : ; }只要偽元素名以-xxx-開(kāi)頭例如-moz-placeholder、-webkit-scrollbar就會(huì)提取出前綴并直接放行。注意這意味著即使是完全不存在的廠商前綴寫(xiě)法如input::-moz-test也不會(huì)報(bào)錯(cuò)——這一點(diǎn)在測(cè)試用例中專門(mén)有input::-moz-test { }被接受的確證。已知偽元素清單從規(guī)范到代碼判定“已知”的最終依據(jù)是 selectors.mjs 中導(dǎo)出的pseudoElements集合它由uniteSets合并以下幾組構(gòu)成分組成員說(shuō)明levelOneAndTwoPseudoElementsbefore、after、first-line、first-letterCSS 1/2 時(shí)代的四個(gè)經(jīng)典偽元素允許單冒號(hào)舊寫(xiě)法shadowTreePseudoElementspartShadow DOM 偽元素配合::part(...)使用deprecatedPseudoElementscontent、shadow已被廢棄但仍被規(guī)范記錄的偽元素vendorSpecificPseudoElements-moz-focus-inner、-ms-clear、-webkit-scrollbar系列等數(shù)十個(gè)各瀏覽器私有偽元素雖然這些會(huì)被vendor.prefix提前放行仍保留在集合中其余現(xiàn)代偽元素backdrop、cue、file-selector-button、grammar-error、highlight、marker、placeholder、selection、slotted、spelling-error、target-text、view-transition系列、scroll-marker系列等含編輯草案階段的較新提案因此::selection、::marker、::placeholder、::spelling-error、::grammar-error、::search-text、::view-transition以及::scroll-marker、::picker(select)、::part(shadow-part)等都能通過(guò)測(cè)試用例中均有對(duì)應(yīng)斷言。邊界行為與測(cè)試佐證tests/index.mjs 覆蓋了不少容易被忽略的邊界場(chǎng)景大小寫(xiě)容忍a:Before、a::bEfOrE、a::BEFORE等任意大小寫(xiě)組合都被接受查表前統(tǒng)一toLowerCase()復(fù)雜選擇器a:hover::before、選擇器列表a,\nb .foo::before正常處理未知偽元素按行定位a:hover::element的告警定位在column: 8b .foo::error定位在line: 2, column: 9非標(biāo)準(zhǔn)語(yǔ)法跳過(guò)使用postcss-scss自定義語(yǔ)法時(shí)::#{$variable}、a::#{$variable}等 SCSS 插值寫(xiě)法不被檢查行內(nèi)禁用生效/* stylelint-disable-next-line selector-pseudo-element-no-unknown */注釋可精確抑制下一行的::pseudo報(bào)錯(cuò)一處規(guī)則多報(bào)同一選擇器列表中出現(xiàn)多個(gè)未知偽元素時(shí)逐一出報(bào)例如 5 行代碼中 3 處a::pseudo產(chǎn)生 3 條 warning行號(hào)列號(hào)一一對(duì)應(yīng)。實(shí)際配置示例把以上內(nèi)容落地到一個(gè).stylelintrc.json{ rules: { selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [ --my-custom-element, /^x-/i ] } ] } }此配置下::before、::selection、::-webkit-scrollbar正常通過(guò)::pseudo、::element、::PSEUDO報(bào)錯(cuò)::--my-custom-element與::x-foo、::X-BAR正則i標(biāo)志被白名單放行。小結(jié)selector-pseudo-element-no-unknown的設(shè)計(jì)思路清晰以 CSS 規(guī)范含編輯草案為“已知”基線用vendor.prefix兜底廠商前綴用ignorePseudoElements為用戶自定義偽元素留出擴(kuò)展口。理解它的判定鏈路雙冒號(hào)前提 → 標(biāo)準(zhǔn)語(yǔ)法過(guò)濾 → 白名單/前綴/已知表三層命中你就能準(zhǔn)確預(yù)判任意偽元素寫(xiě)法的檢查結(jié)果并在團(tuán)隊(duì)規(guī)范中放心啟用它來(lái)攔截拼寫(xiě)錯(cuò)誤與不存在的偽元素。若需要檢查單冒號(hào)偽類可配合selector-pseudo-class-no-unknown一起使用兩者覆蓋完整的偽選擇器檢查面。贊分享代碼質(zhì)量靜態(tài)分析前端【免費(fèi)下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項(xiàng)目地址https://gitcode.com/gh_mirrors/st/stylelint點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析 導(dǎo)讀 cilium operator alibabaclou代碼質(zhì)量靜態(tài)分析前端eslint-plugin-unicorn 規(guī)則詳解no-unknown-pseudo-selectors 校驗(yàn)未知 CSS 偽類與偽元素eslint plugin unicorn 規(guī)則詳解no unknown pseudo selectors 校驗(yàn)未知 CSS 偽類與偽元素 導(dǎo)讀 no unkLint代碼質(zhì)量cross-en-it-roberta-sentence-transformer常見(jiàn)問(wèn)題解答10個(gè)開(kāi)發(fā)者必知的技術(shù)要點(diǎn)cross en it roberta sentence transformer常見(jiàn)問(wèn)題解答10個(gè)開(kāi)發(fā)者必知的技術(shù)要點(diǎn) cross en it roberta代碼質(zhì)量靜態(tài)分析前端上一篇React Native FBSDK Next用戶資料獲取終極指南如何安全訪問(wèn)用戶信息下一篇7步搞定深度學(xué)習(xí)數(shù)據(jù)預(yù)處理Pandas特征工程實(shí)戰(zhàn)指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考