npm 包 stylelint-config-pgb 使用教程

前言

随着前端开发的发展，CSS 代码的规范性越来越重要。stylelint 是一个功能强大的 JavaScript 工具，可以帮助开发者维持整洁、一致的 CSS 代码风格。本文将介绍如何使用 stylelint-config-pgb 这个 npm 包来帮助我们自动校验 CSS 的代码风格。

stylelint-config-pgb 是什么

stylelint-config-pgb 是基于 stylelint 的一个扩展包，它使用了 Postcss Guidelines Config 这个规则库，以及一些根据项目需求定制的规则。它可以帮助前端开发者快速、方便地配置 stylelint，进而使项目中的 CSS 代码风格规范。

安装和使用

安装

安装 stylelint-config-pgb 很简单，只需在项目中使用 npm 安装该包即可。

npm install --save-dev stylelint-config-pgb

配置

安装完成后，需要在项目中的 package.json 文件中配置一下：

"stylelint": {
  "extends": "stylelint-config-pgb",
  "rules": {
    // 对选项值进行自定义
  }
}

在上述代码中，extends 关键字告诉 stylelint 使用 stylelint-config-pgb 这个扩展包的规则集来校验 CSS 代码风格。其余的选项可以通过这种方式进行自定义。

使用

以 Vue 项目为例，我们可以使用以下命令进行校验：

"scripts": {
  "lint:css": "stylelint '**/*.vue' --syntax vue"
}

上面的命令会校验所有 .vue 文件中的 CSS 代码。

stylelint-config-pgb 的规则集

stylelint-config-pgb 中的规则集是从 Postcss Guidelines Config 中挑选出来的，默认启用了所有推荐的规则。 除此之外，stylelint-config-pgb 也添加了一些项目特定的规则，例如禁止使用空的类名、禁止使用字面量，以及对样式命名的特定要求等等。

总结

stylelint-config-pgb 可以帮助我们自动校验项目中的 CSS 代码风格，规范开发流程，提高代码质量。 在使用 stylelint-config-pgb 时，我们可以根据项目的实际情况，自定义一些特定的规则，以满足项目的需求。同时，我们也要注意遵守规范，写出高质量、易维护的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630581e8991b448e0e0d