原本只是想简单的聊一下代码格式化的问题，无奈本文拖沓了很久，在此期间，我又思考了很多，我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字，可能叫“代码美化”更贴切一点，但是本文的深度远没有标题那么宏大。
在我看来，代码质量不仅体现在逻辑上，也要体现在形式上。尤其前端代码，在日渐复杂的单页面开发中，代码格式化不仅是为了美观，也是为了更好的阅读。关于代码的格式化并没有统一的标准，每个人都有自己的见解，所以本文的目的以探讨和推荐为主。
可能很少有人会去考虑这方面的问题，毕竟美化插件都是现成的，比如常用的 Prettier，只要一个快捷键就可以迅速格式化，但是代码格式化插件的标准并不一定是最好的。
本文范例主要以 Angular 为主，但是代码美化的建议同样适用于 React 和 Vue。
每行代码多少字符合适？关于代码字符数一直是一个争论不休的问题。在 规定了每行不超过 80 个字符。Prettier 默认也是 80 个字符。
赞成这条规范的人认为 80 个字符紧凑美观，在大屏显示器也可以分多栏显示。如下图所示：
我最开始也是赞成 80 个字符的建议，但是当我遵循这条规范写了近一年的 Angular 代码之后，我发现这条规范有一些缺陷。
首先这条规范是 Python 编码风格的建议，而 Python 的代码是以缩进代表代码块，类、函数等在定义时也没有大括号及小括号，算上括号前的空格，这就比一般的代码少几个字符。
其次现代的编程模式大多是面向对象的风格，类的继承、接口实现等都可能导致代码很长，在 Angular 中可能还会实现多个钩子函数的接口。
另外，Angular 的代码风格建议不要为了精简变量命名而损失易读性，所以很多时候函数命名可能很长，再加上类型系统及链式调用等，单行代码很容易超过 80 个字符，这样会造成过多的折行。
下面是一段使用 80 字符宽度格式化的 TS 代码：
我们再看一下扩大到 100 字符之后的效果：
这段代码或许还不是最典型的例子，但是也能看出两者的不同，在实际的业务当中，类似的折行可能更多，而从我个人的角度来看，过多的折行反而破坏了代码的完整度。目前每行代码的宽度有三种，分别是 80、100、120，很显然，80 太短，120 太长，以中庸之道，取 100 刚好。
模板格式化代码宽度对模板（html）的影响也很大，下面我们重点聊一下关于模板的格式化问题。以下是使用 Prettier 的默认设置格式化的效果。
上面这种格式化方案非常普遍，但是我个人并不喜欢这种格式化的效果，原因有以下几点：
开始标签末尾的尖括号看上去有点突兀。
所有属性全部换行，整体有些松散，模板代码可能变得很长。
标签和属性的区分度不高。
我比较喜欢下面的格式化方案，整齐紧凑，属性之间对齐，标签一目了然。
简单说一下上面这种格式化效果的方法：需要使用 VSCode 默认的 HTML 格式化插件。在 首选项-设置-扩展-HTML，设置 Wrap Attributes 属性，选择 preserve-aligned（保留属性的包装，但对齐），这个选项允许多个标签单行显示。
Prettier 好像无法实现（有了解的朋友可以留言）。
属性排序及建议最近在格式化代码的过程中，我总结了一套排序规则及格式化建议，大家可以参考一下。
属性排序给元素属性排序是一个可有可无的操作，但是合理的属性顺序同样有利于代码的阅读及检查。这和排列 CSS 属性顺序几乎是一样的。在编写 CSS 的时候，我会刻意的按照以下顺序排列属性：
Positioning
Box model
Typographic
Visual
Misc
详情参考 ，以下是元素属性排序建议：
模板引用变量
class
结构型指令
属性型指令
双向绑定属性
属性绑定
事件绑定
格式化建议五个及五个以下属性尽量不要强制换行
某些属性建议放在一起，比如 ngModel name，label value
元素标签尽量对齐（除单行元素外）
type 相关属性尽量前置
以下是根据以上规则格式化后的代码