vue项目自动化代码规范的核心是eslint（质量检查）、prettier（格式化）、husky（git钩子）与lint-staged（暂存区校验）协同：eslint检测错误并配合prettier统一风格，husky在pre-commit时触发lint-staged对js/vue/ts文件执行--fix和--write，实现提交前自动修复。
在 Vue 项目中实现自动化代码规范格式化，核心是把 ESLint + Prettier + Husky + lint-staged 串联起来，让代码在提交前自动检查并修复常见问题，避免人工反复调整。
配置 ESLint 和 Prettier 统一规则
ESLint 负责代码质量与潜在错误检测，Prettier 负责代码风格（缩进、引号、换行等）统一。二者需协同工作，避免冲突：
- 安装依赖：
npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-typescript @vue/eslint-config-prettier - 在
.eslintrc.cjs中启用plugin:prettier/recommended，并确保它放在 extends 数组末尾（覆盖优先级最高） - 新建
.prettierrc显式定义风格偏好，例如：
{ "semi": false, "singleQuote": true, "tabWidth": 2 } - 添加
.eslintignore排除node_modules/、dist/、public/等目录
用 lint-staged + Husky 在提交前自动修复
仅靠手动运行 eslint --fix 或 prettier --write 效率低，容易遗漏。通过 Git 钩子自动触发才是可持续方案：
- 安装：
npm install -D husky lint-staged - 初始化 Husky：
npx husky install，并设置package.json的 prepare 脚本：
"prepare": "husky install" - 添加 pre-commit 钩子：
npx husky add .husky/pre-commit "npx lint-staged" - 在
lint-staged配置中指定对*.{js,vue,ts}文件执行：
"eslint --fix" 和
"prettier --write"
编辑器实时提示与保存自动格式化（可选但推荐）
开发过程中及时反馈能减少后期修复成本。VS Code 用户可配合插件提升体验：
- 安装插件：ESLint 和 Prettier
- 在 VS Code 设置中开启：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 确保项目根目录有
.vscode/settings.json，内容包含：
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode" - 注意：若 ESLint 和 Prettier 规则冲突，保存时可能反复修改——务必按上一步先统一配置
补充：Vue SFC 特殊处理（如 缩进）
Vue 单文件组件的 <template></template> 默认不被 Prettier 支持，需额外配置：
- 安装：
npm install -D @prettier/plugin-pug（如用 pug）或更通用的@prettier/plugin-vue - 在
.prettierrc中加入：
"plugins": ["@prettier/plugin-vue"] - 确保
vue/multi-word-component-names等 Vue 特有规则由@vue/eslint-config-typescript提供，并在 ESLint 配置中启用plugin:vue/vue3-essential或对应版本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
