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

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

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

準(zhǔn)備

VS Code 插件

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

一、eslint

介紹

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

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

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

例如：

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

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

{
  "rules": {
    "semi": ["error", "always"],  // 強(qiáng)制加分號(hào)
    "quotes": ["error", "single"] // 強(qiáng)制使用單引號(hào)
  }
}

它會(huì)提示你：

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

為什么要用 ESLint？

團(tuán)隊(duì)開(kāi)發(fā)中可以統(tǒng)一代碼風(fēng)格
早發(fā)現(xiàn)低級(jí)錯(cuò)誤，避免運(yùn)行時(shí)報(bào)錯(cuò)
配合 IDE（如 VSCode）或 Git hook（如 Husky）可以實(shí)時(shí)檢查

使用

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

{
    "name": "kaishu-ui-admin-vue3-master", // 項(xiàng)目名稱，自行修改
    "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è)置腳本的運(yùn)行環(huán)境
    env: {
        browser: true, // 瀏覽器全局變量
        node: true, // Node.js 全局變量和作用域
        es6: true // 啟用 ES6 語(yǔ)法支持
    },

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

    // 解析器選項(xiàng)
    parserOptions: {
        parser: '@typescript-eslint/parser', // 解析 TypeScript
        ecmaVersion: 2020, // 使用 ES2020 語(yǔ)法
        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"], // 禁止使用分號(hào)
        'prettier/prettier': 'warn', // 關(guān)閉 prettier 的 ESLint 校驗(yàn)
    }
})

.eslintignore文件

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

4.packge.json中新增運(yùn)行指令

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

5.測(cè)試，在App.vue文件中某代碼行后面加上;，運(yùn)行命令pnpm run lint，可以看到控制臺(tái)報(bào)錯(cuò)表明App.vue文件中有額外的分號(hào)，如下

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

二、prettier

介紹

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

Prettier 的主要特點(diǎn)

一致的代碼風(fēng)格：不依賴團(tuán)隊(duì)成員的個(gè)人格式化習(xí)慣，所有代碼格式統(tǒng)一。
開(kāi)箱即用：配置簡(jiǎn)單，也可以使用默認(rèn)配置快速上手。
自動(dòng)格式化：保存文件時(shí)自動(dòng)格式化，無(wú)需手動(dòng)對(duì)齊、縮進(jìn)。
多語(yǔ)言支持：支持 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文件，該文件會(huì)覆蓋vscode自帶setting.json文件，文件內(nèi)容配置如下。這樣的話檢驗(yàn)只開(kāi)一個(gè)vscode窗口，不然會(huì)沖突

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

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

4.測(cè)試，修改文件中代碼縮進(jìn)，自動(dòng)保存，代碼格式會(huì)自動(dòng)調(diào)整。

總結(jié)

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