代码美化的艺术

时间 2019-11-06

标签代码美化艺术繁體版

原文原文链接

Ng-Matero 中文版文档已经发布点击查看

前言

本来只是想简单的聊一下代码格式化的问题，无奈本文拖沓了好久，在此期间，我又思考了不少，我愈来愈以为代码格式化是一门艺术。为了陪衬“艺术”二字，可能叫“代码美化”更贴切一点，可是本文的深度远没有标题那么宏大。css

在我看来，代码质量不只体如今逻辑上，也要体如今形式上。尤为前端代码，在日渐复杂的单页面开发中，代码格式化不只是为了美观，也是为了更好的阅读及检查。关于代码的格式化并无统一的标准，每一个人都有本身的看法，因此本文的目的以探讨和推荐为主。html

可能不多有人会去考虑这方面的问题，毕竟美化插件都是现成的，好比经常使用的 Prettier，只要一个快捷键就能够迅速格式化，可是代码格式化插件的标准并不必定是最好的。前端

本文范例主要以 Angular 为主，可是代码美化的建议一样适用于 React 和 Vue。python

欢迎关注基于 Angular Material 的中后台管理框架 Ng-Matero

关于代码字符数一直是一个争论不休的问题。在 Python编码风格指导(PEP8) 规定了每行不超过 80 个字符。Prettier 默认也是 80 个字符。git

同意这条规范的人认为 80 个字符紧凑美观，在大屏显示器也能够分多栏显示。以下图所示：github

我最开始也是同意 80 个字符的建议，可是当我遵循这条规范写了近一年的 Angular 代码以后，我发现这条规范有一些缺陷。编程

首先这条规范是 Python 编码风格的建议，而 Python 的代码是以缩进表明代码块，类、函数等在定义时也没有大括号及小括号，算上括号前的空格，这就比通常的代码少几个字符。框架

其次现代的编程模式大可能是面向对象的风格，类的继承、接口实现等均可能致使代码很长，在 Angular 中可能还会实现多个钩子函数的接口。ide

另外，Angular 的风格指南建议不要为了精简变量命名而损失易读性，因此不少时候函数命名可能很长，再加上类型系统及链式调用等，单行代码很容易超过 80 个字符，这样就会形成过多的折行。函数

下面是一段使用 80 字符宽度格式化的 TS 代码：

咱们再看一下扩大到 100 字符以后的效果：

这段代码或许还不是最典型的例子，可是也能看出二者的不一样，在实际的业务当中，相似的折行可能更多，而从我我的的角度来看，过多的折行反而破坏了代码的完整度。目前经常使用的代码宽度有三种，分别是 80、100、120，很显然，80 过短，120 太长，以中庸之道，取 100 恰好。

代码宽度对模板（html）的影响也很大，下面咱们重点聊一下关于模板的格式化问题。如下是使用 Prettier 的默认设置格式化的效果。

上面这种格式化方案很是广泛，可是我我的并不喜欢这种格式化的效果，缘由有如下几点：

我比较喜欢下面的格式化方案，整齐紧凑，属性之间对齐，标签一目了然。

简单说一下上面这种格式化效果的方法：须要使用 VSCode 默认的 HTML 格式化插件。在 首选项-设置-扩展-HTML，设置 Wrap Attributes 属性，选择 preserve-aligned（保留属性的包装，但对齐），这个选项容许多个标签单行显示。

Prettier 好像没法实现（有了解的朋友能够留言）。

最近在格式化代码的过程当中，我总结了一套排序规则及格式化建议，你们能够参考一下。

给元素属性排序是一个无关紧要的操做，可是合理的属性顺序一样有利于代码的阅读及检查。这和排列 CSS 属性顺序几乎是同样的。在编写 CSS 的时候，我会刻意的按照如下顺序排列属性：

详情参考 Code Guide，如下是元素属性排序建议：

如下是根据以上规则格式化后的代码

我以为模板和函数很是相似，模板属性就比如函数参数。若是使用 Prettier 进行格式化，函数字符超出限制以后，全部参数默认所有折行显示，这种方式的潜在问题和模板属性折行的问题很是相似，我以为函数参数若是也能用 preserve-aligned 可能会更好，可是 VSCode 没法作到这一点。

谷歌推荐 clang-format 进行格式化，初步试了一下，并无达到满意的效果，可能配置文件有点问题。我以为关于函数的格式化问题暂时能够没必要深究。

代码美化只是一种形式，它不会对逻辑产生任何影响，可是好的代码格式会间接影响咱们编码的速度，甚至影响到代码的质量。

本文篇幅有限，也有不少不当之处，若是读者对代码美化有更好的建议，欢迎留言评论。