非常教程

Stylelint参考手册

用户指南

FAQ

如何禁用规则?

您可以通过将其配置值设置为禁用规则null

例如,要在stylelint-config-standard没有at-rule-empty-line-before规则的情况下使用:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-empty-line-before": null
  }
}

您还可以为CSS的特定部分禁用规则。有关更多信息,请参阅配置指南的规则部分。

我如何从命令行lint?

请参阅文档的CLI部分。

CLI也可以在npm运行脚本中使用,以使用stylelint的非全局安装。

我如何使用Git预提交钩子?

lint-staged是一个NodeJS脚本,支持对Git staged文件运行stylelint。

我如何使用我选择的任务跑步者?

stylelint社区为流行的任务运行者维护了一些插件,包括gulp,webpack,Broccoli和Grunt。请参阅他们的个人自述文件以开始使用。

如果没有为您选择的任务运行器提供专用的stylelint插件,您可以将stylelint用作PostCSS插件,并使用PostCSS的众多任务运行器插件。

还有一些通过文档中的PostCSS JS API使用PostCSS插件的示例。

但是,使用stylelint作为PostCSS插件会将报告选项限制为postcss-reporter。我们建议使用stylelint CLI或Node API来获得更好的报告。

我如何在文本编辑器中lint?

stylelint社区还为流行的编辑器维护了一些插件。请参阅他们的个人自述文件以开始使用。

我如何lint SCSS,Less或其他非标准语法?

stylelint可以默认解析任何以下非标准语法:SCSS,Less和SugarSS。非标准语法可以自动地从下面的文件扩展名推断出.scss.less.sss; 否则你可以自己指定语法。

此外,使用CLI或Node API时,stylelint可以接受任何与PostCSS兼容的语法。但请注意,stylelint无法保证核心规则可以使用上面列出的默认值以外的语法。

请参阅有关如何配置stylelint以解析非标准语法的文档。

我应该在通过PostCSS插件或其他处理器处理样式表之前或之后进行lint吗?

我们建议在进行任何转换之前对源文件进行linting。

我如何在<style>标签中lint样式?

创建处理器或使用现有的处理器从HTML <style>标签中提取CSS 并将其提供给stylelint。

如何自动修复样式警告?

stylefmt支持stylelint配置文件,可以自动修复许多样式警告。

如何管理规则之间的冲突?

每条规则都是独立的,因此有时可以配置规则以使它们彼此冲突。例如,您可以启用两个冲突的黑名单和白名单规则,例如unit-blacklistunit-whitelist

作为配置作者,您有责任解决这些冲突。

插件和规则有什么区别?

规则必须符合标准规定了开发者指南中,包括被只适用于标准的CSS语法,并具有清晰明确的完成状态。而插件是由社区构建的规则或规则集,不符合标准。它可能支持特定的方法或工具集,或适用于非标准构造和功能,或适用于特定用例。

例如,我们发现强制执行属性订单,属性分组等的规则更适合作为插件,因为有很多不同的意见关于要执行什么,以及如何执行。当您编写或使用插件时,您可以确保强制执行您自己的特定首选项; 但试图解决太多不同用例的规则变得一团糟。

插件很容易合并到您的配置中。

我可以自定义stylelint的消息吗?

是的,您可以使用message辅助选项或编写自己的格式化程序。

我应该如何使用类似BEM的方法来保护我的CSS?

使用stylelint-selector-bem-pattern插件可确保选择器符合所选的BEM风格模式。

您还可以利用selector-*规则禁止某些类型的选择器(例如id选择器)和控制特异性。

如果您正在使用SUITCSS,则可能需要使用其可共享配置。

如何配置*-patternkebab-case等常见CSS命名约定的规则?

使用与您选择的约定相对应的正则表达式:

  • kebab-case: ^([a-z][a-z0-9]*)(-[a-z0-9]+)*$
  • lowerCamelCase: ^[a-z][a-zA-Z0-9]+$
  • snake_case: ^([a-z][a-z0-9]*)(_[a-z0-9]+)*$
  • UpperCamelCase: ^[A-Z][a-zA-Z0-9]+$

例如,对于lowerCamelCase类选择器,请使用"selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"

所有这些模式都不允许以数字,两个连字符或连字符后跟数字开头的CSS标识符。

如何将默认严重性更改为“警告”,以便stylelint不会破坏我的构建?

使用defaultSeverity配置选项。

我可以在npm包中捆绑多个可共享配置吗?

用户可以使用require()npm包中的任何文件,因此您需要做的就是记录哪些路径指向配置(例如require('my-package/config-2'))。

如何在块的开放支撑后控制空白?

请参阅解释规则如何工作的文档的此部分*-empty-line-before

如果我extends在配置对象中使用,是否会合并或覆盖每个规则的选项?

他们将被覆盖。

extends机制在配置文档中详细说明:

当一个配置扩展另一个配置时,它从另一个配置属性开始,然后添加并覆盖其中的内容。

这种设计的原因记录在#1646中。

Stylelint

Stylelint 是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。

Stylelint目录

1.用户指南
2.开发指南