html一行显示in line,CSS 格式化 一行一条

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:HBuilderXpluginsformat

ode_modulesjs-beautifyjssrccsseautifier.js

注意不同语言的格式化脚本不同，这里是 CSSeautifier.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 }

引用自：https://ask.dcloud.net.cn/article/id-628