zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    logstash日志分析的配置和使用
    实现跨浏览器html5表单验证
    CSS常见居中讨论
    centos7 初始化脚本
    elasticsearch+logstash+redis+kibana 实时分析nginx日志
    centos7 系统优化
    cAdvisor+InfluxDB+Grafana 监控Docker
    Docker三剑客之Docker Swarm
    Docker三剑客之常用命令
    Docker三剑客之Docker Compose
  • 原文地址:https://www.cnblogs.com/lxf1117/p/12433221.html
Copyright © 2011-2022 走看看