1. 問題描述

Prettier在格式化HTML的時候存在一個“問題”，比如我們期望得到這種結果：

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

但Prettier會輸出成：

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

確切地說它總是會將閉合HTML標簽的 > 號另起一行，盡管不會對結果產生實際影響，但是看起來特別丑，對于強迫癥患者來說比較難以接受。

實際上Prettier在處理10個字符以內的HTML標簽是不做折行處理，比如：

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

但是一旦標簽字符數超過10個，就會這樣：

<a1234567890densev-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目錄的全部內容拷貝并覆蓋到：

Windows：C:\Users\用戶名\AppData\Roaming\npm （默認安裝路徑在此）

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 網友非常給力，盡管因為版本變化他的修改方案已經失靈了，但沒有他這個思路，我也不知道該如何下手，在此表示感謝！

總結

以上是生活随笔為你收集整理的解决Prettier HTML闭合标签总是另起一行的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。