vue3項目中eslint+prettier統(tǒng)一代碼風格方式

更新時間：2025年05月31日 18:33:03 作者：weixin_45658815

這篇文章主要介紹了vue3項目中eslint+prettier統(tǒng)一代碼風格方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

準備

VS Code 插件

Volar（推薦用于 Vue 3）
ESLint
Prettier - Code formatter

一、eslint

介紹

ESLint 是一個 JavaScript 和 TypeScript 代碼的語法規(guī)則和代碼風格檢查工具，可以幫助你：

發(fā)現(xiàn)潛在錯誤（如變量未定義、函數(shù)重復(fù)定義等）
統(tǒng)一代碼風格（比如強制使用單引號、縮進為 2 個空格等）
提高代碼質(zhì)量（比如提示不要使用 ==，而應(yīng)該用 ===）

ESLint 會根據(jù)你配置的規(guī)則（eslint.config.js或 .eslintrc 文件）掃描代碼，然后告訴你哪里不符合這些規(guī)則。

例如：

const a = "hello"
console.log(a)

如果 ESLint 配置了以下規(guī)則：

{
  "rules": {
    "semi": ["error", "always"],  // 強制加分號
    "quotes": ["error", "single"] // 強制使用單引號
  }
}

它會提示你：

應(yīng)該用單引號：“hello” → ‘hello’
每行結(jié)尾要加分號

為什么要用 ESLint？

團隊開發(fā)中可以統(tǒng)一代碼風格
早發(fā)現(xiàn)低級錯誤，避免運行時報錯
配合 IDE（如 VSCode）或 Git hook（如 Husky）可以實時檢查

使用

1.修改包配置文件packge.json依賴如下

{
    "name": "kaishu-ui-admin-vue3-master", // 項目名稱，自行修改
    "private": true,
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc -b && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "vue": "3.5.12"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.4",
        "typescript": "5.3.3",
        "vite": "4.5.11",
        "vue-tsc": "^1.8.27",

        "@typescript-eslint/eslint-plugin": "^7.1.0",
        "@typescript-eslint/parser": "^7.1.0",
        "@unocss/eslint-config": "^0.57.4",
        "@unocss/eslint-plugin": "66.1.0-beta.5",

        "eslint": "^8.57.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-define-config": "^2.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-vue": "^9.22.0"
    }
}

2.下載依賴，pnpm i

3.新建eslint配置文件，.eslintrc.js 與 .eslintignore，內(nèi)容如下

.eslintrc.js文件

// @ts-check
const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
    // 根配置，ESLint 將停止在父目錄中查找配置文件
    root: true,

    // 設(shè)置腳本的運行環(huán)境
    env: {
        browser: true, // 瀏覽器全局變量
        node: true, // Node.js 全局變量和作用域
        es6: true // 啟用 ES6 語法支持
    },

    // 使用 Vue 的 ESLint 解析器
    parser: 'vue-eslint-parser',

    // 解析器選項
    parserOptions: {
        parser: '@typescript-eslint/parser', // 解析 TypeScript
        ecmaVersion: 2020, // 使用 ES2020 語法
        sourceType: 'module', // 使用 ECMAScript 模塊
        ecmaFeatures: {
            jsx: true // 允許 JSX
        }
    },

    // 繼承的規(guī)則集
    extends: [
        'plugin:vue/vue3-recommended', // Vue 3 推薦規(guī)則
        'plugin:@typescript-eslint/recommended', // TypeScript 推薦規(guī)則
        'plugin:prettier/recommended' // Prettier 推薦規(guī)則(解決與 ESLint 的沖突)
    ],

    // 自定義規(guī)則
    rules: {
        "semi": ["error", "never"], // 禁止使用分號
        'prettier/prettier': 'warn', // 關(guān)閉 prettier 的 ESLint 校驗
    }
})

.eslintignore文件

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/node_modules/*
/dist*
/src/main.ts

4.packge.json中新增運行指令

"scripts": {
       ...
       "lint": "eslint --ext .js,.ts,.vue ./src" //eslint檢查錯誤指令
},

5.測試，在App.vue文件中某代碼行后面加上;，運行命令pnpm run lint，可以看到控制臺報錯表明App.vue文件中有額外的分號，如下

D:\kaishu\kaishu-project\kaishu-ui-admin-vue3-master\src\App.vue
2:53 error Extra semicolon semi

二、prettier

介紹

Prettier 是一個代碼格式化工具，用于自動統(tǒng)一和美化代碼風格，支持多種編程語言（如 JavaScript、TypeScript、HTML、CSS、JSON、Markdown 等）。它的核心目標是通過自動格式化代碼來減少開發(fā)人員在代碼風格上的爭論，讓大家專注于代碼本身的邏輯和功能。

Prettier 的主要特點

一致的代碼風格：不依賴團隊成員的個人格式化習慣，所有代碼格式統(tǒng)一。
開箱即用：配置簡單，也可以使用默認配置快速上手。
自動格式化：保存文件時自動格式化，無需手動對齊、縮進。
多語言支持：支持 JS/TS、HTML、CSS、JSON、Markdown、YAML 等。
集成方便：可以與 VS Code、WebStorm、Git Hooks、CI 工具集成。

使用

1.packge.json新增依賴

"devDependencies": {
	...
	"prettier": "^3.2.5",
	"prettier-eslint": "^16.3.0"
}

2.下載依賴，pnpm i

3.在./vscode文件下新建setting.json文件，該文件會覆蓋vscode自帶setting.json文件，文件內(nèi)容配置如下。這樣的話檢驗只開一個vscode窗口，不然會沖突

{
  "workbench.colorTheme": "Quiet Light", // 風格
  "window.zoomLevel": 1, // 整個窗口顯示縮放級別
  "git.autofetch": true, // 自動拉取
  "editor.fontSize": 18, // 編輯器內(nèi)字體大小
  "editor.formatOnSave": true, // 保存時格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 設(shè)置默認格式化器為 Prettier
}

ps:eslint 中的prettier/prettier屬性需開放，不能為off，改為warn/error

4.測試，修改文件中代碼縮進，自動保存，代碼格式會自動調(diào)整。

總結(jié)

方面	ESLint	Prettier
主要目的	代碼質(zhì)量和規(guī)范檢查（代碼風格、潛在錯誤）	代碼格式化（自動統(tǒng)一代碼排版）
功能	- 發(fā)現(xiàn)潛在錯誤（如未定義變量、死代碼）	- 自動調(diào)整縮進、換行、空格、分號等格式
	- 規(guī)范代碼風格（如變量命名、語句順序）	- 幾乎不關(guān)注代碼邏輯，只關(guān)注“外觀”
規(guī)則靈活性	規(guī)則豐富，且可自定義	規(guī)則固定，配置項很少，注重統(tǒng)一
處理方式	代碼檢查工具，發(fā)現(xiàn)問題并提示（可自動修復(fù)部分）	代碼格式化工具，直接修改代碼樣式
應(yīng)用范圍	代碼風格、最佳實踐、潛在錯誤、復(fù)雜規(guī)則	代碼縮進、換行、括號位置、引號類型等格式