Perfectionist 轻量级 CSS 代码格式化插件

发布于 2019-12-11 19:31:07 字数 3906 浏览 1437 评论 0

Perfectionist 是一个轻量级的 CSS 代码格式化插件,这个插件不仅可以格式化 CSS 代码,也可以压缩 CSS 代码,支持同属性缩进、自定义缩进字符数等特点。

安装

你可以通过 npm 安装 Perfectionist,通过下面的示例代码:

npm install perfectionist --save

运行示例

说的再多都是白搭,看到示例效果才是真的,下面的是一个简单的示例,例如我们输入如下的 CSS 代码:

h1   {
         color   :  red }

输出的方式大概有三种

/*格式化输出*/
h1 {
    color: red;
}

/*紧凑输出*/
h1 { color: red; }

/*压缩输出*/
h1{color:red}

API

perfectionist.process(css, [options])

css

Type: string Required option.

Pass a CSS string to beautify it.

options

cascade

Type: boolean Default: true

Set this to false to disable visual cascading of vendor prefixed properties. Note that this transform only applies to the expanded format.

true
h1 {
    -webkit-border-radius: 12px;
            border-radius: 12px;
}
false
h1 {
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
format

Type: string Default: expanded

Pass either expanded, compact or compressed. Note that the compressed format only facilitates simple whitespace compression around selectors & declarations. For more powerful compression, see cssnano.

indentSize

Type: number Default: 4

This number will be used as a basis for all indent levels, using the expanded format.

maxAtRuleLength

Type: boolean|number Default: 80

If set to a positive integer, set a maximum width for at-rule parameters; if they exceed this, they will be split up over multiple lines. If false, this behaviour will not be performed. Note that this transform only applies to the expanded format.

maxSelectorLength

Type: boolean|number Default: 80

If set to a positive integer, set a maximum width for a selector string; if it exceeds this, it will be split up over multiple lines. If false, this behaviour will not be performed. Note that this transform is excluded from the compressed format.

maxValueLength

Type: boolean|number Default: 80

If set to a positive integer, set a maximum width for a property value; if it exceeds this, it will be split up over multiple lines. If false, this behaviour will not be performed. Note that this transform only applies to the expanded format.

sourcemap

Type: boolean Default: false

Generate a sourcemap with the transformed CSS.

syntax

Type: string

Specify scss if you would like to also format SCSS-style single line comments. This loads the postcss-scss plugin.

postcss([ perfectionist(opts) ])

perfectionist can also be consumed as a PostCSS plugin. See the documentation for examples for your environment.

CLI

perfectionist also ships with a CLI app. To see the available options, just run:

$ perfectionist --help

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

末蓝

文章 0 评论 0

年少掌心

文章 0 评论 0

党海生

文章 0 评论 0

飞翔的企鹅

文章 0 评论 0

鹿港小镇

文章 0 评论 0

wookoon

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文