蝨孨槑黽1. 为什么Vue3+TypeScript项目需要ESLint和Prettier
在开始配置之前，我们先搞清楚为什么现代前端项目都需要这两样工具。我接手过不少遗留项目，发现一个规律：没有代码规范约束的项目，经过3-6个月迭代后，代码风格就会变得五花八门。有的同事喜欢加分号，有的不加；有的用双引号，有的用单引号；缩进有2空格、4空格甚至tab键混用的情况。这种风格混乱会导致：
- 代码合并冲突增加：无关格式修改会干扰真正的代码变更
- 可读性下降：团队成员需要不断适应不同风格
- 隐性bug风险：不规范的代码可能隐藏类型错误或语法陷阱
ESLint和Prettier的组合正好解决了这些问题：
- ESLint：负责代码质量检查，比如变量未使用、错误的类型定义、不安全的语法等
- Prettier：专注代码格式化，统一缩进、引号、换行等风格问题
提示：Vue3+TypeScript项目尤其需要这套工具链，因为组合式API的灵活性加上TS类型系统，没有静态检查很容易写出运行时才会暴露的问题。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与依赖安装
2.1 项目基础要求
在开始前确保你的项目满足：
- 使用Vue3（Options API或Composition API均可）
- 已集成TypeScript（有tsconfig.json）
- 基于Vite或Webpack构建（本文配置通用）
2.2 安装核心依赖
打开终端，在项目根目录执行：
bash复制npm install eslint prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier -D
这里解释下每个包的作用：
| 依赖包 | 用途 | 必选 |
|---|---|---|
| eslint | 代码检查核心 | ✅ |
| prettier | 代码格式化核心 | ✅ |
| eslint-plugin-vue | Vue语法规则支持 | ✅ |
| @typescript-eslint/e |