介绍
Perfectionist 是一个基于 postcss 的 npm 包，它用于格式化 CSS 代码，使代码更易读、易于维护。它可以格式化缩进、插入空行以及其他一些常用的 CSS 格式化规则。Perfectionist 提供了大量选项来自定义格式化规则，以适应不同的项目需求。
安装
npm install perfectionist postcss
基本用法
在使用 perfectioninst 之前，需要先配置 postcss。在根目录下创建 postcss.config.js 文件，并添加以下内容：
module.exports = {
plugins: [
require('perfectionist')
]
}这里简单演示一下 perfectionist 的基本用法。创建一个 css 文件 main.css，内容如下：
-- -------------------- ---- ------- ---------- - ------- - ----- ----------------- ----- ------ ----- - ------- - -------- ------------- -------- ---- ----- ----------------- ----- ------ ----- -
在命令行运行：
npx postcss main.css --output build/bundle.css
执行完毕后，在 build 目录下会生成一个格式化后的 bundle.css 文件，其内容如下：
-- -------------------- ---- ------- ---------- - ------- - ----- ----------------- ----- ------ ----- - ------- - -------- ------------- -------- ---- ----- ----------------- ----- ------ ----- -
可以看到，Perfectionist 默认使用 2 个空格缩进，确保每个属性占用独立的行，保持了较好的可读性。
自定义选项
Perfectionist 提供了大量选项来自定义格式化规则，下面介绍一些常用的选项。
缩进宽度
在默认情况下，Perfectionist 会使用 2 个空格作为缩进。可以使用 indentWidth 选项来自定义缩进宽度：
module.exports = {
plugins: [
require('perfectionist')({
indentWidth: 4
})
]
}执行命令行后，可以看到生成的 CSS 代码已经使用 4 个空格缩进：
-- -------------------- ---- -------
---------- -
------- - -----
----------------- -----
------ -----
-
------- -
-------- -------------
-------- ---- -----
----------------- -----
------ -----
-描述符顺序
Perfectionist 默认将相关的 CSS 属性排列在一起（如在尺寸相关的属性中，width 总是排在 height 后面）。可以使用 propertyOrder 选项自定义描述符顺序：
module.exports = {
plugins: [
require('perfectionist')({
propertyOrder: 'alphabetical'
})
]
}执行命令行后，可以看到生成的 CSS 代码已经按照字母顺序排列了：
-- -------------------- ---- ------- ------- - ----------------- ----- ------ ----- -------- ------------- -------- ---- ----- - ---------- - ----------------- ----- ------ ----- ------- - ----- -
保留注释
Perfectionist 默认会删除 CSS 中的注释，可以使用 comments 选项来保留注释：
module.exports = {
plugins: [
require('perfectionist')({
comments: true
})
]
}执行命令行后，可以看到生成的 CSS 代码中保留了注释：
-- -------------------- ---- ------- ---------- - ------- - ----- -- ---------- ----- -- ----------------- ----- ------ ----- - ------- - -- ---------- ----- -- ----------------- ----- ------ ----- -------- ------------- -------- ---- ----- -
总结
通过本文的介绍，我们了解到了如何使用 Perfectionist 格式化 CSS 代码，并且了解了一些常用选项的用法。当我们在开发中需要美化或者格式化 CSS 代码时，Perfectionist 是一个非常方便的工具，它可以有效的提高编码效率以及代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61401