如果你是前端工程师，你一定知道 stylelint 。它是一个强大的 CSS 校验工具，可以帮助你自动化检查 CSS 代码的可读性和可维护性。
stylelint 使用 plugin 和 config 的方式，可以帮助我们更好地配置检查规则，而 stylelint-config-ovh 就是一个非常优秀的配置工具，它实现了 OVH（欧洲最大的云计算公司之一）的 CSS 标准，能够帮助团队更好地协作并提高代码质量。本文就是介绍如何安装和使用 stylelint-config-ovh 这个 npm 包。
安装
首先，你需要在项目中安装 stylelint 和 stylelint-config-ovh。在终端中输入以下命令：
npm install stylelint stylelint-config-ovh --save-dev
当然，如果你使用的是 yarn，你也可以使用 yarn 安装：
yarn add stylelint stylelint-config-ovh --dev
安装成功之后，我们需要在项目根目录下创建 .stylelintrc 配置文件。具体的方法是在终端中运行以下命令：
touch .stylelintrc
然后在 .stylelintrc 文件中添加以下内容：
{
"extends": "stylelint-config-ovh"
}现在你已经安装和配置了 stylelint-config-ovh ，现在可以开始使用它来检查 CSS 代码了。
使用
在项目中，我们可以在 package.json 文件中定义一个 lint 命令来进行代码检查。具体的方法是在 scripts 字段中添加以下内容：
{
"scripts": {
"lint": "stylelint \"src/**/*.css\""
}
}在这个例子中，我们定义了一个名为 lint 的脚本，它会检查 src 目录下的所有 CSS 文件。如果你的 CSS 文件不是存放在 src 目录下，你需要相应地更改命令中的路径。
当你运行 npm run lint 或 yarn lint 命令时，stylelint 将会检查你的 CSS 代码并给出相应的警告和错误信息。
我们来看一下 stylelint-config-ovh 的具体规则以及它们的作用：
颜色
/* Good example */
.element {
color: #232323;
background-color: white;
}
/* Bad example */
.element {
color: #000;
background: #fff;
}对于颜色的规则，stylelint-config-ovh 要求我们使用三位或六位的十六进制颜色值，并且不能使用简写方式，即使是简写方式也不允许使用。
图片
/* Good example */
.element {
background-image: url(../img/foo.png);
background-repeat: no-repeat;
}
/* Bad example */
.element {
background: url(../img/foo.png) no-repeat;
}对于图片，stylelint-config-ovh 要求我们使用 background-image 和 background-repeat 分别定义图片和重复方式，不允许使用 background 缩写方式。
字体
/* Good example */
.element {
font-family: "Helvetica Neue", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
/* Bad example */
.el {
font: 400 16px "HelveticaNeue", sans-serif;
}对于字体，stylelint-config-ovh 要求我们使用 font-family、font-size、font-weight、line-height 分别定义字体系列、字体大小、字体粗细和行高，不允许使用 font 缩写方式。
边框
/* Good example */
.element {
border: 1px solid #ccc;
border-radius: 2px;
}
/* Bad example */
.element {
border-width: 1px;
border-style: solid;
border-color: #ccc;
border-radius: 2px;
}对于边框，stylelint-config-ovh 要求我们使用 border 和 border-radius 分别定义边框和圆角，不允许使用 border-width、border-style、border-color 分别定义各个属性。
除了以上这些规则之外，stylelint-config-ovh 还有很多规则，具体可以参考它的文档。这些规则的使用有助于团队保持统一的代码风格，提高代码的可维护性和可读性。
结语
在本文中，我们介绍了怎样使用 stylelint 和 stylelint-config-ovh 这两个 npm 包进行 CSS 代码检查的配置。同时我们也介绍了 stylelint-config-ovh 中一些常用的检查规则，并给出了相应的例子。当你使用这些规则时，你可能会需要一些时间来适应它们，但是这种方式可以帮助你和你的团队编写出更好的 CSS 代码。
在你的项目中使用 stylelint 和 stylelint-config-ovh，可以帮助你提高代码质量，加快开发效率，并且减少错误。所以我们建议你尽早开始使用它们！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c75