你終究要用 Prettier，為什麼不一開始就用「Prettier」呢？

前言

在我們前端開發中，有一個非常重要的工具你一定要會用，也就是 Prettier，就算你現在不用，未來你也一定會用到，那為什麼不一開始就用「Prettier」呢？所以這一篇就來介紹如何使用 Prettier 吧！

Prettier 是什麼？

首先，按照慣例我們還是要知道一下 Prettier 是什麼東西吧！

你在開發的時候，不論是團隊或者個人開發，你應該看過以下狀況吧？明明都是寫一樣的功能，但是風格卻花樣百出，這樣講應該滿模糊的，所以我們就來看一下實際的例子吧！

A 開發者風格：

1
2
3
4
5

function hello (name){
  return "Hello, "+name+"!"
}

console.log(hello("World"))

B 開發者風格：

1
2
3
4
5

function hello(name) {
  return `Hello, ${name}!`;
}

console.log(hello('World'));

我們可以看到兩個人撰寫的風格很明顯不同，目前來講可能沒有很大的差異，但是當專案越來越大，後續又加入了其他開發者的話，那這專案就會非常爆炸，因為我們在開發上其實都會需要維護他人的程式碼，這時候如果每個人的風格都不一樣，那閱讀起來就會非常困難，所以我們就需要一個工具來統一程式碼的風格，也就是我們這一篇要介紹的 Prettier。

Prettier 安裝

首先我們先準備一下環境與範例程式碼

1
2
3
4

mkdir prettier-example
cd prettier-example
npm init -y
touch index.js

而 index.js 內容呢？別擔心，我也幫你準備好了，你只要複製貼上就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function hello (name){
  return "Hello, "+name+"!"
}

const data = [{
  id: 1,
  name: 'Ray',
  color: 'red'
},{
  id:2,
  name: 'Ray2',
  color: 'blue'
},
{
  id:3,
  name: 'Ray3',
  color: 'green'
},
{
  id:4,
  name: 'Ray4',
  color: 'red'
}]

function getRedColor(data){
  const filterData = data.filter(function (item){
    return item.color === 'red'
  })

  return filterData
}

console.log(hello("Ray"))
console.log(getRedColor(data))

接下來呢？接下來我們要安裝 Prettier 了，我們可以在官方文件中找到以下指令

1

npm install --save-dev --save-exact prettier

Note
--save-exact 是在告知 npm 安裝該套件時，不要有版本號的變動（意指 ^ 或 ~），這樣才能確保每次安裝的版本都是一樣的，而不會因為版本號的變動而導致程式碼的不一致。

安裝完畢後，接著輸入以下指令建立一個 .prettierrc 檔案

1

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

或者你也可以直接在專案根目錄建立一個 .prettierrc 檔案，內容如下

1

{}

（內容不用擔心，後續會介紹）

我們可以在 package.json 中新增一個 script 讓我們可以直接使用 Prettier 自動修正程式碼

1
2
3
4
5

{
  "scripts": {
    "prettier": "prettier --write ."
  }
}

接下來你只需要執行 npm run prettier 就可以看到程式碼被修正了！

很方便吧？透過 Prettier 我們可以很快速的幫助我們修正程式碼。

Prettier 設定

但是我們實際專案開發上，專案還是會有自己團隊的撰寫風格，那這時候該怎麼辦呢？

不用擔心，我們在前面不是有建立一個 .prettierrc 檔案嗎？我們就可以透過這個檔案來設定 Prettier 的風格。

那麼常見的設定有哪些呢？這邊我列出一些比較常見的設定調整：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "printWidth": 80, // 超過 80 個字元就換行
  "tabWidth": 2, // 程式碼縮排 2 個空格
  "useTabs": false, // 不使用 tab，預設使用空格
  "semi": true, // 語句結尾加上分號
  "singleQuote": true, // 使用單引號，預設使用雙引號
  "quoteProps": "as-needed", // 預設 'as-needed'，只有在屬性名稱包含特殊字元或空格時才會使用雙引號。否則，它將使用單引號。
  "trailingComma": "es5", // 在物件或陣列最後一個元素後面加上逗號
  "bracketSpacing": true, // 在物件的左右括號間加上空格
  "arrowParens": "always", // 箭頭函式只有一個參數時，也需要括號
  "endOfLine": "lf", // 換行符號，預設 lf
}

Note
Prettier 其實還有很多設定，你可以在這個頁面找到更多的設定 Prettier Options。

當你將以上設定貼到 .prettierrc，之後你就可以試著執行 npm run prettier 看看程式碼有沒有依據你的設定進行修正囉！

理論上你程式碼會變成以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

function hello(name) {
  return 'Hello, ' + name + '!';
}

const data = [
  {
    id: 1,
    name: 'Ray',
    color: 'red',
  },
  {
    id: 2,
    name: 'Ray2',
    color: 'blue',
  },
  {
    id: 3,
    name: 'Ray3',
    color: 'green',
  },
  {
    id: 4,
    name: 'Ray4',
    color: 'red',
  },
];

function getRedColor(data) {
  const filterData = data.filter(function (item) {
    return item.color === 'red';
  });

  return filterData;
}

console.log(hello('Ray'));
console.log(getRedColor(data));

忽略檔案

我們專案內可能有些檔案是不想要被 Prettier 修正的，例如…build 出來的檔案，這時候我們就可以在根目錄下新增一個 .prettierignore 檔案，並且在內容中加入以下內容

1

build

這樣子就可以避免 Prettier 修正 build 出來的檔案囉！

Prettier VSCode 設定

VSCode 身為我們最常使用的開發工具，當然也要讓他支援 Prettier，這樣我們就可以在開發的時候，直接透過快捷鍵就可以修正程式碼，所以請你打開 VSCode，並且安裝以下套件：

• Prettier - Code formatter

接著打開你就可以使用快捷鍵 Option + Shift + F（Mac）或者 Alt + Shift + F（Windows）來修正程式碼囉！

如果無效的話，有兩種可能性：

沒有預設格式化方式

你可以到 VSCode 中搜尋「Editor: Default Formatter」並設定成「Prettier - Code formatter(esbenp.prettier-vscode)」，這樣就可以點右鍵或者使用快捷鍵修正程式碼。

針對語言覆寫的編輯器設定

另一種可能性是你曾經設定過以下

1
2
3
4
5
6
7

{
  // ... 其他設定
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // ... 其他設定
}

這個設定是針對 JavaScript 語言覆寫的編輯器設定，所以你可以將他改成以下

1
2
3
4
5
6
7

{
  // ... 其他設定
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // ... 其他設定
}

這樣子你在使用快捷鍵修正程式碼就會生效囉！

如果兩者都設定之後，基本上你的 VSCode 設定會變成以下

1
2
3
4
5
6
7
8

{
  // ... 其他設定
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ... 其他設定
}

儲存時自動修正程式碼

每次都要按快捷鍵才格式化程式碼其實很麻煩，所以這邊我們可以在 VSCode 設定中加入另一個設定，也就是 formatOnSave，加入方式也很簡單，只需要針對特定語言加入即可

1
2
3
4
5
6
7
8

{
  // ... 其他設定
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  // ... 其他設定
}

這樣當你按下 Command + S（Mac）或者 Ctrl + S（Windows）時，就會自動幫你修正程式碼囉！

Prettier 與 ESLint 有什麼差異？

這兩者可以說是最容易被混淆的東西，因為他們都是用來幫助我們統一程式碼風格的工具，但是他們的差異在哪裡呢？

Prettier 最主要是幫助我們統一程式碼風格，而 ESLint 則是幫助我們統一程式碼的品質，因此兩者在做的事情是不同的，但有趣的是 ESLint 本身也具有格式化程式碼的規則，但也因為 ESLint 本身具有格式化程式碼的規則，而導致出現 Prettier 跟 ESLint 的風格衝突問題。

先前我就有針對這件事情寫一篇文章

• VSCode 自動修正 ESLint 錯誤

也就是使用 Prettier ESLint 套件去解決衝突的問題，但因為後來 ESLint 官方公告一件事情

Deprecation of formatting rules

簡單來講就是 ESLint 要移除格式化程式碼的規則，所以我們就不需要再使用 Prettier ESLint 套件，如果需要統一撰寫風格的話就是使用 Prettier，如果需要統一程式碼品質的話就是使用 ESLint。

那麼相信滿多人應該會對於「如果需要統一撰寫風格的話就是使用 Prettier，如果需要統一程式碼品質的話就是使用 ESLint」感到疑惑，所以這邊我就額外說明一下吧！

Prettier 主要是幫助我們統一撰寫程式碼的風格，例如…

• 程式碼縮排（要用空格還是 tab）
• 程式碼要不要換行（超過多少字元就換行）
• 縮排要幾個空格還是使用定位點（tab）
• 單引號還是雙引號（字串要用單引號還是雙引號）
• 逗號（物件或陣列最後一個元素後面要不要加上逗號）
• 分號（語句結尾要不要加上分號）
• 箭頭函式（箭頭函式只有一個參數時，要不要加上括號）
• 換行符號（換行符號要用 lf 還是 crlf）
  …等等

那 ESLint 呢？

• 變數、函式宣告後有沒有使用
• 變數宣告後有沒有重新賦值，沒有的話就改成 const
• 使用過時的 API
• 不要使用 == 建議使用嚴格比較 ===
• 命名風格，例如變數名稱要用駝峰式還是底線式
• 避免全域變數
  …等等

透過兩者的比較我想你應該會比較清楚兩者的差異了吧～

最後底下我也提供這個專案的範例檔案給你試試看唷～

• Prettier Example

Note
index.bak.js 是未修正的程式碼，index.js 是修正後的程式碼。