接續昨天沒設定完的專案設定，今天花了比較多時間在調整 Linter 與 Formatter 的設定，並載入 Element 這個 UI 元件庫。

今日大綱

• Linter、Formatter 在 VS Code 上的設定
• 安裝 Element UI 元件庫

Linter、Formatter 在 VS Code 上的設定

因為原本在 VS Code 中的 settings.json，有自己放一些 Vetur、Prettier 的設定，但這些設定會與 Vue CLI 預設用 ESLint 建好的規則打架。

測試後發現原因是出在 .eslintrc.js 中的這一行：

extends: ["plugin:vue/essential", "@vue/prettier"],

之前在建專案時選擇了 ESLint + Prettier，這其實是指用 @vue/eslint-config-prettier 這個標準的規範去做 Linter，與自己平常使用的規範不同，變得有點綁手綁腳，當初應該只選 ESLint with error prevention only，自己另外設定一些規則就好：

自己開發專案還用 Linter 真的是自己搞自己...

於是手動改成以下這行再另外自己設定一些分號、單引號、Vue Component 屬性順序等規則就好囉：

extends: ['eslint:recommended', 'plugin:vue/recommended']

另外也在專案根目錄中新增一個 .vscode 的資料夾，裡面放入 settings.json，加在這裡的設定，可以適用於所有同一個專案下所有開發者的工作區。若是在團隊開發且都是使用 VS Code 的狀況下，將一些 formatter 的設定放在這，能讓程式碼風格自動 format 的更統一。

而在這個專案中，主要是使用 Vetur 這個 extension 中有一些設定，能利用 Prettier 做存檔時的 format Vue 檔 coding style：

{
  "vetur.format.styleInitialIndent": true,
  "vetur.format.scriptInitialIndent": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 120,
      "semi": false,
      "eslintIntegration": false,
      "singleQuote": true
    },
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "force-expand-multiline"
    }
  }
}

相關完整的設定參考 Github 上的.eslintrc.js 及 settings.json。

安裝 Element UI 元件庫

Element 是一套基於 Vue 2.0 設計的 UI 元件庫，其他選擇還有像是 Bootstrap-Vue、Vuetify，選擇這一套的原因是最近工作上會用到，開發 side project 時順便當作練習熟悉。

安裝方法很簡單，在 terminal 打上以下這行就好了：

vue add element

安裝好後會發現，它還很貼心的在首頁上自動幫忙加了一個 Element 的「按鈕」，代表安裝成功囉：

關於 element-ui 其他的安裝方法也可以參考官網文件哦！

總結

關於專案設定的內容有點太完美主義作祟了，再深入挖下去寫，真的會太偏離「記帳程式」這個主題，今天先簡單列出在這個專案做了哪些初始設定就好。

明天要正式進入開發記帳程式要做的功能了！