快捷導(dǎo)航

Vue3 + ESLint9代碼規(guī)范配置指南

更新時間：2026年05月24日 09:32:21 作者：叫我少年

在Vue3項(xiàng)目中引入ESLint不僅能提升代碼美觀度,通過eslint-plugin-vueue插件,以及扁平配置方式,實(shí)現(xiàn)高效統(tǒng)一的代碼風(fēng)格檢查,具有一定的參考價值,感興趣的可以了解一下

在 Vue 3 項(xiàng)目里引入 ESLint，不只是為了“看著舒服”——它能幫你提前揪出潛在 bug，統(tǒng)一團(tuán)隊(duì)的代碼風(fēng)格，避免因?yàn)榭s進(jìn)、引號這類。關(guān)鍵插件是 eslint-plugin-vue，它專門為 Vue 文件提供了針對性規(guī)則。

參考：ESLint v9 官方文檔

開始之前：裝包與初始化

一行命令搞定依賴：

# 安裝 ESLint 核心庫
npm install --save-dev eslint
# 交互式生成配置文件
npx eslint --init

初始化過程會問一些問題（比如你用的是哪種模塊格式、框架、TypeScript 還是 JS 等），一路按項(xiàng)目需求選就行。

配置腳本：寫入package.json

把下面這段加進(jìn) scripts? 里，日常敲 npm run lint? 就能檢查所有 .js?、.ts?、.vue 文件：

"scripts": {
  "dev": "vite",
  "build": "vue-tsc -b && vite build",
  "preview": "vite preview",
  "lint": "eslint . --ext .js,.ts,.vue",
  "lint:fix": "eslint . --ext .js,.ts,.vue --fix",
  "lint:src": "eslint src --ext .js,.ts,.vue",
  "lint:typescript": "eslint . --ext .ts,.vue",
  "lint:report": "eslint . --ext .js,.ts,.vue --format html > eslint-report.html",
  "precommit": "lint-staged"
}

?常見坑?：如果你用 pnpm，別忘了裝 lint-staged? 和 husky?，否則 precommit 腳本不會生效。

配置文件：eslint.config.ts（ESLint 9 風(fēng)格）

ESLint 9 全面擁抱扁平配置（flat config），不再用 .eslintrc.js。以下是一個適配 Vue 3 + TypeScript 的示例：

import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import { defineConfig } from 'eslint/config';
export default defineConfig([
  {
    ignores: [
      'node_modules',
      'dist',
      '.gitignore',
      'package.json',
      'package-lock.json',
      '.DS_Store',
      'dev-dist',
      'dist_electron',
      '*.d.ts',
      'src/assets/**'
    ],
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
    plugins: { js },
    extends: ['js/recommended'],
    languageOptions: { globals: globals.browser }
  },
  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
  /** js推薦配置 */
  tseslint.configs.recommended,
  /** vue推薦配置 */
  pluginVue.configs['flat/essential'],
  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } }
]);

劃重點(diǎn)：pluginVue.configs['flat/essential']? 是 ESLint 9 下 eslint-plugin-vue? 的推薦入口。如果你需要更強(qiáng)的規(guī)則（如 strongly-recommended?），可以改為 flat/strongly-recommended。

到此這篇關(guān)于Vue3 + ESLint9代碼規(guī)范配置指南的文章就介紹到這了,更多相關(guān)Vue3 ESLint9代碼規(guī)范內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！‍

您可能感興趣的文章: