在前端开发中，CSS 的规范和效率是一个不可忽略的问题，这时候我们需要运用一些优秀的 CSS 校验工具，比如 stylelint。而 @savvy-css/stylelint-config-savvy 就是为 stylelint 提供的一款配置包，可以帮助开发者快速完成对项目的 CSS 校验，提高代码质量。在本篇文章中，我们将介绍该 npm 包的使用方法。
一、安装
在开始之前，请确保已经安装了 Node.js 和 npm。接下来，我们可以使用以下命令来安装 @savvy-css/stylelint-config-savvy：
npm install --save-dev @savvy-css/stylelint-config-savvy
二、配置
安装完成后，我们需要在项目的根目录中创建一个 .stylelintrc 文件，并将以下内容添加进去：
{
"extends": "@savvy-css/stylelint-config-savvy"
}三、使用
配置完成后，我们就可以运行以下命令来进行 CSS 校验：
stylelint **/*.css
或者，你可以在 package.json 文件的 scripts 中加入以下配置：
{
"scripts": {
"lint:css": "stylelint **/*.css"
}
}这样，你就可以在终端中使用 npm run lint:css 命令来执行 CSS 校验了。
四、版本升级
当 npm 包更新时，我们可以使用以下命令进行版本升级：
npm update @savvy-css/stylelint-config-savvy --save-dev
五、示例代码
以下是一个示例代码，演示了如何使用 @savvy-css/stylelint-config-savvy 进行 CSS 校验。
/* style.css */
.foo{
/* Some CSS */
background-color : #123;
width : 100px;
height : 100px;
}-- -------------------- ---- -------
-- ------------ --
-
---------- ------------------------------------
---------
----------------------- ----- -- --------------
------------------- - ------ ------ ------ -- ----- -------------
----------------------------------------------------- ----- -- ----------
---------------------------------------------------- ----- -- ----------------
-------------------------------------------- ----- -- ---------
--------------------------- ----- -- ---- ----------
----------------------------------------- -
-------- ------- -- ----- -- -------
--------- ------- -- ----- -- -------
------------ ------ ------ -- ----- -- - --- ---------
-
-
-执行 stylelint style.css 命令后，你将会看到以下提示信息：
style.css 3:20 ✘ Expected "#123" to be "#0123" color-no-invalid-hex
这表示我们的代码中出现了一个无效的颜色十六进制值，需要进行修改，从而避免出现潜在的风险。
六、总结
本篇文章主要介绍了如何使用 @savvy-css/stylelint-config-savvy 包进行 CSS 校验，从安装到配置、再到使用，一步步带领大家完成了整个流程，并给出了详细的示例代码，帮助大家更好地了解其使用方法和意义。希望读者们在日常的前端开发工作中，能够充分利用这款 npm 包，提高 CSS 代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea581e8991b448dc0ac