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

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

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
代碼規範
持續集成
代碼審查
團隊協作

掃碼關註或者微信搜一搜：編程智域前端至全棧交流與成長

第一章：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開發環境通常需要以下步驟：

安裝Node.js和npm：Vue 3項目通常使用npm（Node Package Manager）進行依賴管理，因此首先需要安裝Node.js和npm。
使用Vue CLI創建項目：Vue CLI是Vue官方提供的腳手架工具，可以快速搭建Vue項目。通過運行vue create命令，可以選擇預設或手動配置項目。
選擇Vue 3版本：在創建項目時，Vue CLI會詢問是否使用Vue 3，選擇相應的選項即可創建Vue 3項目。
安裝依賴：項目創建後，使用npm install或yarn install命令安裝項目依賴。
運行開發伺服器：使用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通常需要以下步驟：

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

基本規則與配置文件

ESLint的配置文件定義了代碼檢查的規則。以下是一些基本的規則和配置示例：

規則啟用：在配置文件中，可以通過rules對象來啟用或禁用規則。例如，要啟用semi規則（要求或禁止使用分號），可以設置"semi": ["error", "always"]。
環境設置：在配置文件中，可以通過env對象來指定代碼運行的環境，如browser、node等。
全局變數：在配置文件中，可以通過globals對象來聲明全局變數，例如"jQuery": true。
擴展配置：可以通過extends屬性來擴展其他配置文件，如"extends": "eslint:recommended"。
插件：可以通過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通常需要以下步驟：

安裝Node.js和npm：確保你的系統上已經安裝了Node.js和npm。
項目內安裝Prettier：在項目目錄下運行npm install prettier --save-dev來安裝Prettier作為開發依賴。
創建Prettier配置文件：在項目根目錄下創建一個.prettierrc文件，或者在package.json中添加prettier配置。
集成到編輯器：大多數現代代碼編輯器都支持Prettier，可以通過安裝相應的插件來集成Prettier。
命令行使用：可以使用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，可以按照以下步驟操作：

安裝Node.js和npm：確保你的系統上已經安裝了Node.js和npm。
創建Vue 3項目：如果還沒有Vue 3項目，可以使用Vue CLI創建一個新的項目。運行vue create your-project-name，並選擇手動配置，以便可以添加ESLint和Prettier。

安裝ESLint和Prettier：在項目目錄下運行以下命令來安裝ESLint和Prettier及其相關依賴：

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

安裝編輯器插件：大多數現代代碼編輯器都支持ESLint和Prettier，可以通過安裝相應的插件來集成。

配置ESLint以支持Vue單文件組件

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

創建ESLint配置文件：在項目根目錄下創建一個.eslintrc.js文件，並添加以下內容：

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

確保ESLint能夠解析.vue文件：確保.eslintignore文件中不包含.vue擴展名，這樣ESLint就會檢查Vue文件。

配置Prettier與ESLint協同工作

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

更新ESLint配置文件：在.eslintrc.js文件中，確保extends數組中包含了'plugin:prettier/recommended'，這樣Prettier的規則就會被ESLint所採用。
創建Prettier配置文件：在項目根目錄下創建一個.prettierrc文件，並添加你的Prettier配置。
確保Prettier和ESLint規則一致：Prettier和ESLint的配置應該保持一致，以避免衝突。例如，如果Prettier配置使用單引號，那麼ESLint也應該配置為使用單引號。

通過以上步驟，你就可以在Vue 3項目中集成ESLint和Prettier，從而保持代碼風格的一致性，並提高代碼質量。

第五章：制定代碼規範

代碼規範的重要性

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

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

選擇或創建代碼規範集

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

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

應用代碼規範到項目中

一旦選擇了代碼規範，就需要將其應用到項目中。以下是一些步驟：

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

通過以上步驟，可以將代碼規範有效地應用到項目中，從而提高代碼質量，促進團隊合作。

第六章：實踐中的代碼規範

變數與函數命名規範

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

變數命名：
- 使用駝峰式命名法（camelCase），例如userAge。
- 避免使用縮寫，除非是廣泛認可的縮寫，如ID。
- 變數名應該描述其代表的含義，例如maxWidth而不是w。
- 私有變數通常以一個下劃線開頭，例如_privateVariable。
函數命名：
- 使用駝峰式命名法，首字母大寫，例如calculateTotal。
- 函數名應該描述其執行的操作，例如getUserProfile。
- 避免使用動詞短語作為函數名，例如doSomething。

代碼縮進與格式化

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

縮進：
- 使用一致的縮進，通常為2個或4個空格。
- 不要使用製表符，因為它們在不同編輯器中的顯示可能不一致。
格式化：
- 使用空格來分隔操作符，例如a = b + c。
- 在逗號後面使用空格，例如array = [1, 2, 3]。
- 在函數調用時，參數之間使用空格，例如functionName(arg1, arg2)。
- 使用一致的空行來分隔代碼塊，例如函數定義之間。

最佳實踐與常見陷阱

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

最佳實踐：
- 使用版本控制系統，如Git，來跟蹤代碼更改。
- 定期進行代碼審查，確保代碼質量。
- 使用自動化工具來檢查和修複代碼格式問題。
- 保持代碼簡潔，避免不必要的複雜性。
常見陷阱：
- 過度使用縮寫，導致代碼難以理解。
- 不一致的縮進和格式化，使得代碼難以閱讀。
- 忽略代碼規範，導致代碼質量下降。
- 使用不清晰的命名，使得代碼難以維護。

第七章：持續集成與代碼審查

集成ESLint和Prettier到持續集成流程

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

配置ESLint：
- 在項目根目錄下創建一個.eslintrc文件，配置ESLint規則。
- 安裝ESLint依賴：npm install eslint --save-dev。
- 運行npx eslint --init來初始化ESLint配置。
配置Prettier：
- 在項目根目錄下創建一個.prettierrc文件，配置Prettier規則。
- 安裝Prettier依賴：npm install prettier --save-dev。
- 在package.json中添加一個腳本來運行Prettier："prettier": "prettier --write '**/*.{js,jsx,ts,tsx}'"。
集成到CI：
- 在CI配置文件中（如.travis.yml或Jenkinsfile），添加步驟來安裝ESLint和Prettier。
- 添加步驟來運行ESLint和Prettier腳本，例如npm run lint和npm run prettier。
- 如果ESLint或Prettier報告錯誤，CI構建應失敗，以防止不符合規範的代碼被合併。

代碼審查與ESLint、Prettier反饋

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

代碼審查：
- 在代碼合併到主分支之前，進行代碼審查。
- 審查者應檢查代碼是否符合ESLint和Prettier規則。
- 如果發現不符合規範的地方，應要求開發者修複。
ESLint和Prettier反饋：
- 開發者可以在本地運行ESLint和Prettier來檢查代碼。
- CI流程中的ESLint和Prettier腳本會自動提供反饋。
- 如果代碼不符合規範，CI將提供詳細的錯誤信息，開發者可以根據這些信息進行修複。

自動化代碼質量監控

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

設置監控：
- 使用CI工具的監控功能來跟蹤代碼質量指標。
- 設置警報，當代碼質量下降時通知團隊成員。
定期報告：
- 定期生成代碼質量報告，包括ESLint和Prettier的統計數據。
- 分析報告，識別趨勢和潛在的問題。
持續改進：
- 根據監控結果和代碼審查反饋，不斷改進代碼規範和工具配置。
- 鼓勵團隊成員學習和遵循最佳實踐。

通過持續集成、代碼審查和自動化代碼質量監控，可以確保代碼質量並提高開發效率。

第八章：高級ESLint與Prettier配置

自定義ESLint規則

自定義ESLint規則可以幫助團隊根據項目需求調整代碼規範。

創建自定義規則：
- 在項目根目錄下創建一個名為eslint-rules的文件夾。
- 在該文件夾中創建自定義規則的JavaScript文件，例如custom-rule.js。
- 在自定義規則文件中，使用ESLint的規則模板來編寫規則。
配置ESLint使用自定義規則：
- 在.eslintrc文件中，添加extends欄位來指定自定義規則文件。
- 使用rules欄位來啟用和配置自定義規則。

使用ESLint插件

ESLint插件可以擴展ESLint的功能，提供額外的規則和功能。

安裝ESLint插件：
- 使用npm install eslint-plugin-example --save-dev來安裝插件（example是插件名）。
配置ESLint使用插件：
- 在.eslintrc文件中，添加plugins欄位來指定插件。
- 使用rules欄位來啟用和配置插件的規則。

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

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

安裝ESLint Prettier插件：
- 使用npm install eslint-config-prettier eslint-plugin-prettier --save-dev來安裝插件。
配置ESLint忽略Prettier衝突：
- 在.eslintrc文件中，添加extends欄位來指定eslint-config-prettier。
- 在plugins欄位中添加prettier。
- 在rules欄位中，將prettier/prettier規則設置為error。
配置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時，可能會遇到以下問題：

Vue文件格式化問題：
- 確保使用eslint-plugin-vue插件來支持Vue文件。
- 在Prettier配置中啟用vue語言支持。
組件命名規範：
- 使用ESLint規則來強制組件命名規範，例如vue/component-name-in-template-casing。
模板語法檢查：
- 使用ESLint規則來檢查Vue模板中的語法，例如vue/no-unused-vars。