vue项目中eslint管代码质量、prettier管格式，需安装eslint-config-prettier和eslint-plugin-prettier并按序配置；推荐用eslint.config.ts扁平化配置，vs code启用对应插件及保存自动修复，git提交前通过husky+lint-staged校验。
Vue 项目里配好 ESLint 和 Prettier，核心就一件事：让 ESLint 管质量（比如变量未定义、语法错误、逻辑隐患），Prettier 管格式（比如缩进、引号、换行、空格）。两者不打架，保存文件时自动修复+格式化，团队写出来的代码才真正统一。
明确分工，避免规则冲突
ESLint 默认自带一些风格类规则（如 quotes、indent、semi），这些和 Prettier 的设定天然容易冲突。必须让 ESLint 放手格式控制权：
- 安装
eslint-config-prettier：它会自动关闭所有与 Prettier 冲突的 ESLint 规则 - 安装
eslint-plugin-prettier：把 Prettier 的格式检查结果当作 ESLint 错误/警告来报告 - 在 ESLint 配置的
extends中，把prettier放在最后——顺序很重要，后加载的配置会覆盖前面的同名规则
配置文件怎么写（推荐扁平化 config）
Vue 3 + TypeScript 项目建议用 eslint.config.ts（ESLint 新版扁平配置），比旧版 .eslintrc.js 更清晰、类型友好：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
languageOptions.parser设为vue-eslint-parser，支持解析.vue文件 -
languageOptions.parserOptions.parser设为@typescript-eslint/parser，保证 TS 类型检查 -
plugins注册vue、@typescript-eslint、prettier -
rules中启用'prettier/prettier': 'error'，并确保读取根目录的.prettierrc.json
VS Code 编辑器要设对
光配好工具还不够，编辑器得知道怎么用：
- 装两个插件：ESLint（官方）和 Prettier（官方）
- 禁用可能干扰的插件，比如
Beautify或旧版Vetur的格式化功能 - 在工作区
.vscode/settings.json中指定默认格式化工具和保存行为：
"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
加点“保险”：Git 提交前自动校验
靠人自觉容易漏，用 Git Hooks 把住最后一道关：
- 用
simple-git-hooks或husky在pre-commit钩子中运行npx eslint --fix && npx prettier --write - 配合
lint-staged只检查暂存区文件，速度快、不卡提交 - 这样即使有人没开编辑器自动格式化，代码也过不了提交这关
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
