Vue3+Vite+TS项目集成ESLint与Prettier全攻略

1. 项目背景与目标这个系列教程的第三部分我们将深入探讨如何在Vue3ViteTS项目中集成ESLint和Prettier打造一个规范化的后台管理系统开发环境。现代前端开发中代码质量和风格统一性越来越受到重视特别是在团队协作场景下。Vue3的Composition API与TypeScript的强类型系统结合能大幅提升代码可维护性。而Vite作为新一代构建工具其快速的冷启动和热更新能力让开发体验更加流畅。但仅有这些还不够我们还需要通过ESLint捕获潜在错误和不规范的代码模式使用Prettier统一代码风格配置保存时自动格式化减少手动调整格式的时间确保TypeScript类型检查与代码规范协同工作2. 环境准备与初始化2.1 创建基础项目首先确保你已经安装了Node.js建议18版本和pnpm性能优于npm/yarn# 使用Vite官方脚手架初始化项目 pnpm create vitelatest vue3-admin --template vue-ts选择配置时框架Vue变体TypeScript其他选项保持默认2.2 核心依赖版本选择当前推荐的稳定版本组合{ vue: ^3.4.0, vite: ^5.0.0, typescript: ^5.3.0, eslint: ^8.56.0, prettier: ^3.2.0 }注意Vue3推荐使用script setup语法它能完美配合TypeScript类型推导。在tsconfig.json中确保开启了严格模式{ compilerOptions: { strict: true } }3. ESLint配置详解3.1 初始化ESLint执行ESLint初始化命令pnpx eslint --init配置选项如下检查类型语法问题模块类型ES modules框架Vue使用TypeScript是运行环境Browser Node配置文件格式TypeScript安装jiti低版本Node需要是包管理器pnpm这会生成基础的eslint.config.ts文件并安装相关依赖。3.2 自定义规则配置修改eslint.config.ts添加Vue3和TypeScript特定规则import { defineConfig } from eslint/config import js from eslint/js import globals from globals import tseslint from typescript-eslint import pluginVue from eslint-plugin-vue export default defineConfig([ { files: [**/*.{js,ts,vue}], plugins: { js }, languageOptions: { globals: { ...globals.browser, ...globals.node }, parserOptions: { ecmaVersion: latest, sourceType: module } }, rules: { vue/multi-word-component-names: off, no-unused-vars: warn } }, tseslint.configs.recommended, pluginVue.configs[flat/recommended], { files: [**/*.vue], rules: { vue/script-setup-uses-vars: error } } ])关键配置说明关闭Vue多单词组件名限制后台系统常用短组件名开启script setup语法检查未使用变量警告而非报错4. Prettier集成与风格统一4.1 安装与基础配置安装必要依赖pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D创建.prettierrc.jsmodule.exports { printWidth: 100, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: all, bracketSpacing: true, arrowParens: always, vueIndentScriptAndStyle: true, endOfLine: lf }4.2 与ESLint协同工作更新eslint.config.ts添加Prettier集成import eslintConfigPrettier from eslint-config-prettier import eslintPluginPrettier from eslint-plugin-prettier // 在原有配置数组最后添加 export default defineConfig([ // ...其他配置 eslintConfigPrettier, { plugins: { prettier: eslintPluginPrettier }, rules: { prettier/prettier: error } } ])5. 开发环境优化5.1 VSCode自动格式化配置在.vscode/settings.json中添加{ editor.defaultFormatter: esbenp.prettier-vscode, editor.formatOnSave: true, editor.codeActionsOnSave: { source.fixAll.eslint: true }, eslint.validate: [javascript, typescript, vue] }5.2 解决常见冲突问题TS类型导入报错 在eslint.config.ts中添加{ rules: { typescript-eslint/consistent-type-imports: [ error, { prefer: type-imports } ] } }Vue模板缩进问题 在.prettierrc.js中添加{ vueIndentScriptAndStyle: true }6. 构建与生产环境配置6.1 添加lint脚本package.json中添加{ scripts: { lint: eslint . --ext .js,.ts,.vue, lint:fix: eslint . --ext .js,.ts,.vue --fix, prettier: prettier --check ., prettier:fix: prettier --write . } }6.2 Git提交前检查安装husky和lint-stagedpnpm add husky lint-staged -D配置package.json{ lint-staged: { *.{js,ts,vue}: [ eslint --fix, prettier --write ] } }初始化huskynpx husky init echo npx lint-staged .husky/pre-commit7. 高级配置技巧7.1 按需配置规则针对不同文件类型设置不同规则{ files: [**/*.ts], rules: { typescript-eslint/explicit-function-return-type: error } }7.2 自定义格式化规则对于特定目录禁用规则{ files: [src/assets/**], rules: { prettier/prettier: off } }7.3 性能优化.eslintignore文件添加dist/ node_modules/ *.d.ts8. 常见问题解决方案8.1 ESLint报错但代码正确可能是解析器版本问题尝试pnpm add typescript-eslint/parserlatest -D8.2 Prettier不生效检查VSCode是否安装了Prettier插件项目根目录是否有.prettierrc文件VSCode工作区设置是否被覆盖8.3 Vue文件格式化异常确保安装了Volar插件而非Vetur并在VSCode设置中{ volar.format.defaultFormatter.html: prettier }9. 项目结构建议最终推荐的项目结构├── .eslintignore ├── .eslintrc.js ├── .prettierrc.js ├── .vscode/ │ └── settings.json ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ ├── composables/ # 组合式函数 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia状态管理 │ ├── styles/ # 全局样式 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── App.vue │ └── main.ts ├── tsconfig.json └── vite.config.ts10. 持续维护建议定期更新依赖版本团队统一IDE配置添加注释说明特殊规则文档记录规范约定这套配置已经过多个实际项目验证能有效提升Vue3后台管理系统的开发效率和代码质量。根据团队实际情况可以进一步调整规则严格程度。