候补的神
候补的神
  • 发布:2016-05-01 11:38
  • 更新:2022-08-26 19:33
  • 阅读:15677

CSS 自动验证格式化排序 一行一条 [新]

分类:HBuilderX

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;}
17 关注 分享
DCloud_heavensoft m***@163.com 无聊的纠结 肖邦 深井冰_01 五叶神 h***@foxmail.com _LHH_ PownDs 羅 lhyh 辰溪 m***@126.com 聆听心语 彳余001 testmac 巅峰丶北北

要回复文章请先登录注册

泛白的夜

泛白的夜

不会搞这个... npm应该是安装了node.js后有的吧?更新了下npm现版本成了是8.18,但是还是不能按一行显示...这个“validate-stylelint 文件夹下执行 [ npm up ] 更新依赖”怎么操作?有没有人懂的求教。或者除了作者这个方法还有没有别的方法?
2022-08-26 19:33
一片云

一片云

回复 泛白的夜 :
"dependencies": {
"csslint": "^1.0.5",
"stylelint": "^9.3.0",
"stylelint-config-standard": "^18.2.0", // 新增
"stylelint-config-recess-order":"^2.4.0" // 新增
}

改了之后需要更新下依赖 npm 知道吧
npm up
2021-09-26 21:53
泛白的夜

泛白的夜

package.json文件中发现有两个"command"数组于是在这两个下面都添加了"--fix"参数,
.stylelintrc.js文件则是直接用你提供的附件覆盖了原来的文件,
但是测试的时候没能成功变成一行一条...
2021-09-05 17:59
候补的神

候补的神 (作者)

以下码友们提供的修改是针对之前的版本,新方法请忽略。
2021-05-30 00:56
t***@163.com

t***@163.com

修改
[294] this.eatWhitespace(); 去除参数true
[295] // this._output.add_new_line(); 注释掉
[298] // this._output.add_new_line(); 注释掉
[314] this.eatWhitespace(); 去除参数true
[362] this.eatWhitespace(); 去除参数true
[369] this._output.add_new_line(); 注释掉
---------------------------------
添加修改(以下两行下载的文件中未修改)
[393] this.eatWhitespace(); 去除参数true)
[395] // this._output.add_new_line(); 注释掉
2020-04-02 16:28
2***@163.com

2***@163.com

漏了[395] // this._output.add_new_line(); 注释掉
2020-02-17 14:41
候补的神

候补的神 (作者)

回复 3***@qq.com :
新增规则
"newline_between_rules": false,

工具 > 插件配置 > format > jsbeautifyrc.js

module.exports = {
parsers: {
...
},
options: {
...
"newline_between_rules": false,
}
}
2019-12-22 11:16
3***@qq.com

3***@qq.com

用了之后 每一行都空一行了
2019-12-18 14:00
2***@163.com

2***@163.com

用你的方法真的好用,但是格式代码后,为什么会每行代码后多出空白行来,可有办法解决?
2019-12-12 10:53
2***@qq.com

2***@qq.com

漏了[393] this.eatWhitespace(); 去除参数true
2019-05-09 18:17