前端

用 Prettier 处理 Pug 文件

熊立丁

Feb 11, 2018 — 3 min read

Prettier 是一个新兴的代码格式化程序，但目前支持的语言相对有限，特别对于混合文件的处理仍在比较初级的阶段。

因此，针对 Riot 这种 HTML/Pug 中混合了 JavaScript 和 CSS 的文件，要对其中的代码进行格式化，必须先将文件分解，分别用 Prettier 处理后，再重新合并。

相比 HTML，处理 Pug 这种由缩进决定包含关系的文件倒是更简单，很容易通过一些简单粗暴的方法进行分解。

Prettier 本身也是一种广受欢迎的粗暴解决方案。它的主要动机就是通过将一种固定格式强加给代码，消灭不同风格间的优劣之辫，节约程序员在争辩中浪费的时间，集中精力办实事。因为大多数时候，主流风格间并没有明显的好坏，只是个人喜好不同。

文件分解

const split = (tag) => {
    var pug, script, style;
    [pug, script] = tag.split(/\n    script.*\.\n/);
    [pug, style] = pug.split(/\n    style.*\.\n/);
    if (style) {
        return [pug, script, style]
    }
    [script, style] = script.split(/\n    style.*\.\n/);
    return [pug, script || '', style || ''];
};

最初的版本是将文件切分成行后，找出 script 和 style 所在的行，然后进行分割。相对现在的版本，理论上更容易理解，但由于实际代码量大很多，在没有注解的情况下反而没个这个版本思路清晰了。

由于约定了缩进是 4 个空格，并要求显式包含 script 标签，riot 文件基础格式相对固定。

tagname
    // 标签

    script.
        // 脚本
    style.
        // 样式

另有几个变种，比如忽略 script 部分、忽略 style 部分、script 和 style 上下互换等，用上面这个函数都能处理，同时里面用到的正则表达式也能处理 script. 或 script(type="text/es6"). 等指定或不指定类型的情况。

格式化

[pug, script, style] = split(tag);
script = prettier.format(script, {tabWidth: 4, singleQuote: true, trailingComma: 'all', arrowParens: 'always'});
style = prettier.format(style, {parser: 'css', tabWidth: 4});

Prettier 具备对 JavaScript 文件和 CSS 文件的格式化能力，并允许少量参数调整，此处只要根据官方接口文档提供的信息，按照自己的项目需要进行配置即可。最主要是明确按照什么文件类型进行处理，并指定缩进宽度。

合并

const join = (pug, script, style) => {
    script = script
        ? '\n    script.' + ('\n' + script.trim()).replace(/\n/g, '\n        ') + '\n'
        : '';
    script = script.replace(/\n\s+\n/g, '\n\n');
    style = style
        ? '\n    style.' + ('\n' + style.trim()).replace(/\n/g, '\n        ') + '\n'
        : '';
    style = style.replace(/\n\s+\n/g, '\n\n');
    return pug + script + style;
};

const result = join(pug, script, style);

在合并的时候，我也采用了粗暴的方案，无论原来代码中脚本和样式哪个在前，我总是将脚本放在前面，并且统一丢弃了类型说明。在拼接前，先将每行代码缩进 8 个空格，再去除对空行的缩进和多余的换行。