在vue裡面寫pug真的有這麼恐怖嗎？

前言

許久之前有開過一個vue3專案，template我使用pug來寫，基本上用得還算順利。除了一開始不會自動排版，但也靠vetur解決了（雖然vetur那時跟volar打架，但後來也還算完美落幕）。一直到這兩天我從新起了一個專案，憑藉對ts及vue的熟悉，我突然感覺到不太對勁：不光是template幾乎不會報錯、ts不會自動跳出提示，連格式化也失靈了。因此我開始上網求助

網路大神果然不會讓我失望，清一色都是叫我儘早放棄，把pug說的要多糟有多糟，支援要多差有多差。

洨編連團隊的道歉信都寫好了，準備要把所有template改回html，最終看到圖片中那則留言，想說死馬當活馬醫吧。再試一回，結果真讓我試出來了。以下來記錄一下

備註一下，以下小編都是使用vscode及相關套件進行處理

首先是format的部分（prettiers extension請先安裝好）

yarn add -D prettier @prettier/plugin-pug

// .prettierrc

{

"semi": false,

"trailingComma": "es5",

"singleQuote": false,

"printWidth": 150,

"tabWidth": 2,

"pugClassNotation": "attribute",

"pugExplicitDiv": true,

"pugSortAttributes": "asc",

"pugSortAttributesBeginning": [],

"pugSortAttributesEnd": [

"v-for",

"^:",

"^@",

"^v-"

],

"plugins": ["@prettier/plugin-pug"]

}

這樣就可以使用prettier進行format了（我還以為prettier什麼都支援，原來需要外掛），後面那些設定大家可以自行調整，洨編是依照個人喜好設定

再來是vscode typescript compiler的部分

yarn add -D @vue/language-plugin-pug

// tsconfig.json

{

  "vueCompilerOptions": {

"plugins": ["@vue/language-plugin-pug"]

}

}

這樣類別及型別錯誤什麼的就可以正常辨識了。

不過網路大神講得這麼恐怖，或許其中還有什麼未知的問題等待我去挖掘，總之我提出的三個問題暫時是解決了，至於未來.....的事交給未來的我去解決吧！

又過了驚險的一天，收工下班！