在前端开发中，打造出美观、简洁、易维护的代码是非常重要的。因此，代码风格的保持也是必不可少的。而 stylelint 就是解决代码风格问题的工具之一。今天我们来学习一下如何使用 stylelint-config-oro，一个常用于 OroCommerce 项目中的 stylelint 配置规则包。
什么是 stylelint
stylelint 是一个基于 Node.js 的 CSS 代码规范检查工具，与 eslint、jshint 等类似，但主要面向 CSS/Sass 编写者。它提供了一系列的规则，当它们被应用到样式文件中，能够保证你的样式表在形式上要始终一致，从而对开发效率起到良好的促进作用。
什么是 stylelint-config-oro
stylelint-config-oro 是专门为 OroCommerce 项目定制的 stylelint 配置规则包。它基于 stylelint 提供了 OroCommerce 项目开发所需的规则配置，为开发者提供开箱即用的样式校验功能。
安装
你可以通过 npm 安装 stylelint 和 stylelint-config-oro：
npm install stylelint stylelint-config-oro --save-dev
安装完成之后，你可以在项目的 package.json 文件中新增一条 scripts 来执行检测命令：
{
"scripts": {
"lint:styles": "stylelint 'src/**/*.scss' --config node_modules/stylelint-config-oro/config.scss.js"
}
}现在你可以使用以下命令来检测你的样式文件了：
npm run lint:styles
配置
在 package.json 中指定了 stylelint 的配置文件路径，但是我们还要在项目根目录下创建一个 .stylelintrc 文件。这个文件中我们可以手动定义一些需要使用的规则。
{
"extends": "stylelint-config-oro/config.scss",
"rules": {
"color-hex-case":null,
"selector-type-no-unknown": [true, {ignoreTypes: ["element", "text", "url"]}]
}
}以上配置中，我们扩展了 stylelint-config-oro/config.scss 配置，并对 color-hex-case 和 selector-type-no-unknown 两个规则做了一些自定义的改变。
常用规则
stylelint 配置有很多的规则，具体可以在官方文档中查阅，这里介绍一下一些比较常用的规则。
color-hex-case
此规则指定十六进制颜色是否应以大写或小写字母表示。我们可以在 .stylelintrc 中这样写：
{
"rules": {
"color-hex-case": "lower" // 所有十六进制颜色都应该是小写的
}
}selector-max-id
此规则指定 CSS 选择器中使用 id 属性的最大数量。我们可以在 .stylelintrc 中这样写：
{
"rules": {
"selector-max-id": 0 // 不能使用 id 选择器
}
}selector-max-class
此规则指定 CSS 选择器中使用类名的最大数量。我们可以在 .stylelintrc 中这样写：
{
"rules": {
"selector-max-class": 3 // 选择器中最多只能出现 3 个类名
}
}selector-max-universal
此规则指定 CSS 选择器中使用普通类型（即非元素或类选择器）的最大数量。我们可以在 .stylelintrc 中这样写：
{
"rules": {
"selector-max-universal": 1 // 选择器中最多只能出现 1 次通用选择器
}
}结语
使用 stylelint 可以很好地控制我们的代码风格，而使用 stylelint-config-oro 可以快速上手 OroCommerce 的项目开发，从而提高开发效率。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540381e8991b448d15e0