使用到的插件是 HTML/CSS/JS Prettify，
利用它，再加上正则技巧来达到我想要的HTML代码格式化效果。
1、原代码
2、格式化后代码
步骤：
首先，你要安装了HTML/CSS/JS Prettify 插件。
该插件需要依赖nodejs，所以你还必须在本机上安装了nodejs，然后成功设置nodejs的路径(Set `node` Path)：
我的是这样。
"node_path": { "windows": "D:/nodejs/node.exe" }
开始格式化。
1、代码区右键 -> HTML/CSS/JS Prettify -> Prettify Code，格式化当前代码。
格式化的效果图：
可以看到，红框区域还是乱的。
所以要对HTML/CSS/JS Prettify插件进行User设置。
Package Settings -> HTML/CSS/JS Prettify -> Prettify Preferences - User
添加如下代码，并保存。
"unformatted": ["", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"]
这句代码可以去HTML/CSS/JS Prettify -> Prettify Preferences - Default里找，
本来的代码里是包括"a"标签的，我们把"a"标签去掉。
再次格式化，右键 -> HTML/CSS/JS Prettify -> Prettify Code，看看效果。
代码整齐了。
但我一般喜欢<li><a>...</a><li>这种代码格式的。此时不需要a标签另起一行。
那么，就要用到正则代码来替换换行的情况了。
快捷键：Ctrl+H，调出替换工具。
输入代码：
注意：左边的*号要选中，这个是使用正则的意思。
查找：(<li.*>)\n\s*(<a)|(</a>)\n\s*(</li>)
替换：$1$2$3$4
然后，替换所有(Replace All)
效果如下。
有效果了，变成，<li><a>...</a></li>格式了。
不过有一处，我居然</a>给另起一行了，所以再进行正则替换。
Ctrl+H，
查找：\n\s*(</a>)
替换：$1
替换所有(Replace All)。
给不懂正则的同学解释一下，这个正则的意思。
\n：区配换行
\s：匹配空格
\s*：匹配任意多个空格
()：这里的用途是对应我下面的$1
$1：会获取上面正则中()括起来的内容
最终效果：