Perfectionist 轻量级 CSS 代码格式化插件
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论