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

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


### ✨ ESLint Settings

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

查看 `package.json` 中 `eslintConfig`

// 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`

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`

// package.json

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

OR

抽出獨立的 prettier config 檔，`.prettierrc.js`

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  bracketSameLine: false,
};

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

### ✨ Install VSCode extensions

#### ↳ ESLint
> 

#### ↳ Prettier
> 

### ✨ IDE Settings

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

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


設定完之後，會多一個檔案如下：

// .vscode/settings.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 了！


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

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

#### ↳ ESLint
可以到隨意一個 `.vue`，使用違背 `plugin:vue/recommended` 的行為檢視驗證是否生效：
- `vue/no-v-html`

<span v-html=""></span>
// 'v-html' directive can lead to XSS attack.eslintvue/no-v-html

- `vue/attributes-order`

<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 並套用。