Vite+Vue3+TS项目实战：从零配置ESLint+Prettier+Stylelint（避坑指南）

Vite+Vue3+TS项目实战：从零配置ESLint+Prettier+Stylelint（避坑指南）

1. 为什么需要代码规范工具链？

现代前端工程化开发中，代码质量保障体系离不开三大核心工具：ESLint负责语法检查，Prettier统一代码风格，Stylelint规范样式书写。这套组合拳能解决以下痛点：

• 团队协作难：不同开发者的编码习惯导致代码库风格混乱
• 低级错误多：未定义的变量、错误的语法等常见问题频发
• 代码审查累：人工检查格式问题消耗大量CR时间
• 维护成本高：风格不一致的代码增加后续维护难度

在Vite+Vue3+TypeScript技术栈中，这套工具链的配置尤为关键，因为：

1. Vue SFC文件需要特殊解析规则
2. TypeScript类型系统需要额外校验
3. Vite的快速刷新特性需要与lint工具良好配合

2. 基础环境搭建

2.1 初始化项目

npm create vite@latest vue3-lint-demo --template vue-ts
cd vue3-lint-demo
npm install

2.2 目录结构调整建议

├── .vscode/            # IDE配置
│   └── settings.json
├── src/
│   ├── assets/         # 静态资源
│   ├── components/     # 公共组件
│   ├── styles/         # 全局样式
│   │   └── variables.scss
│   └── ...
├── .eslintrc.cjs       # ESLint配置
├── .prettierrc.cjs     # Prettier配置
├── .stylelintrc.cjs    # Stylelint配置
└── vite.config.ts      # Vite配置

3. ESLint深度配置

3.1 核心依赖安装

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue

3.2 配置文件解析

// .eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2021: true, node: true },
  extends: [