Skip to main content

定制

¥Customizing

标准配置 的开启时间约为 内置规则 的一半。Stylelint 的功能远不止于此。我们建议使用 标准配置 作为基础并在其之上进行构建。

¥The standard config turns on about half of the built-in rules. Stylelint is capable of so much more. We recommend using the standard config as a foundation and building on top of it.

你可以使用 内置规则 的另一半来：

¥You can use the other half of the built-in rules to:

这些约定通常特定于你和你的项目。

¥These conventions are typically specific to you and your project.

你可以做很多事情。例如，如果你只想允许：

¥There's a lot you can do. For example, if you only want to allow:

  • 一般为 %、deg、px、rem、ms 单位

    ¥%, deg, px, rem, ms units generally

  • px 为边框

    ¥px for borders

  • rem 用于填充和间隙

    ¥rem for paddings and gaps

你可以使用 unit-allowed-list 和 declaration-property-unit-allowed-list 规则：

¥You can use the unit-allowed-list and declaration-property-unit-allowed-list rules:

{
  "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() 颜色表示法：

¥Or you can enforce the hsl() color notation using the color-named, color-no-hex,function-disallowed-list rules:

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

或者你可以使用 selector-max-id 规则限制 ID 选择器的数量：

¥Or you can limit the number of ID selectors using the selector-max-id rule:

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

这些只是你可以使用 内置规则 执行的部分操作。可以将它们配置为强制执行严格的约定并让你的 CSS 处于控制之下。

¥These are just some of the things you can do with the built-in rules. It's possible to configure them to enforce strict conventions and keep your CSS under control.

自定义规则​

¥Custom rules

除了 内置规则 之外，你还可以使用 插入 Stylelint 自定义规则。

¥In addition to the built-in rules, there are custom rules that you can plug into Stylelint.

自定义规则通常由社区编写，以支持方法、工具集、非标准 CSS 功能或非常具体的用例。

¥Custom rules are typically written by communities to support methodologies, toolsets, non-standard CSS features, or very specific use cases.

你可以通过扩展包含自定义规则的共享配置或直接使用插件来将自定义规则添加到你的配置中。例如，你可以通过扩展 休会顺序配置（其中包括 订单插件）来排序属性：

¥You can add custom rules to your config by extending a shared config that includes them or by using a plugin directly. For example, you can order your properties by extending the recess order config, which includes the order plugin:

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

或者，如果你想按字母顺序排列属性，则可以直接使用 插件：

¥Or you can use the plugin directly if, for example, you want to alphabetize your properties:

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

自定义规则可以做各种各样的事情；从执行 严格的 BEM 约定 到 严格的数值范围。你会发现 很棒的 Stylelint 中列出了更多自定义规则的共享配置和插件。

¥Custom rules do all sorts; from enforcing strict BEM conventions to strict scales for numeric values. You'll find more shared configs and plugins of custom rules listed in Awesome Stylelint.

你也可以 在插件中编写你自己的自定义规则。如果你有特定的需求或想要强制执行的约定，这尤其有用。

¥You can also write your own custom rules within a plugin. This is particularly useful if you have specific needs or conventions you want to enforce.

严格​

¥Strictness

我们建议你制定一个严格执行约定的配置，然后在需要时使用 配置注释 禁用特定规则。你无需回避使用它们，因为它们是 Stylelint 不可或缺的一部分。

¥We recommend you craft a config that strictly enforces your conventions and then use configuration comments to disable specific rules when needed. You needn't shy away from using them as they are an integral part of Stylelint.

你可以在配置中使用 report* 属性来确保你的注释不是无用且无描述的：

¥You can use the report* properties in your config to ensure your comments aren't useless and descriptionless:

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

如果你需要向其中添加例外，则每个属性都是可配置的。

¥Each of these properties is configurable if you need to add exceptions to them.

你还可以使用 reportDisables 辅助属性来禁止基于每个规则的禁用。

¥You can also use the reportDisables secondary property to disallow disables on a per-rule basis.

使用 Stylelint​

¥Using Stylelint

你可以使用我们的 Visual Studio 代码扩展 或 很棒的 Stylelint 中列出的其他集成之一，在代码编辑器中获取即时反馈。这是发现和解决问题的最快方法。

¥You can use our Visual Studio Code extension, or one of the other integrations listed in Awesome Stylelint, to get instant feedback in your code editor. This is the quickest way to see and resolve problems.

你也不必使用 CLI；我们还提供 Node.js API，或者你可以使用 很棒的 Stylelint 中列出的其他集成或任务运行程序之一。

¥You don't have to use the CLI either; we also provide a Node.js API, or you can use one of the other integrations or task runners listed in Awesome Stylelint.

无论你选择哪一个，Stylelint 中都有 很多选择，你可以使用它们来自定义 Stylelint 的工作方式。例如，你可能希望使用 --fix 选项 自动修复尽可能多的问题：

¥Whichever you choose, there are many options in Stylelint that you can use to customize how Stylelint works. For example, you'll likely want to use the --fix option to automatically fix as many problems as possible:

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

你可能还想研究：

¥You may also want to look into the: