H5W3
当前位置:H5W3 > uniapp技术问答专区 > 正文

CSS 格式化 一行一条 – 2019-12-22

HBuilder的JS,HTML,CSS格式化使用 js-beautify 插件(https://github.com/beautify-web/js-beautify)
格式化插件不支持 一行,经过一番折腾基本满足需求,现提供修改方法以供参考。


HBuilderX 1.8.2 (2019-04-10) 更新新版本设置方法,这里已修改css脚本为例。
新版本给出了插件配置项,但js-beautify@1.8.8 插件本身没有提供一行格式的参数项。因此只能手动修改插件,非常简单。

脚本文件位置
X:\HBuilderX\plugins\format\node_modules\js-beautify\js\src\css\beautifier.js
注意不同语言的格式化脚本不同,这里是 CSS\beautifier.js

修改方法:
1、修改 this.eatWhitespace(true) 为 this.eatWhitespace()
去除参数 true 则 清除空格但不插入换行
2、去除或注释掉 this._output.add_new_line();
不插入换行

修改
…} else if (this._ch === ‘{‘) {
[294] this.eatWhitespace(); 去除参数true
[295] // this._output.add_new_line(); 注释掉
} else if (this._ch === ‘}’) {

[298] // this._output.add_new_line(); 注释掉

[314] this.eatWhitespace(); 去除参数true

} else if (this._ch === ‘;’) {

[362] this.eatWhitespace(); 去除参数true

[369] this._output.add_new_line(); 注释掉
}

可参照行修改,或直接下载(下方附件)修改过的文件替换即可。


2019-12-22 补充 行间多了个换行

新增规则
“newline_between_rules”: false,

工具 > 插件配置 > format > jsbeautifyrc.js
module.exports = {
parsers: {

},
options: {

“newline_between_rules”: false,
}
}


注意:我仅针对普通CSS做了测试,如果是less、sass还请自行使用语法验证,若发现问题还需同志们一起努力。

h1,
h2{
margin-top: 0;
margin-bottom: 10px
}
h3 {
margin-top: 0;
margin-bottom: 10px
}
h1, h2{ margin-top: 0; margin-bottom: 10px}
h3{ margin-top: 0; margin-bottom: 10px }

本文地址:H5W3 » CSS 格式化 一行一条 – 2019-12-22

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址