解决Prettier HTML闭合标签总是另起一行的问题

1. 问题描述

Prettier在格式化HTML的时候存在一个“问题”，比如我们期望得到这种结果：

<v-text-field
	       dense
           v-model="foo"
           label="bar">
</v-text-field>

但Prettier会输出成：

<v-text-field
	       dense
           v-model="foo"
           label="bar"
>  （注意就是这个地方它另起一行了）
</v-text-field>

确切地说它总是会将闭合HTML标签的 > 号另起一行，尽管不会对结果产生实际影响，但是看起来特别丑，对于强迫症患者来说比较难以接受。

实际上Prettier在处理10个字符以内的HTML标签是不做折行处理，比如：

 <a123456789 dense v-model="foo" label="bar"></a123456789>

但是一旦标签字符数超过10个，就会这样：

  <a1234567890
    dense
    v-model="foo"
    label="bar"
  ></a1234567890>

曾经按照网上的经验，尝试改变过这个设置：
"htmlWhitespaceSensitivity": "ignore"
不知道是因为版本变化还是其他原因，此方法无效。

---

2. 解决方案

官方似乎也意识到了这个问题，并且有一个对应方案，就是 --jsx-bracket-same-line 选项，但这个选项仅对React生效，如果是Angulla或者Vue这样的框架，则毫无办法，因此我们只能强行修改其源代码来实现了。

第1步：更新nodejs
dnf -y remove nodejs (先卸载自带的nodejs)
mkdir node14 && cd node14
wget https://nodejs.org/dist/v14.17.0/node-v14.17.0-linux-x64.tar.xz
dnf -y install xz
xz -d node-v14.17.0-linux-x64.tar.xz
tar -xvf node-v14.17.0-linux-x64.tar
vim ~/.bash_profile
在PATH=$PATH这行尾部加上:/root/node14/bin (按实际路径填写)
​存盘退出。
让设置生效：source ~/.bash_profile
node -v (如显示版本号则说明OK)
npm -g install yarn (装yarn)

---

第2步：修改prettier
git clone https://github.com/prettier/prettier

我克隆的时候是2.3.0版本，将来代码可能会变，只能请诸君自行研究了

vim /root/software/prettier/src/language-html/printer-html.js

找到：parts.push(node.isSelfClosing ? line : softline); 
改为：parts.push(node.isSelfClosing ? line : ""); 

存盘退出。

---

第3步：重新编译prettier
yarn install (安装依赖)
yarn run build （开始编译）

build脚本因为使用的是Linux命令（比如rm -rf之类），所以在Windows下错误极多，为了省事，建议在Linux下执行。

编译完成后，其结果会保存在: /dist 目录里。

因为nodejs所谓的 “编译” 并不是生成二进制代码，所以平台并不重要，即使是在Linux下编译的结果，一样可以原封不动地用在Windows下。

将/dist目录的全部内容拷贝并覆盖到：

1. Windows：C:\Users\用户名\AppData\Roaming\npm （默认安装路径在此）
2. Linux ：/root/node14/lib/node_modules/prettier/bin (根据上一步安装的实际路径而定)

---

正常情况下，这样问题就解决了，但如果你是用Vim，而且用到了autoformat这个插件的话，还需要做以下修改：

修改 vim-autoformat
插件位置： \plugged\vim-autoformat\plugin\defaults.vim
找到：let g:formatdef_prettier 这行
将其改为：
let g:formatdef_prettier = ‘“prettier --stdin-filepath “.expand(”%:p”)’
存盘退出。

结束。

---

后记：

关于这个问题的吐槽是从这个帖子开始的：

https://github.com/prettier/prettier/issues/5377

帖子里 adamJLev 网友非常给力，尽管因为版本变化他的修改方案已经失灵了，但没有他这个思路，我也不知道该如何下手，在此表示感谢！