---
# System prepended metadata

title: 透過 ESLint 與 Prettier 規範團隊合作的專案

---

# 透過 ESLint 與 Prettier 規範團隊合作的專案

> 每個工程師都有自己的 Coding Style，不同的語言也有建議的 Coding Style。
> 
> 當專案為團隊合作開發時，建議事先擬定團隊的規範。
> 
> 使用 `Linter` 來進行程式碼品質的規範，並使用 `Formatter` 規範程式碼風格。
> 
> 本篇使用 `Linter - ESLint` 與 `Formatter - Prettier`。

![](https://hackmd.io/_uploads/Hym4STod3.png)

### ✨ ESLint Settings

↳ `plugin:vue/recommended`：預設是 essential，這邊改為 recommended，多規範一些東西，見[這兒](https://eslint.vuejs.org/rules/)。

查看 `package.json` 中 `eslintConfig`

```json
// package.json

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
    "rules": {
      "vue/no-multiple-template-root": "off"
    }
  }
```

OR 

抽出獨立的 eslint config 檔，`.eslintrc.js`
```javascript
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
  rules: {
    "vue/no-multiple-template-root": "off",
  },
};

```
> 更多設定參數見：https://eslint.vuejs.org/rules/


### ✨ Prettier Settings

查看 `package.json` 中 `prettier`

```json
// package.json

"prettier": {
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "bracketSameLine": false
}
```

OR 

抽出獨立的 prettier config 檔，`.prettierrc.js`
```javascript
module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  bracketSameLine: false,
};
```

> 更多設定參數見：https://prettier.io/


### ✨ Install VSCode extensions

#### ↳ ESLint
> ![](https://i.imgur.com/WEhJUbQ.png)

#### ↳ Prettier
> ![](https://i.imgur.com/Pzv5ARc.png)

### ✨ IDE Settings

> File > Preferences > Settings > Workspace > Open Settings(JSON)

** 請將設定改在 Workspace 內，單獨的為此專案進行設定 ; 反之，若改在 User 則會影響每個 Project。

![](https://hackmd.io/_uploads/ryvVm6ju2.png)


設定完之後，會多一個檔案如下：
```json
// .vscode/settings.json
```
輸入我們需要的設定：

```json=
// .vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "vue.codeLens.enabled": true
}

```
之後就可以在 `.js` 文件中，點擊右鍵 > `Format Document With ...`，就可以看到預設的 formatter 是 prettier 了！

![](https://i.imgur.com/qW1MFAz.png)


### ✨ 驗證功能是否運行

儲存後，由於前面有設定 `formatOnSave`，理應會觸發 ESLint 及 Prettier：

#### ↳ ESLint
可以到隨意一個 `.vue`，使用違背 `plugin:vue/recommended` 的行為檢視驗證是否生效：
- `vue/no-v-html`
```htmlmixed
<span v-html=""></span>
// 'v-html' directive can lead to XSS attack.eslintvue/no-v-html
```

- `vue/attributes-order`
```htmlmixed
<button @click="onLogin" class="login-btn">登入</button>
// Attribute "class" should go before "@click".eslintvue/attributes-order
```
這個例子在儲存時，將根據前面設定 `source.fixAll.eslint: true` 進行自動修復。

#### ↳ Prettier
點擊 Prettier Extension 的按鈕，於檔案按下儲存時，檢視 Log 是否有偵測到 config 並套用。

![](https://hackmd.io/_uploads/By49d3i_3.png)



