介绍
stylelint 是一个能够帮助开发者维护一致的代码风格的 JavaScript 工具，它可以对 CSS、SCSS 和 Less 等样式文件进行静态分析，并发现并输出违反定义的规则的问题。
stylelint-config-pv 是一个为 stylelint 提供预定义配置的 npm 包，其样式规则完全可自定义。
本文将着重介绍如何使用 stylelint-config-pv 包，让你的前端项目更加规范化。
安装
在使用 stylelint-config-pv 之前，确保已经安装 stylelint 包，否则将无法使用 stylelint 的功能。
npm install stylelint stylelint-config-pv
配置
配置的一般方法是在项目里添加一个 .stylelintrc.js 文件，具体内容如下：
module.exports = {
extends: ['stylelint-config-pv'],
rules: {},
};在上述配置中，我们将当前配置文件基础继承自 stylelint-config-pv, 同时可以在一个新的 rules 属性中，自定义规则。
自定义配置规则
可以通过以下方式指定自定义规则：
-- -------------------- ---- -------
-------------- - -
-------- ------------------------
------ -
------------------ --
--------------------------------------- -----
-------------------------------- -
---------
-
------- -----------------
------- ----------------------
--
--
--
--规则列表
本节包含 stylelint-config-pv 中定义的所有规则，以及如何在你的项目中使用它们。
css 中的通用规则
-- -------------------- ---- -------
-
-- ----
---------------------------- -
-- ---
---------
-- ---
-
------- -----------------
------- ------------------
-------------- ------ --------
--
--
-css 中的标识符规则
{
// 定义规则
'declaration-no-important': true,
// ...
}更多规则列表，可以参考 stylelint 中的规则文档 来查看。
管理多个样式文件
如果你的项目中包含多个样式文件，则对每个样式文件进行配置显得过于繁杂。在这种情况下，可以考虑在项目的根目录下创建一个 styles 文件夹，然后在该文件夹下添加一个 .stylelintignore 文件。该文件告诉 stylelint 忽略此文件夹中的文件，而将注意力集中在项目的其他部分。
示例 .stylelintignore 文件的内容如下：
# styles folder styles/* # 宿主文件 !styles/main.scss
结论
通过使用 stylelint-config-pv 包，可以帮助前端项目更好地维护样式表标准化程度，极大提高代码质量。通过本文，你应该已经熟悉了如何使用 stylelint-config-pv 包，以及如何自定义配置规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53e1c