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 }
引用自:https://ask.dcloud.net.cn/article/id-628