在前端开发中，CSS 是我们不可或缺的一部分。而在 CSS 中，我们常常会遇到一些语法上的问题，如代码格式、颜色命名、选择器使用等等。为了避免这些问题对我们的项目造成不必要的麻烦，我们可以使用 @sane-defaults/stylelint 来规范我们的 CSS 代码。
安装与配置
需要先安装 Node.js 和 npm。在命令行中输入以下命令安装 @sane-defaults/stylelint：
npm install @sane-defaults/stylelint --save-dev
然后，在项目的根目录中创建 .stylelintrc 文件，配置一些规则：
{
"extends": "@sane-defaults/stylelint",
"rules": {
"color-no-invalid-hex": true,
"color-hex-case": "lower"
}
}这里设置了两条规则，第一条是不允许使用无效的十六进制颜色值，第二条是十六进制颜色值使用小写字母的形式。
使用
在项目的根目录中，使用以下命令来检查 CSS 代码是否符合规范：
npx stylelint '**/*.{css,scss}'这里的 **/*.{css,scss} 表示检查项目中所有的 .css 和 .scss 文件。
如果想要自动修复一些简单的问题，可以使用以下命令：
npx stylelint '**/*.{css,scss}' --fix这里的 --fix 表示自动修复一些简单的问题，如缩进、换行、空格等。
示例代码
下面是一段示例代码：
-- -------------------- ---- ------- -- --------------- -- ------ - ------ -------- - -- ---------------- -- ------ - ------ -------- -
在输入以下命令后，会提示两个错误：
npx stylelint 'example.css' example.css 2:10 ✖ Unexpected invalid hex color "#wwwwww" (color-no-invalid-hex) 7:10 ✖ Expected "#ff0000" to be "#FF0000" (color-hex-case)
根据提示信息可以看出，第一条规则被违反了，第二条规则被违反了。如果希望自动修复这些问题，可以在命令行中加入 --fix 参数：
npx stylelint 'example.css' --fix
然后再次运行 npx stylelint 'example.css' 命令，结果将不再提示错误。
总结
在前端开发中，使用 @sane-defaults/stylelint 可以帮助我们规范 CSS 代码，避免一些常见的问题。通过以上的安装、配置、使用方法，我们可以很容易地使用 @sane-defaults/stylelint 来提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd281e8991b448e6626