Vue 3與ESLint、Prettier：構建規範化的前端開發環境

Amd794發表於2024-06-11
VueEsLint前端開發環境

title: Vue 3與ESLint、Prettier：構建規範化的前端開發環境
date: 2024/6/11
updated: 2024/6/11
publisher: cmdragon

excerpt:
這篇文章介紹瞭如何在Vue 3專案中配置ESLint和Prettier以統一程式碼風格，實現程式碼規範性與可讀性的提升。透過設定規則、解決衝突、以及將配置融入持續整合流程和程式碼審查過程，確保團隊協作時程式碼風格的一致性，提升開發效率與專案維護性。

categories:

  • 前端開發

tags:

  • Vue 3
  • ESLint
  • Prettier
  • 程式碼規範
  • 持續整合
  • 程式碼審查
  • 團隊協作

image
image

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

第一章：Vue 3專案基礎

Vue 3簡介

Vue 3是Vue.js前端框架的第三個主要版本，它帶來了許多新的特性和改進，旨在提供更好的效能、更小的體積和更靈活的API。Vue 3的核心庫採用了Composition API，這使得元件的邏輯組織更加清晰，同時保持了與Vue 2的相容性。Vue 3還引入了Tree-shaking、Teleport、Fragment、Suspense等新特性，以及更好的TypeScript支援。

搭建Vue 3開發環境

搭建Vue 3開發環境通常需要以下步驟：

  1. 安裝Node.js和npm：Vue 3專案通常使用npm（Node Package Manager）進行依賴管理，因此首先需要安裝Node.js和npm。
  2. 使用Vue CLI建立專案：Vue CLI是Vue官方提供的腳手架工具，可以快速搭建Vue專案。透過執行vue create命令，可以選擇預設或手動配置專案。
  3. 選擇Vue 3版本：在建立專案時，Vue CLI會詢問是否使用Vue 3，選擇相應的選項即可建立Vue 3專案。
  4. 安裝依賴：專案建立後，使用npm install或yarn install命令安裝專案依賴。
  5. 執行開發伺服器：使用npm run serve或yarn serve命令啟動開發伺服器，檢視專案是否正常執行。

Vue 3專案結構解析

Vue 3專案通常具有以下目錄結構：

my-vue3-project/
├── node_modules/         # 專案依賴
├── public/               # 公共靜態資源
│   └── index.html        # 入口HTML檔案
├── src/                  # 原始碼
│   ├── assets/           # 靜態資源
│   ├── components/       # Vue元件
│   ├── router/           # 路由配置
│   ├── store/            # Vuex狀態管理
│   ├── App.vue           # 根元件
│   └── main.js           # 入口檔案
├── .eslintrc.js          # ESLint配置檔案
├── .prettierrc.js        # Prettier配置檔案
├── package.json          # 專案配置和依賴
└── README.md             # 專案說明
  • node_modules/：存放專案的依賴庫。
  • public/：存放公共靜態資源，如入口HTML檔案。
  • src/：存放原始碼，包括元件、路由、狀態管理等。
  • .eslintrc.js：ESLint的配置檔案，用於定義程式碼規範。
  • .prettierrc.js：Prettier的配置檔案，用於定義程式碼格式化規則。
  • package.json：定義專案依賴、指令碼和配置資訊。
  • README.md：專案說明檔案，通常包含專案的基本資訊和構建指南。

透過理解Vue 3專案的基礎和結構，開發者可以更好地進行專案開發和維護。

第二章：ESLint入門

ESLint概述

ESLint是一個外掛化的JavaScript程式碼檢查工具，用於識別和報告JavaScript程式碼中的模式，以確保程式碼質量。它可以幫助開發者遵循編碼規範，避免潛在的錯誤，並保持程式碼的一致性。ESLint是高度可配置的，可以透過外掛和規則來擴充套件其功能。cmdragon's Blog

安裝與配置ESLint

安裝ESLint通常需要以下步驟：

  1. 安裝Node.js和npm：確保你的系統上已經安裝了Node.js和npm。
  2. 全域性安裝ESLint：雖然不推薦全域性安裝，但可以透過執行npm install -g eslint來全域性安裝ESLint。
  3. 專案內安裝ESLint：在專案目錄下執行npm install eslint --save-dev來安裝ESLint作為開發依賴。
  4. 初始化ESLint配置：在專案根目錄下執行npx eslint --init，根據提示選擇配置選項，生成.eslintrc.*配置檔案。
  5. 配置檔案：生成的配置檔案可以是.eslintrc.js、.eslintrc.json或.eslintrc.yaml，根據個人喜好選擇。

基本規則與配置檔案

ESLint的配置檔案定義了程式碼檢查的規則。以下是一些基本的規則和配置示例：

  1. 規則啟用：在配置檔案中，可以透過rules物件來啟用或禁用規則。例如，要啟用semi規則（要求或禁止使用分號），可以設定"semi": ["error", "always"]。
  2. 環境設定：在配置檔案中，可以透過env物件來指定程式碼執行的環境，如browser、node等。
  3. 全域性變數：在配置檔案中，可以透過globals物件來宣告全域性變數，例如"jQuery": true。
  4. 擴充套件配置：可以透過extends屬性來擴充套件其他配置檔案，如"extends": "eslint:recommended"。
  5. 外掛：可以透過plugins屬性來使用ESLint外掛，例如"plugins": ["vue"]。

以下是一個簡單的.eslintrc.js配置檔案示例：

module.exports = {
  "env": {
    "browser": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "jQuery": true
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  },
  "plugins": [
    "vue"
  ]
};

這個配置檔案啟用了瀏覽器和Node.js環境，擴充套件了ESLint的推薦規則，宣告瞭jQuery為全域性變數，要求使用分號，並使用雙引號，同時啟用了Vue外掛。

透過學習和配置ESLint，開發者可以確保程式碼質量，減少錯誤，並保持程式碼風格的一致性。

第三章：Prettier入門

Prettier概述

Prettier是一個自動格式化程式碼的工具，它透過解析程式碼並使用自己的規則重新列印程式碼，以保持一致的程式碼風格。Prettier支援多種語言，包括JavaScript、TypeScript、HTML、CSS、SCSS等。它旨在減少開發者之間關於程式碼格式的爭論，並提高開發效率。

安裝與配置Prettier

安裝Prettier通常需要以下步驟：

  1. 安裝Node.js和npm：確保你的系統上已經安裝了Node.js和npm。
  2. 專案內安裝Prettier：在專案目錄下執行npm install prettier --save-dev來安裝Prettier作為開發依賴。
  3. 建立Prettier配置檔案：在專案根目錄下建立一個.prettierrc檔案，或者在package.json中新增prettier配置。
  4. 整合到編輯器：大多數現代程式碼編輯器都支援Prettier，可以透過安裝相應的外掛來整合Prettier。
  5. 命令列使用：可以使用npx prettier --write <檔案路徑>來格式化單個檔案，或者npx prettier --write .來格式化整個專案。

Prettier的配置選項

Prettier的配置選項可以在.prettierrc檔案中設定，或者在package.json中的prettier欄位中設定。以下是一些常用的配置選項：

  • printWidth：指定每行程式碼的最大寬度（預設為80）。
  • tabWidth：指定每個製表符的空格數（預設為2）。
  • useTabs：指定是否使用製表符而不是空格（預設為false）。
  • semi：指定是否在語句末尾新增分號（預設為true）。
  • singleQuote：指定是否使用單引號而不是雙引號（預設為false）。
  • trailingComma：指定多行物件和陣列的最後一個元素後面是否新增逗號（預設為"es5"）。
  • bracketSpacing：指定物件字面量屬性之間是否需要空格（預設為true）。
  • jsxBracketSameLine：指定多行JSX元素是否在最後一行閉合（預設為false）。

以下是一個.prettierrc配置檔案示例：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

這個配置檔案設定了每行程式碼的最大寬度為100，使用2個空格作為製表符，語句末尾新增分號，使用單引號，多行物件和陣列的最後一個元素後面新增逗號，物件字面量屬性之間需要空格，多行JSX元素不在最後一行閉合。

透過學習和配置Prettier，開發者可以保持一致的程式碼風格，減少手動格式化程式碼的時間，並提高程式碼的可讀性和可維護性。

第四章：Vue 3與ESLint、Prettier整合

在Vue 3專案中安裝ESLint和Prettier

要在Vue 3專案中安裝ESLint和Prettier，可以按照以下步驟操作：

  1. 安裝Node.js和npm：確保你的系統上已經安裝了Node.js和npm。

  2. 建立Vue 3專案：如果還沒有Vue 3專案，可以使用Vue CLI建立一個新的專案。執行vue create your-project-name，並選擇手動配置，以便可以新增ESLint和Prettier。

  3. 安裝ESLint和Prettier：在專案目錄下執行以下命令來安裝ESLint和Prettier及其相關依賴：

    npm install eslint eslint-plugin-vue --save-dev
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

  4. 安裝編輯器外掛：大多數現代程式碼編輯器都支援ESLint和Prettier，可以透過安裝相應的外掛來整合。

配置ESLint以支援Vue單檔案元件

為了使ESLint能夠正確地解析Vue單檔案元件（.vue檔案），需要安裝並配置eslint-plugin-vue。這通常在建立Vue專案時就已經完成，但如果需要手動配置，可以按照以下步驟操作：

  1. 建立ESLint配置檔案：在專案根目錄下建立一個.eslintrc.js檔案，並新增以下內容：

    module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 在這裡新增自定義規則
  }
};

  2. 確保ESLint能夠解析.vue檔案：確保.eslintignore檔案中不包含.vue副檔名，這樣ESLint就會檢查Vue檔案。

配置Prettier與ESLint協同工作

為了使Prettier和ESLint協同工作，需要安裝eslint-config-prettier和eslint-plugin-prettier，並在ESLint配置中引入它們。這通常在安裝Prettier時已經完成，但如果需要手動配置，可以按照以下步驟操作：

  1. 更新ESLint配置檔案：在.eslintrc.js檔案中，確保extends陣列中包含了'plugin:prettier/recommended'，這樣Prettier的規則就會被ESLint所採用。
  2. 建立Prettier配置檔案：在專案根目錄下建立一個.prettierrc檔案，並新增你的Prettier配置。
  3. 確保Prettier和ESLint規則一致：Prettier和ESLint的配置應該保持一致，以避免衝突。例如，如果Prettier配置使用單引號，那麼ESLint也應該配置為使用單引號。

透過以上步驟，你就可以在Vue 3專案中整合ESLint和Prettier，從而保持程式碼風格的一致性，並提高程式碼質量。

第五章：制定程式碼規範

程式碼規範的重要性

程式碼規範是指一組關於程式碼編寫風格和結構的規則。它們對於軟體開發專案來說至關重要，原因如下：

  1. 一致性：程式碼規範確保了所有開發者的程式碼風格一致，使得程式碼更易於閱讀和維護。
  2. 可維護性：一致的程式碼風格減少了理解程式碼的難度，使得維護和更新程式碼變得更加容易。
  3. 可讀性：良好的程式碼規範提高了程式碼的可讀性，使得新成員能夠更快地理解專案。
  4. 減少錯誤：透過強制執行程式碼規範，可以減少由於風格不一致引起的錯誤。
  5. 自動化檢查：程式碼規範可以透過工具自動檢查，如ESLint和Prettier，從而提高開發效率。

選擇或建立程式碼規範集

選擇或建立程式碼規範集時，可以考慮以下幾個方面：

  1. 現有規範：許多組織和社群已經建立了廣泛使用的程式碼規範，如Airbnb、Google、Standard等。可以選擇一個與專案風格相近的規範作為基礎。
  2. 專案需求：根據專案的具體需求，可能需要對現有規範進行調整或建立全新的規範。
  3. 團隊習慣：考慮團隊成員的習慣和偏好，選擇一個大家都能接受的規範。
  4. 工具支援：確保所選規範有良好的工具支援，如ESLint、Prettier等，以便自動化檢查和修復。

應用程式碼規範到專案中

一旦選擇了程式碼規範，就需要將其應用到專案中。以下是一些步驟：

  1. 配置工具：根據所選規範配置ESLint、Prettier等工具。這可能涉及到修改.eslintrc.js、.prettierrc等配置檔案。
  2. 整合到編輯器：大多數現代程式碼編輯器都支援ESLint和Prettier，可以透過安裝相應的外掛來實現實時檢查和自動修復。
  3. 設定Git鉤子：可以使用Git鉤子（如pre-commit）在程式碼提交前自動執行ESLint和Prettier，確保提交的程式碼符合規範。
  4. 文件和培訓：為團隊成員提供程式碼規範的文件和培訓，確保每個人都理解並遵循規範。
  5. 定期審查：定期進行程式碼審查，確保程式碼規範得到遵守，並在必要時更新規範。

透過以上步驟，可以將程式碼規範有效地應用到專案中，從而提高程式碼質量，促進團隊合作。

第六章：實踐中的程式碼規範

變數與函式命名規範

變數和函式的命名是程式碼規範中非常重要的一部分，良好的命名可以提高程式碼的可讀性和可維護性。以下是一些通用的命名規範：

  1. 變數命名：

    • 使用駝峰式命名法（camelCase），例如userAge。
    • 避免使用縮寫，除非是廣泛認可的縮寫，如ID。
    • 變數名應該描述其代表的含義，例如maxWidth而不是w。
    • 私有變數通常以一個下劃線開頭，例如_privateVariable。

  2. 函式命名：

    • 使用駝峰式命名法，首字母大寫，例如calculateTotal。
    • 函式名應該描述其執行的操作，例如getUserProfile。
    • 避免使用動詞短語作為函式名，例如doSomething。

程式碼縮排與格式化

程式碼的縮排和格式化對於程式碼的可讀性至關重要。以下是一些通用的縮排和格式化規範：

  1. 縮排：

    • 使用一致的縮排，通常為2個或4個空格。
    • 不要使用製表符，因為它們在不同編輯器中的顯示可能不一致。

  2. 格式化：

    • 使用空格來分隔運算子，例如a = b + c。
    • 在逗號後面使用空格，例如array = [1, 2, 3]。
    • 在函式呼叫時，引數之間使用空格，例如functionName(arg1, arg2)。
    • 使用一致的空行來分隔程式碼塊，例如函式定義之間。

最佳實踐與常見陷阱

在實踐程式碼規範時，以下是一些最佳實踐和常見陷阱：

  1. 最佳實踐：

    • 使用版本控制系統，如Git，來跟蹤程式碼更改。
    • 定期進行程式碼審查，確保程式碼質量。
    • 使用自動化工具來檢查和修復程式碼格式問題。
    • 保持程式碼簡潔，避免不必要的複雜性。

  2. 常見陷阱：

    • 過度使用縮寫，導致程式碼難以理解。
    • 不一致的縮排和格式化，使得程式碼難以閱讀。
    • 忽略程式碼規範，導致程式碼質量下降。
    • 使用不清晰的命名，使得程式碼難以維護。

第七章：持續整合與程式碼審查

整合ESLint和Prettier到持續整合流程

持續整合（CI）是一種軟體開發實踐，其中團隊成員的程式碼更改頻繁地整合到主分支中。ESLint是一個用於識別和報告JavaScript程式碼中的模式匹配的工具，而Prettier是一個自動格式化程式碼的工具。將ESLint和Prettier整合到CI流程中可以確保程式碼質量和一致性。
AD：覆蓋廣泛主題工具可供使用

  1. 配置ESLint：

    • 在專案根目錄下建立一個.eslintrc檔案，配置ESLint規則。
    • 安裝ESLint依賴：npm install eslint --save-dev。
    • 執行npx eslint --init來初始化ESLint配置。

  2. 配置Prettier：

    • 在專案根目錄下建立一個.prettierrc檔案，配置Prettier規則。
    • 安裝Prettier依賴：npm install prettier --save-dev。
    • 在package.json中新增一個指令碼來執行Prettier："prettier": "prettier --write '**/*.{js,jsx,ts,tsx}'"。

  3. 整合到CI：

    • 在CI配置檔案中（如.travis.yml或Jenkinsfile），新增步驟來安裝ESLint和Prettier。
    • 新增步驟來執行ESLint和Prettier指令碼，例如npm run lint和npm run prettier。
    • 如果ESLint或Prettier報告錯誤，CI構建應失敗，以防止不符合規範的程式碼被合併。

程式碼審查與ESLint、Prettier反饋

程式碼審查是確保程式碼質量的關鍵步驟，ESLint和Prettier可以幫助提供自動化的反饋。

  1. 程式碼審查：

    • 在程式碼合併到主分支之前，進行程式碼審查。
    • 審查者應檢查程式碼是否符合ESLint和Prettier規則。
    • 如果發現不符合規範的地方，應要求開發者修復。

  2. ESLint和Prettier反饋：

    • 開發者可以在本地執行ESLint和Prettier來檢查程式碼。
    • CI流程中的ESLint和Prettier指令碼會自動提供反饋。
    • 如果程式碼不符合規範，CI將提供詳細的錯誤資訊，開發者可以根據這些資訊進行修復。

自動化程式碼質量監控

自動化程式碼質量監控可以幫助團隊保持程式碼質量，並及早發現潛在的問題。

  1. 設定監控：

    • 使用CI工具的監控功能來跟蹤程式碼質量指標。
    • 設定警報，當程式碼質量下降時通知團隊成員。

  2. 定期報告：

    • 定期生成程式碼質量報告，包括ESLint和Prettier的統計資料。
    • 分析報告，識別趨勢和潛在的問題。

  3. 持續改進：

    • 根據監控結果和程式碼審查反饋，不斷改進程式碼規範和工具配置。
    • 鼓勵團隊成員學習和遵循最佳實踐。

透過持續整合、程式碼審查和自動化程式碼質量監控，可以確保程式碼質量並提高開發效率。

第八章：高階ESLint與Prettier配置

自定義ESLint規則

自定義ESLint規則可以幫助團隊根據專案需求調整程式碼規範。

  1. 建立自定義規則：

    • 在專案根目錄下建立一個名為eslint-rules的資料夾。
    • 在該資料夾中建立自定義規則的JavaScript檔案，例如custom-rule.js。
    • 在自定義規則檔案中，使用ESLint的規則模板來編寫規則。

  2. 配置ESLint使用自定義規則：

    • 在.eslintrc檔案中，新增extends欄位來指定自定義規則檔案。
    • 使用rules欄位來啟用和配置自定義規則。

使用ESLint外掛

ESLint外掛可以擴充套件ESLint的功能，提供額外的規則和功能。

  1. 安裝ESLint外掛：

    • 使用npm install eslint-plugin-example --save-dev來安裝外掛（example是外掛名）。

  2. 配置ESLint使用外掛：

    • 在.eslintrc檔案中，新增plugins欄位來指定外掛。
    • 使用rules欄位來啟用和配置外掛的規則。

配置Prettier與ESLint協同工作的高階技巧

Prettier和ESLint可以協同工作，以確保程式碼既符合風格規範又符合程式碼質量規範。

  1. 安裝ESLint Prettier外掛：

    • 使用npm install eslint-config-prettier eslint-plugin-prettier --save-dev來安裝外掛。

  2. 配置ESLint忽略Prettier衝突：

    • 在.eslintrc檔案中，新增extends欄位來指定eslint-config-prettier。
    • 在plugins欄位中新增prettier。
    • 在rules欄位中，將prettier/prettier規則設定為error。

  3. 配置Prettier忽略ESLint格式化：

    • 在.prettierrc檔案中，新增eslintIntegration欄位並設定為true。

透過這些高階配置，可以確保Prettier和ESLint協同工作，提高程式碼質量和一致性。

附錄

常用ESLint規則參考

ESLint 提供了大量的規則來幫助開發者編寫高質量的程式碼。以下是一些常用的ESLint規則：

  • semi: 要求或禁止使用分號而不是 ASI（自動分號插入）。
  • quotes: 強制使用單引號、雙引號或模板字串。
  • no-unused-vars: 禁止出現未使用過的變數。
  • no-console: 禁止使用console物件。
  • no-debugger: 禁止使用debugger語句。
  • indent: 強制使用一致的縮排。
  • linebreak-style: 強制使用一致的換行風格（LF 或 CRLF）。
  • no-multiple-empty-lines: 禁止出現多行空行。
  • no-trailing-spaces: 禁止行尾空格。
  • arrow-parens: 要求箭頭函式的引數使用圓括號。

Prettier的配置選項參考

Prettier 提供了一系列配置選項來控制程式碼格式化。以下是一些常用的Prettier配置選項：

  • printWidth: 指定每行程式碼的最大字元數。
  • tabWidth: 指定每個製表符的空格數。
  • useTabs: 強制使用製表符而不是空格。
  • semi: 在語句末尾新增分號。
  • singleQuote: 使用單引號而不是雙引號。
  • trailingComma: 在多行物件字面量中列印尾隨逗號。
  • bracketSpacing: 在物件字面量屬性中列印空格。
  • jsxBracketSameLine: 將多行JSX元素的>放置在最後一行的末尾。
  • arrowParens: 為單個引數的箭頭函式新增圓括號。

Vue 3與ESLint、Prettier常見問題解答

在使用Vue 3與ESLint、Prettier時，可能會遇到以下問題：

  1. Vue檔案格式化問題：

    • 確保使用eslint-plugin-vue外掛來支援Vue檔案。
    • 在Prettier配置中啟用vue語言支援。

  2. 元件命名規範：

    • 使用ESLint規則來強制元件命名規範，例如vue/component-name-in-template-casing。

  3. 模板語法檢查：

    • 使用ESLint規則來檢查Vue模板中的語法，例如vue/no-unused-vars。

相關資源與工具推薦

  • ESLint 官方文件：https://eslint.org/docs/rules/
  • Prettier 官方文件：https://prettier.io/docs/en/options.html
  • Vue ESLint 外掛：https://eslint.vuejs.org/
  • ESLint 配置生成器：https://eslint.org/demo/
  • Prettier 配置生成器：https://prettier.io/playground/
  • cmdragon's Blog：https://www.cmdragon.cn

相關文章