Prettier - Elevate Code Formatting to a New Level of Readability!

Prettier 是一個 Code formatter，它提供了統一程式碼風格（Coding Style）的功能。

網站名稱：Prettier - Code formatter

網站鏈結：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

雖然也可以透過使用 npm 安裝 Prettier，但 Prettier 在 VScode 上有方便設定的擴展套件就使用吧！

若透過 npm 指令將 Prettier 安裝為開發依賴項的話，要先在終端輸入：

npm install --save-dev prettier

為了要指定程式碼格式化的規則，需要在專案根目錄下創建一個 Prettier 配置文件，名字可以取做 .prettierrc、.prettierrc.json、.prettierrc.js 或是 prettier.config.js 等，例如：

module.exports = {
    semi: true,
    singleQuote: true,
    tabWidth: 2,
    trailingComma: 'es5',
    arrowParens: 'always',
    printWidth: 80,
};

而使用的方式有兩種：

第一種是手動運行指令來格式化文件

npx prettier --write "src/**/*.js"

第二種是先在 package.json 中的 "scripts" 部份定義一個 npm 腳本運行 Prettier

"scripts": {
  "format": "prettier --write \"src/**/*.js\""
}

再來透過運行另一個指令使用這個腳本

npm run format

這將會運行 Prettier 並對指定目錄下所有 .js 格式化。

由此可發現如果沒用 VScode 擴展套件需要每次都執行很麻煩 :3....

如果直接安裝，並在 VScode setting 中對於 Prettier 進行設定完畢後，只要按鍵 ctrl+S 就可以自動排版存儲了！