在 vscode 裡面採用 Prettier 做程式碼格式統一的設定。

使用的理由：

通常在撰寫程式碼的時候會因為每個人的習慣導致程式碼格式大家都不一樣。

例如：

有人的

if (xxx) {}

有人的

if (xxx)

{

}

雖然在使用Typescript 在 vscode 的時候會有一些簡易的格式除錯。但是這個軟體與套件可以在你存檔的時候自動調整格式，讓大家開發的時候格式會一致。

安裝方式：

首先我們在專案底下透過 npm 或是 yarn 安裝 prettier ，由於是輔助我們寫程式小軟體所以採用 --dev 的方式來安裝。

Yarn:
$ yarn  add prettier  --dev

Npm:
$ npm install prettier --save-dev


然後開啟vscode 安裝支援 vscode 的套件～『 prettier - code formater 』

prettier code formater

之後可以在 vscode 裡的設定( Ctrl + , ) 搜尋 Prettier 把他的設定畫面叫出來。

裡面大約有18種格式可以設定，至於每個項目是設定什麼的可以參考官方這裡的 configure 網站。

Prettier 的設定會寫在 settings.json (ubuntu 位在 /home/你的帳號名稱/.config/Code/User/settings.json) 內：

"prettier" 開頭的就是這個套件的設定檔。這邊個人建議加上 "editor.formatOnSave" : true  這樣可以在每次存檔的時候自動幫你調整格式。

設定好了你可以找一個 typescript 打一些程式碼然後做儲存的動作就會發現 Prettier會自動幫你調整格式。

這個軟體支援的程式語言蠻多的，所以在網頁開發的時候蠻好用的。

REF :

• Prettier
• 導入 Prettier