自訂

標準設定開啟約一半的內建規則。Stylelint 的功能遠不止於此。我們建議將標準設定當作基礎，再進一步建構。

你可以使用另一半的內建規則來

透過禁止某些事項確保更一致的結果
透過設定限制管理程式碼的複雜度

這些慣例通常是針對你和你的專案量身打造的。

您可以做很多事。例如，如果您只想允許

%、deg、px、rem、ms 單位
px 用於邊框
rem 用於內距和間距

您可以使用 unit-allowed-list 和 declaration-property-unit-allowed-list 規則

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "declaration-property-unit-allowed-list": {
+     "/^border/": ["px"],
+     "/^padding|^gap/": ["rem"]
+   },
+   "unit-allowed-list": ["%", "deg", "px", "rem", "ms"]
+ }
}

或者，您可以使用 color-named、color-no-hex、function-disallowed-list 規則來強制使用 hsl() 顏色表示法

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "color-named": "never",
+   "color-no-hex": true,
+   "function-disallowed-list": ["rgb", "hwb", "lch"]
+ }
}

或者，您可以使用 selector-max-id 規則來限制 ID 選擇器的數量

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "selector-max-id": 0
+ }
}

這些只是您可以使用內建規則執行的一些操作。您可以將它們設定為強制執行嚴格的慣例並控制您的 CSS。

自訂規則

除了內建規則之外，還有自訂規則，您可以將它們插入 Stylelint。

自訂規則通常由社群撰寫，以支援方法、工具組、非標準 CSS 功能或非常特定的使用案例。

您可以透過擴充包含它們的共用設定檔或直接使用外掛程式，將自訂規則新增至您的設定檔。例如，您可以透過擴充 recess order 設定檔來排序您的屬性，其中包含 order 外掛程式

{
  "extends": [
    "stylelint-config-standard"
+   "stylelint-config-recess-order"
  ]
}

或者，如果您想要對屬性進行字母排序，您可以直接使用外掛程式

{
  "extends": ["stylelint-config-standard"],
+ "plugins": ["stylelint-order"],
+ "rules": {
+   "order/properties-alphabetical-order": true
+ }
}

自訂規則能做很多事；從強制執行嚴格的 BEM 慣例到嚴格的數值比例。您可以在 Awesome Stylelint 中找到更多列出的共用設定檔和自訂規則外掛程式。

您也可以在插件中撰寫您自己的自訂規則。如果您有特定的需求或慣例想要強制執行，這特別有用。

嚴格性

我們建議您制定一個嚴格執行慣例的設定檔，然後使用設定檔註解在需要時停用特定規則。您不必害怕使用它們，因為它們是 Stylelint 的一個組成部分。

您可以在設定檔中使用report*屬性，以確保您的註解不是無用的且沒有描述

{
  "extends": ["stylelint-config-standard"],
+ "reportDescriptionlessDisables": true,
+ "reportInvalidScopeDisables": true,
+ "reportNeedlessDisables": true
}

如果您需要為這些屬性新增例外，每個屬性都是可設定的。

您也可以使用reportDisables次要屬性，以逐一規則禁止停用。

使用 Stylelint

您可以使用我們的Visual Studio Code 擴充功能，或在Awesome Stylelint中列出的其他整合，在您的程式碼編輯器中取得即時回饋。這是查看和解決問題最快速的方法。

您也不必使用CLI；我們也提供Node.js API，或者您可以使用Awesome Stylelint中列出的其他整合或任務執行器。

無論您選擇哪一個，Stylelint 中都有許多選項，您可以使用它們來自訂 Stylelint 的運作方式。例如，您可能會想要使用--fix 選項自動修正盡可能多的問題

npx stylelint "**/*.css" --fix

您可能也想深入了解

--cache 選項以提升效能
--formatter 選項以自訂輸出

自訂

自訂規則​

嚴格性​

使用 Stylelint​

自訂規則

嚴格性

使用 Stylelint