在前端开发中，代码风格是非常重要的一环。为了保持团队代码的一致性以及避免常见的代码错误，我们可以借助 stylelint 工具来进行代码风格的检查。
然而，具体的 stylelint 配置是比较繁琐的，我们需要考虑的因素包括但不限于：缩进，括号，引号，分号等等。针对这个问题，社区提供了很多现成的配置，例如 Airbnb 的 css 规范以及受众更广的 stylelint-config-standard。
在 Sprii，我们发布了自己的 stylelint 配置 npm 包 @sprii/stylelint-config，以下是使用教程。
1. 安装
@sprii/stylelint-config 可以通过 npm 进行安装，包括依赖的 stylelint 和其插件：
npm install --save-dev @sprii/stylelint-config stylelint stylelint-order stylelint-config-recommended
2. 配置
在你的项目根目录下创建 .stylelintrc.js 文件，引入 @sprii/stylelint-config：
module.exports = {
extends: ["@sprii/stylelint-config"],
};你也可以通过 overrides 配置选项来覆盖默认配置，例如：
-- -------------------- ---- -------
-------------- - -
-------- ----------------------------
---------- -
-
------ -----------
------ -
-- -----
-------------------- --
---------------------------------- --
--
--
--
--3. 运行
在你的项目 package.json 中添加运行命令：
"scripts": {
"lint:css": "stylelint \"src/**/*.css\""
}此命令将检查 src 文件夹下所有的 .css 文件。
4. 结果
假设在 .stylelintrc.js 文件中添加以下配置：
module.exports = {
extends: ["@sprii/stylelint-config"],
rules: {
"indentation": 4,
}
};并运行 npm run lint:css 命令后，输出结果如下：
结论
借助 @sprii/stylelint-config，我们可以节省很多配置 stylelint 的时间，同时保证代码风格的一致性。值得一提的是，该库也拥有社区多次贡献代码和使用经验的支持，对于前端团队而言，使用该库也能够保持团队代码风格的整洁和方便统一维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737b81e8991b448e96dc