在前端开发中，CSS 是不可避免的一部分，而 CSS 的代码规范及格式化就需要借助相关的工具来完成。stylelint-brunch 是一个基于 Node.js 平台的代码校验工具，可以用来检测 CSS 文件中的格式错误和不规范的代码，并提示修复建议。本文将介绍如何使用 stylelint-brunch 进行 CSS 代码检测和规范化。
安装 stylelint-brunch
该 npm 包需要安装 Node.js 环境，如果还未安装 Node.js 的读者，请先安装 Node.js。
全局安装 stylelint-brunch：
npm install -g stylelint-brunch
或在本地项目中安装：
npm install stylelint-brunch --save-dev
配置 stylelint-brunch
stylelint-brunch 默认会在当前目录寻找 .stylelintrc 文件进行配置，因此我们需要在项目中创建一个该文件，并进行配置。
在 .stylelintrc 文件中输入以下内容：
{
"extends": "stylelint-config-standard", // 继承标准的规则配置
"rules": {
// 自定义规则
}
}extends 字段指定了 stylelint-brunch 应该继承哪些规则，上述示例中继承了 stylelint-config-standard 包，这是一组基于社区共识出来的 CSS 规范，并被广泛使用。
rules 字段包含了项目自定义的规则配置，也可以作为对基本规则进行的额外定制。
在 brunch 构建过程中使用 stylelint-brunch
brunch 是一个快速的前端构建工具，可以实现类似 webpack 的功能，也可以使用插件进行半自动化的构建。我们可以使用 brunch-config.js 来配置 brunch。
在 brunch-config.js 中添加以下内容：
-- -------------------- ---- -------
-- -- ---------------- ----- --- --
----- -------------- - -----------------------------------------
-- -- ---------
-------- -
---------- -
------- ------------
----------- ---------------
-------- --------------
-
-上述示例中，通过 pattern 字段指定需要进行检查的 CSS 文件，此处默认以 app/styles/ 目录下的所有 css、less、sass、scss 文件为检查对象。
使用 stylelint-brunch 检测代码
配置完成后，我们可以通过命令行来运行 stylelint-brunch 了。
全局命令行：
stylelint-brunch
或在本地项目中运行：
npm run stylelint-brunch
运行后，会对项目中的所有指定文件进行代码检查，并输出检查后的结果，如下所示：
/home/user/projects/project1/app/styles/layout.css 122:3 ✖ Expected single space before selector comma (selector-list-comma-space-before) /home/user/projects/project1/app/styles/components/header.scss 25:3 ✖ Replace `:` with `: ` (selector-attribute-operator-space-after)
输出结果中，包含了检测到的错误代码位置及错误信息，我们可以根据提示信息修改代码，使代码更规范。
总结
在前端开发中，CSS 的代码规范和格式化不可忽视，可以提高代码的可读性和可维护性。stylelint-brunch 是一个方便的工具，可以对 CSS 文件进行可靠的规范化校验和提示。通过本文介绍，相信读者已经能够快速掌握 stylelint-brunch 的使用方法，并在日常开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c581e8991b448e8e5c