前端工程化11：ESLint+Prettier代码规范统一，团队项目强制代码格式化文章目录前端工程化11：ESLint+Prettier代码规范统一，团队项目强制代码格式化前言一、核心概念区分1. ESLint 做什么？2. Prettier 做什么？3. 企业标准规则二、Vite / Webpack 项目通用集成1. 安装核心依赖2. 初始化 ESLint 配置三、创建配置文件1. .eslintrc.js（ESLint 配置）2. .prettierrc（Prettier 格式化规则）3. .eslintignore（忽略检查文件）四、配置脚本命令五、VSCode 编辑器配置（保存自动格式化）1. 安装两个插件2. 新建 .vscode/settings.json六、企业团队强制规范：Git 提交拦截1. 安装依赖2. 启用 Git 钩子3. 添加提交前校验4. package.json 增加配置七、团队通用规范规则（企业常用）八、常见冲突与解决方案1. ESLint 与 Prettier 冲突2. Webpack / Vite 编译时报错文末总结前言在团队协作开发中，最头疼的永远不是业务逻辑，而是代码风格混乱。每个人的缩进、分号、引号、换行习惯各不相同，导致代码仓库提交记录杂乱、代码可读性极差、Code Review 效率极低。ESLint + Prettier是前端团队统一代码规范的标准黄金组合，也是企业面试、入职必配工程化环节。ESLint：负责代码质量检查（语法错误、未使用变量、潜在bug）Prettier：负责代码格式美化（缩进、引号、分号、换行）本篇手把手带你在Webpack/Vite 项目中集成 ESLint + Prettier，实现：保存自动格式化、代码错误实时提示、Git 提交强制校验、团队统一代码风格。一、核心概念区分1. ESLint 做什么？检查语法错误检查未使用变量检查危险代码强制代码书写规范属于代码质量检查工具2. Prettier 做什么？统一缩进（2空格 / 4空格）统一