在前端开发中，使用好的代码风格规范可以让我们的代码更加清晰易读，便于维护。而 stylelint 就是一个专为 CSS 提供代码风格规范的工具。它支持众多插件和扩展，而 stylelint-config-wandi 就是其中一个优秀的 npm 包。本文将为大家介绍如何使用它来规范我们的 CSS 代码。
什么是 stylelint-config-wandi？
stylelint-config-wandi 是基于 stylelint 的一款预设代码风格规范。它包含了丰富的配置和扩展，能够帮助我们更加严格地规范 CSS 代码，从而减少错误和不必要的 bug，提高代码质量。使用它可以大大提升我们的开发效率和代码可维护性。
如何安装 stylelint-config-wandi？
在使用 stylelint-config-wandi 前，我们需要先安装 stylelint，可以使用 npm 包管理器来进行安装：
npm install stylelint --save-dev
安装完成后，我们就可以安装 stylelint-config-wandi 了，同样使用 npm 包管理器：
npm install stylelint-config-wandi --save-dev
如何配置 stylelint-config-wandi？
安装完了 stylelint 和 stylelint-config-wandi，接下来就需要配置 stylelint，让它知道我们要使用哪些规则。我们可以通过 .stylelintrc 文件来实现。
在项目根目录下，新建一个 .stylelintrc 文件，并添加以下内容：
{
"extends": "stylelint-config-wandi"
}这里的 "extends": "stylelint-config-wandi" 表示我们要继承 stylelint-config-wandi 提供的规则。如果我们想要修改或者扩展这些规则，可以在这个文件中进行。
如何使用 stylelint？
配置好了 stylelint 后，我们可以使用命令行工具来运行它，检查 CSS 文件是否符合规范。在 package.json 中添加以下 script：
{
"scripts": {
"lint:css": "stylelint \"src/**/*.css\""
}
}然后，在命令行中执行 npm run lint:css 来检查项目中的 CSS 文件是否符合规范。
除了命令行工具之外，我们还可以使用编辑器插件来集成 stylelint，来实现在编写代码时自动检查代码规范，并提供友好的提示和 IDE 支持。
示例代码
以下是一段不符合规范的 CSS 代码：
.myClass{
background-color:#FFFFFF;
color:#000000;
font-size:16px;
text-align:center;}这里我们使用 stylelint-config-wandi 来检查它是否符合规范。运行 npx stylelint --fix test.css 命令可以自动修复一些报错。
输出如下：
test.css 1:1 ✖ Expected indentation of 2 spaces indentation 2:1 ✖ Expected indentation of 2 spaces indentation 3:1 ✖ Expected indentation of 2 spaces indentation 4:1 ✖ Expected indentation of 2 spaces indentation ✖ 4 problems (4 errors, 0 warnings)
我们可以看到风格不符合规范的地方，其中缩进的问题不符合预期，于是我们可以手动进行修改：
.myClass {
background-color: #FFFFFF;
color: #000000;
font-size: 16px;
text-align: center;
}现在，这段 CSS 代码就符合规范了！
总结
本文介绍了如何使用 stylelint 和 stylelint-config-wandi 来规范 CSS 代码风格。通过引入这些工具，我们可以提高项目的代码质量和可维护性，从而使得代码更加易于维护和扩展。同时，我们还通过实例代码演示了如何使用 stylelint 检查并修复不符合规范的 CSS 代码。希望这篇教程能够帮助到大家在前端开发中使用好 stylelint 和 stylelint-config-wandi。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554ee81e8991b448d2250