npm 包 stylelint-config-allenmoore 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码规范的重要性不言而喻。而 CSS 代码规范同样重要，因为它能够让我们的代码更易维护、更易理解，可读性更好。而 stylelint 作为一个 CSS 代码审查工具，可以让我们更好地遵循代码规范。而 npm 上的 stylelint-config-allenmoore 包则可以帮助我们快速配置 stylelint 的规则，从而方便开发。

安装 stylelint 和 stylelint-config-allenmoore

在开始使用 stylelint-config-allenmoore 前，需要先安装 stylelint 以及 stylelint-config-allenmoore。

npm install stylelint stylelint-config-allenmoore --save-dev

配置 stylelint

在安装完 stylelint 和 stylelint-config-allenmoore 后，需要将 stylelint 配置文件中的 extends 属性值修改为 "stylelint-config-allenmoore" 即可。

{
  "extends": "stylelint-config-allenmoore",
  "rules": {
    // 自定义规则
  }
}

规则说明

使用 stylelint-config-allenmoore 会使你的项目使用以下规则：

一般样式的规则

以下规则是在样式表的任何地方都可以使用的。

color-hex-case: 字母一律使用小写，例如，不允许使用 #FFF，而是使用 #fff。
font-family-name-quotes: 字体名称需要使用引号（单引号或双引号），例如，font-family: "Adobe Garamond", serif;。
font-weight-notation: 字体的粗细使用数值表示，例如，font-weight: 700;。
no-descending-specificity: 禁止其中一个选择器比包含它的选择器更具体。
no-duplicate-selectors: 禁止选择器重复（如果有多个具有相同规则的选择器，则仅允许这些选择器出现一次）。

CSS @-规则的规则

以下规则是用于任何 CSS @-规则的。

at-rule-name-case: @规则名称一律使用小写，例如，@media。
at-rule-name-space-after: 在 @ 规则名称后面添加间距，例如，@media screen and (max-width:70em) { ... }。
at-rule-semicolon-space-before: 在;前添加间距，例如，@media screen and (max-width:70em) { ... };。

声明的一般规则

以下规则是在样式声明中使用的。

declaration-bang-space-after: ! 后面需要添加间距
declaration-bang-space-before: ! 前面需要添加间距
declaration-colon-space-after: 在声明值后面添加间距，例如，background-color: #fff;。
declaration-colon-space-before: 在声明值前面添加空格，例如，background-color: #fff;。
declaration-block-no-duplicate-properties: 声明块中的属性不允许重复。
declaration-block-no-shorthand-property-overrides: 禁止缩写属性覆盖其他属性。
declaration-block-semicolon-space-after: 在分号后面添加间距，例如，color: #000;。
declaration-block-semicolon-space-before: 在分号前添加间距，例如，color: #000 ;。
declaration-block-single-line-max-declarations: 在单行上不要在单行中写超过1个声明。

自定义规则

除了使用预设规则之外，还可以根据自己的需求自定义规则。可以在 rules 属性中定义你自己的规则，例如：

{
  "extends": "stylelint-config-allenmoore",
  "rules": {
    "indentation": 2
  }
}

上述规则定义了样式中的缩进应该为 2 个空格。更多规则可参考 stylelint 的规则文档。

示例代码

.test {
  color: #000;
  background-color: #fff;
}

总结

使用 stylelint-config-allenmoore 可以帮助我们快速配置 stylelint 规则，从而使我们的 CSS 代码更易于阅读和维护。定制化规则也可以让我们根据自己的需求来检测 CSS 文件，保证项目的代码规范。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de1a4