Vue3项目ESLint+Prettier代码规范配置指南

1. 项目背景与目标这个系列教程的第三部分将重点解决Vue3项目中的代码规范问题。作为现代前端开发的标准配置ESLint和Prettier的组合能够显著提升团队协作效率。Vite作为新一代构建工具与TypeScript的结合更是如虎添翼。在实际开发中我们经常会遇到这样的场景不同开发者提交的代码风格各异有的用单引号有的用双引号有的喜欢加分号有的不加缩进有用2空格有用4空格的。这种风格不统一会导致代码库看起来杂乱无章增加维护成本。而通过ESLintPrettier的组合我们可以实现自动格式化代码统一团队代码风格静态代码分析提前发现潜在错误类型检查减少运行时错误保存时自动修复提升开发效率2. 环境准备与项目初始化2.1 创建Vite项目首先确保你的开发环境已经安装了Node.js建议版本16和pnpm比npm/yarn更快的包管理器。打开终端执行以下命令创建项目pnpm create vitelatest vue3-admin --template vue-ts这个命令会创建一个基于Vue3和TypeScript的Vite项目。创建完成后进入项目目录并安装基础依赖cd vue3-admin pnpm install2.2 项目结构分析初始化后的项目结构如下vue3-admin/ ├── public/ # 静态资源 ├── src/ # 源代码 │ ├── assets/ # 资源文件 │ ├── components/ # 组件 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── index.html # 主页面 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript配置 └── vite.config.ts # Vite配置3. ESLint配置详解3.1 安装与初始化ESLint执行以下命令初始化ESLintpnpx eslint --init在初始化过程中我们需要做出以下选择检查语法和发现问题使用ES模块选择Vue.js框架使用TypeScript运行在浏览器和Node环境配置文件格式选择TypeScript安装jiti用于低版本Node读取TS配置初始化完成后项目会新增eslint.config.ts文件和一系列依赖。3.2 配置文件解析打开eslint.config.ts我们可以看到基础配置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([ { files: [**/*.{js,mjs,cjs,ts,mts,cts,vue}], plugins: { js }, extends: [js/recommended], languageOptions: { globals: { ...globals.browser, ...globals.node } }, rules: { semi: [warn, always], }, }, tseslint.configs.recommended, pluginVue.configs[flat/essential], { files: [**/*.vue], languageOptions: { parserOptions: { parser: tseslint.parser } }, }, ]);这个配置做了以下几件事设置检查的文件类型启用ESLint的JS核心规则配置浏览器和Node的全局变量添加TypeScript支持添加Vue文件支持设置基础规则如强制分号3.3 添加脚本命令在package.json中添加以下脚本scripts: { lint: eslint . --ext .vue,.js,.ts, lint:fix: eslint . --ext .vue,.js,.ts --fix }现在可以运行以下命令检查或修复代码pnpm lint # 检查代码 pnpm lint:fix # 自动修复可修复的问题4. Prettier集成4.1 安装依赖Prettier负责代码格式化与ESLint配合使用pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D这三个包的作用分别是prettier: 核心格式化工具eslint-config-prettier: 关闭与Prettier冲突的ESLint规则eslint-plugin-prettier: 将Prettier作为ESLint规则运行4.2 修改ESLint配置更新eslint.config.ts添加Prettier相关配置import eslintConfigPrettier from eslint-config-prettier/flat; import eslintPluginPrettierRecommended from eslint-plugin-prettier/recommended; export default defineConfig([ // ...原有配置 eslintConfigPrettier, eslintPluginPrettierRecommended, ]);重要提示Prettier配置必须放在最后因为它会覆盖前面的格式相关规则4.3 配置Prettier规则在项目根目录创建.prettierrc文件{ printWidth: 120, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, quoteProps: as-needed, jsxSingleQuote: false, trailingComma: es5, bracketSpacing: true, bracketSameLine: false, arrowParens: always, vueIndentScriptAndStyle: true, endOfLine: lf }这些规则的含义printWidth: 每行最大120字符tabWidth: 2空格缩进singleQuote: 使用单引号trailingComma: 多行时保留尾随逗号vueIndentScriptAndStyle: Vue文件中script和style内容缩进5. VSCode集成5.1 安装必要插件在VSCode中安装以下插件ESLintPrettier - Code formatterVolar (Vue语言支持)5.2 配置自动格式化在VSCode设置中(settings.json)添加{ editor.defaultFormatter: esbenp.prettier-vscode, editor.formatOnSave: true, eslint.validate: [javascript, typescript, vue], editor.codeActionsOnSave: { source.fixAll.eslint: true } }这样配置后保存文件时会自动运行ESLint修复自动用Prettier格式化代码6. 常见问题与解决方案6.1 ESLint无法识别Vue文件如果遇到Vue文件不被ESLint识别的问题检查确保安装了eslint-plugin-vue检查eslint.config.ts中Vue相关配置是否正确确保VSCode的ESLint插件已启用6.2 Prettier与ESLint规则冲突常见的冲突包括引号规则分号规则缩进规则解决方案确保eslint-config-prettier正确配置检查配置顺序Prettier配置必须在最后统一.prettierrc和ESLint规则6.3 保存时无法自动修复如果保存时没有自动修复检查VSCode的ESLint插件是否安装并启用工作区是否正确识别了项目根目录的ESLint配置检查settings.json中的配置是否正确7. 高级配置技巧7.1 自定义规则在eslint.config.ts中可以添加自定义规则例如rules: { vue/multi-word-component-names: off, // 关闭组件名必须多单词的要求 typescript-eslint/no-explicit-any: warn, // 使用any时警告 no-console: process.env.NODE_ENV production ? error : off // 生产环境禁止console }7.2 Git Hooks集成可以通过Husky在提交前自动检查代码安装Huskypnpm add husky -D npx husky install添加pre-commit钩子npx husky add .husky/pre-commit pnpm lint这样在每次git commit前都会自动运行lint检查。7.3 忽略特定文件创建.eslintignore文件来忽略不需要检查的文件**/*.min.js dist/ node_modules/8. 项目实战建议在实际的后台管理系统开发中建议组件规范组件目录按功能划分组件名使用大驼峰命名一个组件一个目录包含.vue文件、样式和测试TypeScript最佳实践为所有props定义类型避免使用any类型为API响应定义接口目录结构优化src/ ├── api/ # API请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── types/ # 类型定义 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue └── main.ts性能优化按需加载路由组件使用Vite的代码分割合理使用keep-alive缓存组件这套配置已经在多个实际项目中验证过能够显著提升开发效率和代码质量。特别是在团队协作中统一的代码风格可以减少很多不必要的争论和代码审查时间。