HBuilderX 的 CSS格式化使用 js-beautify 插件, 这玩意不能格式化成一行,现提供新的的方法。
官方插件市场安装插件 validate-stylelint
该插件在 保存时 进行语法校验,提示错误,自动修复 。我们可借助 [一行规则+自动修复]来自动格式化,并增加一个排序功能。
截至 v1.0.6 版本 没有开启【自动修复】,暂需自行修改插件。若插件更新并开启自动修复,可忽略修改步骤。
安装后 ,插件文件夹 x:\HBuilderX\plugins\validate-stylelint
1、改造插件,开启自动修复,添加排序插件
修改文件 package.json
1-1、在命令数组最后添加个 "--fix" 参数 开启修复
"command": [
....
"${pluginPath}",
"${file}", // 逗号分隔
"--fix" // 这里添加
]
1-2、添加排序插件
"dependencies": {
.....
"stylelint-config-standard": "^18.2.0",
"stylelint-config-recess-order": "^2.4.0" // 添加
}
validate-stylelint 文件夹下执行 [ npm up ] 更新依赖
2、新增排序扩展 和 一行 规则
修改规则文件 .stylelintrc.js
"extends": [
"stylelint-config-recommended",
"stylelint-config-recess-order" // 添加
],
"rules": {
// 自定义一行规则 见附件
}
h1,
h2{
color:#fff;
margin-top: 0;
top: 10px;
}
// 自动格式化+排序
h1, h2{ top: 10px; margin-top: 0; color:#fff;}