1. 项目背景与目标

这个系列教程的第三部分，我们将深入探讨如何在Vue3+Vite+TS项目中集成ESLint和Prettier，打造一个规范化的后台管理系统开发环境。现代前端开发中，代码质量和风格统一性越来越受到重视，特别是在团队协作场景下。

Vue3的Composition API与TypeScript的强类型系统结合，能大幅提升代码可维护性。而Vite作为新一代构建工具，其快速的冷启动和热更新能力，让开发体验更加流畅。但仅有这些还不够，我们还需要：

• 通过ESLint捕获潜在错误和不规范的代码模式
• 使用Prettier统一代码风格
• 配置保存时自动格式化，减少手动调整格式的时间
• 确保TypeScript类型检查与代码规范协同工作

2. 环境准备与初始化

2.1 创建基础项目

首先确保你已经安装了Node.js（建议18+版本）和pnpm（性能优于npm/yarn）：

# 使用Vite官方脚手架初始化项目 pnpm create vite@latest 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

配置选项如下：

1. 检查类型：语法+问题
2. 模块类型：ES modules
3. 框架：Vue
4. 使用TypeScript：是
5. 运行环境：Browser + Node
6. 配置文件格式：TypeScript
7. 安装jiti（低版本Node需要）：是
8. 包管理器：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.js：

module.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 解决常见冲突问题

1. TS类型导入报错： 在eslint.config.ts中添加：

{ rules: { '@typescript-eslint/consistent-type-imports': [ 'error', { prefer: 'type-imports' } ] } }

2. 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-staged：

pnpm add husky lint-staged -D

配置package.json：

{ "lint-staged": { "*.{js,ts,vue}": [ "eslint --fix", "prettier --write" ] } }

初始化husky：

npx husky init echo "npx lint-staged" > .husky/pre-commit

7. 高级配置技巧

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.ts

8. 常见问题解决方案

8.1 ESLint报错但代码正确

可能是解析器版本问题，尝试：

pnpm add @typescript-eslint/parser@latest -D

8.2 Prettier不生效

检查：

1. VSCode是否安装了Prettier插件
2. 项目根目录是否有.prettierrc文件
3. 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.ts

10. 持续维护建议

1. 定期更新依赖版本
2. 团队统一IDE配置
3. 添加注释说明特殊规则
4. 文档记录规范约定

这套配置已经过多个实际项目验证，能有效提升Vue3后台管理系统的开发效率和代码质量。根据团队实际情况，可以进一步调整规则严格程度。