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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM