開發工具和編碼習慣

在開始專案開發的過程中，我們會使用各種相依工具來輔助開發。這些工具有的是運行時必須的，例如 Vue，而有的則是僅在開發過程中使用，例如 ESLint。不論是團隊合作還是個人開發，這些工具都能幫助我們維護程式碼的品質。也就是一開始的開發環境設定。

編輯器設定和代碼格式化

我們通常會搭配編輯器的插件來實現快速的代碼反應和編輯互動。例如，安裝 Prettier 並在編輯器中設定：

"editor.formatOnSave": true,

這樣在儲存文件時，代碼會自動排版。但需要注意的是，ESLint 和 Prettier 的規則可能會產生衝突，因此有了整合這兩者的 Prettier ESLint 工具。

前端框架和樣式

以 Tailwind 為例，這是一個開源的 CSS 框架，允許我們通過預定義的 class 名稱來快速構建網頁樣式。

專案特定設定

本次專案提供了基於 Vue.js SFC（單文件組件）的基礎 ESLint 設定，這是通過使用 eslint-plugin-vue 插件來實現的。

在這裡附上 eslint 設定，例子 .eslintrc.js

module.exports = {
  root: true,  // 指定這個檔案為 ESLint 的根設定檔，ESLint 將不會再往上層目錄尋找其他的設定檔
  extends: [
    "plugin:vue/vue3-recommended",  // 擴展 Vue.js 3 的推薦設定
    "eslint:recommended"  // 擴展 ESLint 的推薦設定
  ],
  parserOptions: {
    ecmaVersion: "latest"  // 使用最新的 ECMAScript 版本進行語法解析
  }
};

安裝的套件整理加上說明

前端框架

• vue: Vue.js 是一個用於構建用戶界面的框架。

打包和開發工具

• vite: 一個由 ViteJS 提供的前端打包和開發服務器。
• vitest: 用於 Vite 環境中的測試。

插件和擴展工具

• @vitejs/plugin-vue: Vite 的 Vue 插件。
• unplugin-icons: 用於處理圖標的 Vite 插件。
• unplugin-vue-components: 用於處理 Vue 組件的 Vite 插件。

CSS 和前端樣式

• tailwindcss: 一個高度可定制的 CSS 框架。
• autoprefixer: 用於自動添加瀏覽器前綴的 PostCSS 插件。
• postcss: 一個用於轉換 CSS 的工具。

代碼格式和風格檢查

• eslint: 一個用於識別和修復代碼問題的工具。
• eslint-config-prettier: 用於整合 ESLint 和 Prettier 的配置。
• eslint-plugin-prettier: 一個將 Prettier 作為 ESLint 規則使用的插件。
• eslint-plugin-vue: 用於 Vue.js 應用的 ESLint 插件。
• prettier: 一個代碼格式化工具。

圖標庫

• @iconify-json/carbon
• @iconify-json/clarity
• @iconify-json/healthicons
• @iconify-json/icon-park
• @iconify-json/icon-park-outline
• @iconify-json/icon-park-twotone
• @iconify-json/iconoir
• @iconify-json/majesticons
• @iconify-json/maki
• @iconify-json/pepicons-pencil
• @iconify-json/pepicons-print
• @iconify-json/ph
• @iconify-json/solar
• @iconify/vue: 用於 Vue.js 的 Iconify 插件。

儘管投入更多時間來關注程式碼品質可能會影響 side project 短期的進度，但對未來的開發具有顯著的長遠效益。因此，我計劃在明天首先討論如何編寫可維護的程式碼。接著，將著手進行基本的測試撰寫，最後才會進入界面切版的階段。

參考資料：
Prettier ESLint
ESLint plugin for Vue.js