前言
在前端开发的过程中，样式的编写是不可避免的一个任务。然而，多人协作的项目中，很容易出现编写的 CSS 样式不可统一、重复代码等情况。为了解决这些问题，我们常常会使用一些规范化的工具来标准化样式的编写。其中，stylelint 是一个非常好用的工具，可以对样式的编写进行规范化的检测。
在 stylelint 中，使用 stylelint-value-no-unknown-custom-properties 这个 npm 包可以检测到未定义的自定义 CSS 属性，以此来规范化样式的编写。有了它，不但可以避免出现一些错误的样式，还可以在项目开发过程中，规范样式编写，提高代码的可维护性。
安装
使用 npm 安装 stylelint-value-no-unknown-custom-properties，在命令行中输入：
--- ------- -------------------------------------------- ----------
安装完后，我们需要在 .stylelintrc 文件中进行配置。如果没有该文件，可以在项目根目录下创建一个，然后在其中进行配置。
-
---------- -
---------------------------
--
---------- -
----------------------------------------------
--
-------- -
------------------------------------- ----
-
-上面的配置执行了以下操作：
- 继承了
stylelint-config-standard配置，这个配置是 stylelint 官方提供的标准规范配置 - 引入了
stylelint-value-no-unknown-custom-properties插件 - 配置
value-no-unknown-custom-properties规则为true
使用
安装和配置完成后，我们可以使用 stylelint-value-no-unknown-custom-properties 开始样式规范检测了。
以下是一个示例的 CSS 代码：
---- - ---------------- -------- ------ ----------------- ------- ----------------- ----------------------- ------- ---------- ----- -
使用 stylelint-value-no-unknown-custom-properties 进行规范检测后，会出现如下的警告信息：
---------- ------- ------ -------- -------------- ---------------------------------- ---------- ------- ------ -------- -------------------- ----------------------------------
警告信息提示了我们，定义（使用）了未定义的 custom property。由于在未来某一天，这些 custom property 可能会被定义，如果我们使用了未定义的 property，那么这些代码就会变得不可维护。
因此，我们需要规范 CSS 样式编写，丢弃未定义的 property，从而避免出现以上的问题。
结语
使用 stylelint-value-no-unknown-custom-properties，我们可以规范样式的编写，提高代码可维护性。希望这篇文章对大家有所帮助。如果您还有任何问题，可以在评论区留言，我会尽快回复。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f02ac4e403f2923b035bd64