Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程 全程避坑，亲测有效）

在 Vite 项目中配置自定义 ESLint 规则主要分为安装依赖、创建配置文件和可选集成到开发服务器三个核心步骤。以下是详细指南第一步安装必要的 ESLint 依赖首先你需要安装 ESLint 核心包以及针对你项目技术栈的解析器和插件。1. 安装基础包# npmnpminstall--save-dev eslint# yarnyarnadd-Deslint# pnpmpnpmadd-Deslint2. 根据项目类型安装对应插件对于 JavaScript 项目通常只需要eslint本身。对于 TypeScript 项目pnpmadd-Dtypescript-eslint/parser typescript-eslint/eslint-plugin对于 Vue 项目 (Vue 3)pnpmadd-Deslint-plugin-vue第二步创建并配置.eslintrc.cjs文件这是配置自定义规则的核心文件。Vite 项目推荐使用.cjs后缀以确保兼容性。在项目根目录下创建.eslintrc.cjs文件并根据你的需求进行配置。基础模板 (JavaScript)// .eslintrc.cjsmodule.exports{// 指定环境让 ESLint 知道哪些全局变量是合法的env:{browser:true,es2021:true,node:true,},// 指定 ESLint 的推荐规则集extends:[eslint:recommended],// 指定解析器选项parserOptions:{ecmaVersion:latest,// 支持最新的 ECMAScript 特性sourceType:module,// 使用 ES 模块},// 自定义规则rules:{// 例如将 console.log 在生产环境设为警告在开发环境关闭no-console:process.env.NODE_ENVproduction?warn:off,no-debugger:process.env.NODE_ENVproduction?warn:off,// 其他自定义规则示例semi:[error,always],// 强制使用分号quotes:[error,single],// 强制使用单引号indent:[error,2],// 强制使用2个空格缩进},};TypeScript Vue 3 模板// .eslintrc.cjsmodule.exports{env:{browser:true,es2021:true,},extends:[eslint:recommended,typescript-eslint/recommended,// TypeScript 的推荐规则plugin:vue/vue3-essential,// Vue 3 的基础规则// 或者使用更严格的规则: plugin:vue/vue3-recommended],overrides:[],parser:vue-eslint-parser,// 用于解析 .vue 文件parserOptions:{ecmaVersion:latest,parser:typescript-eslint/parser,// 在 .vue 文件中解析 TypeScriptsourceType:module,extraFileExtensions:[.vue],},plugins:[vue,typescript-eslint],rules:{// 在这里添加你的自定义规则vue/multi-word-component-names:off,// 关闭组件名必须多单词的规则typescript-eslint/no-explicit-any:warn,// 将 any 类型设为警告no-unused-vars:off,// 关闭基础规则由 TS 插件接管typescript-eslint/no-unused-vars:[error],// 使用 TS 插件的规则},};关键点rules对象就是你定义自定义规则的地方。规则的值可以是off或0关闭规则。warn或1将规则视为警告不会导致构建失败。error或2将规则视为错误会导致 lint 失败。你可以查阅 ESLint 官方规则文档、typescript-eslint 规则 或 eslint-plugin-vue 规则 来找到所有可用的规则。第三步可选集成到 Vite 开发服务器为了让 ESLint 错误直接在浏览器中显示你可以安装vite-plugin-eslint插件。安装插件:pnpmadd-Dvite-plugin-eslint配置vite.config.js:// vite.config.jsimport{defineConfig}fromvite;importvuefromvitejs/plugin-vue;importeslintPluginfromvite-plugin-eslint;// 引入插件exportdefaultdefineConfig({plugins:[vue(),eslintPlugin({// 添加插件cache:false,// 开发时建议关闭缓存以便实时看到错误}),],});完成此步骤后在开发模式 (vite dev) 下任何不符合 ESLint 规则的代码都会在浏览器中以醒目的错误或警告形式弹出极大地提升了开发体验。额外建议添加 Lint 脚本在package.json中添加脚本来方便地运行 ESLint{scripts:{lint:eslint . --ext .js,.jsx,.ts,.tsx,.vue,lint:fix:eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix}}npm run lint检查整个项目中的代码问题。npm run lint:fix自动修复那些可以被自动修复的问题如分号、引号、缩进等。通过以上三步你就可以在 Vite 项目中成功配置并使用自定义的 ESLint 规则了。