前端工程化规范（ESLintPrettier）实战

20XX/XX/XX前端工程化规范（ESLint+Prettier）实战汇报人:XXXCONTENTS目录01

工程化规范概述02

环境准备与依赖安装03

ESLint配置实战04

Prettier配置实战CONTENTS目录05

Husky与提交校验06

编辑器集成方案07

团队协作落地案例08

实战操作演示工程化规范概述01为什么需要代码规范

01团队协作中的高频痛点同一文件中函数风格混用（箭头函数与普通函数）、字符串引号不统一，导致合并代码时频繁冲突；因未校验"未使用变量"，上线后因undefined调用导致页面白屏，排查2小时才定位到"多余未删除的变量"。

02代码评审效率低下代码评审时30%时间在争论格式问题（如缩进、分号），真正关注逻辑设计的时间被严重压缩，影响团队协作效率。

03隐藏Bug与维护成本隐式全局变量、不合理条件判断等问题未被及时发现，导致线上故障；不同开发者编码风格差异使后续维护变成"拆盲盒"，改一行代码需花10分钟理解前人写法。

04工具组合的解决方案ESLint校验语法错误（如未定义变量），Prettier统一代码格式（如缩进、引号），Husky在代码提交前触发校验，从源头拦截不规范代码，减少60%语法类Bug。ESLint：代码质量守护神ESLint通过静态代码分析，检测语法错误（如未定义变量、不合理条件判断）、潜在bug（如隐式全局变量）及不规范逻辑，减少60%语法类线上问题，提升代码健壮性。Prettier：格式统一美化师Prettier专注代码格式化，统一缩进（2/4空格）、引号（单/双）、换行等风格，消除团队因格式争论导致的30%代码评审时间浪费，实现"零风格争议"协作。黄金组合：质量与风格双保障ESLint负责逻辑校验，Prettier处理格式美化，通过eslint-config-prettier插件解决规则冲突，形成"语法检查+自动格式化"闭环，1天内即可落地团队代码标准。ESLint与Prettier核心价值工具协作流程解析代码提交触发流程代码提交时，Husky拦截提交操作，先由Prettier对代码进行格式化，再通过ESLint进行语法和逻辑校验，校验通过则允许提交，否则终止提交并提示问题。规则优先级处理机制Prettier专注代码格式化，优先级高于ESLint的格式规则；ESLint负责代码质量检查，二者通过eslint-config-prettier插件关闭冲突规则，实现分工协作。自动化检查与修复流程开发过程中，编辑器配置保存时自动触发ESLint修复和Prettier格式化，确保代码实时符合规范；提交前通过lint-staged仅检查暂存区文件，提升效率。环境准备与依赖安装02前置条件检查

Node.js环境要求确保本地已安装Node.js（建议v16+版本），可通过命令验证版本。npm/pnpm/yarn等包管理器需配套安装，推荐使用pnpm以提升依赖安装速度。

项目初始化状态需完成前端项目初始化（如通过Vite、VueCLI或CreateReactApp创建），并已初始化Git仓库（执行过命令），确保项目具备基础工程结构。

编辑器配置准备推荐使用VSCode编辑器，并提前安装ESLint（dbaeumer.vscode-eslint）和Prettier（esbenp.prettier-vscode）插件，为后续自动化格式化做准备。核心依赖安装命令

ESLint核心依赖安装执行命令：npminstalleslint--save-dev或pnpmaddeslint-D，安装语法校验核心工具。

Prettier及冲突解决依赖安装执行命令：npminstallprettiereslint-config-prettiereslint-plugin-prettier--save-dev，其中eslint-config-prettier用于关闭冲突规则，eslint-plugin-prettier实现Prettier规则以ESLint插件形式运行。

Vue/TypeScript项目额外依赖Vue项目需安装：npminstalleslint-plugin-vuevue-eslint-parser--save-dev；TypeScript项目需补充：npminstall@typescript-eslint/eslint-plugin@typescript-eslint/parser--save-dev。

安装命令选择建议推荐使用pnpm安装，命令示例：pnpmaddeslintprettiereslint-config-prettiereslint-plugin-prettier-D，安装速度更快且依赖管理更高效。核心工具包ESLint：静态代码分析工具，检测语法错误与代码质量问题；Prettier：代码格式化工具，统一缩进、引号等格式细节；Husky：Git钩子工具，在提交前触发代码校验。冲突解决包eslint-config-prettier：关闭ESLint中与Prettier冲突的格式规则；eslint-plugin-prettier：将Prettier规则以ESLint插件形式运行，统一报错出口。辅助工具包lint-staged：仅校验Git暂存区文件，提升检查效率；@typescript-eslint/parser：TypeScript语法解析器，适配TS项目；eslint-plugin-vue：Vue项目专用规则插件。依赖包功能说明ESLint配置实战03初始化配置文件ESLint配置文件生成通过终端执行命令，根据交互式提示选择项目类型（如Vue/React）、模块系统、是否使用TypeScript等，自动生成配置文件。推荐选择JSON或JS格式，便于添加注释和动态配置。核心配置项解析配置文件需包含（运行环境，如browser、node）、（继承规则集，如、框架专用规则）、（语法解析器选项）、（自定义规则）等关键节点，实现语法与风格双重校验。Prettier配置文件创建在项目根目录新建文件，定义格式化规则，如（单引号）、（缩进空格数）、（句尾分号）等，确保团队格式统一。忽略文件设置创建和文件，指定无需校验的目录（如、）和文件类型，避免不必要的校验耗时，提升工具运行效率。核心配置项解析

ESLint核心配置项包括env（运行环境）、extends（规则继承）、parserOptions（解析器选项）、plugins（插件）和rules（自定义规则）。env指定代码运行环境如browser、node；extends可继承推荐规则集如eslint:recommended；rules定义具体规则，优先级最高。

Prettier核心配置项常用配置有semi（分号）、singleQuote（单引号）、tabWidth（缩进空格数）、printWidth（行宽）、trailingComma（尾随逗号）等。例如设置singleQuote:true强制使用单引号，tabWidth:2指定缩进为2空格。

规则冲突解决配置通过eslint-config-prettier关闭ESLint中与Prettier冲突的格式规则，eslint-plugin-prettier将Prettier规则以ESLint插件形式运行，统一报错出口。配置extends:['plugin:prettier/recommended']实现二者协同。

忽略文件配置通过.eslintignore和.prettierignore文件指定无需校验的文件或目录，如node_modules/、dist/、*.config.js等，避免对第三方依赖和构建产物进行不必要的检查。Vue3+TS项目适配配置核心依赖安装执行命令：pnpmaddeslintprettiereslint-config-prettiereslint-plugin-prettier@typescript-eslint/eslint-plugin@typescript-eslint/parsereslint-plugin-vue-D，安装Vue3+TS项目所需的ESLint、Prettier及相关适配插件。ESLint配置文件创建在项目根目录生成.eslintrc.json，继承"plugin:vue/vue3-essential"、"airbnb-base"、"airbnb-typescript/base"及"plugin:prettier/recommended"规则集，配置Vue和TypeScript解析器。关键规则自定义在rules中设置：关闭"vue/multi-word-component-names"规则（适合中小型项目），"no-console"设为warn级别，关闭"import/no-extraneous-dependencies"，将"prettier/prettier"设为error级别。Prettier配置示例创建.prettierrc文件，配置semi:true（语句结尾加分号）、singleQuote:true（字符串用单引号）、tabWidth:2（缩进2空格）、trailingComma:"es5"（对象/数组末尾加逗号）等格式规则。忽略文件设置创建.eslintignore和.prettierignore文件，指定node_modules/、dist/、public/等无需校验和格式化的目录。忽略文件设置忽略文件的作用忽略文件用于指定无需进行代码检查和格式化的文件或目录，避免对第三方依赖、构建产物等非业务代码进行不必要的校验，提升工具运行效率。ESLint忽略文件（.eslintignore）在项目根目录创建.eslintignore文件，常用配置包括node_modules/、dist/、public/等，可通过通配符如*.config.js忽略特定类型文件。Prettier忽略文件（.prettierignore）创建.prettierignore文件，配置规则与.gitignore语法一致，通常与.eslintignore保持同步，确保格式化工具跳过相同的非业务文件。忽略文件配置示例典型配置：node_modules/、dist/、.git/、public/、*.log，可根据项目实际情况添加如.vscode/、coverage/等临时或工具目录。Prettier配置实战04ESLint核心配置文件在项目根目录创建.eslintrc.js文件，通过extends继承基础规则集（如eslint:recommended、plugin:vue/essential），在rules字段自定义规则，优先级高于继承规则。Prettier格式规则配置新建.prettierrc文件，常用配置包括singleQuote:true（单引号）、semi:true（分号结尾）、tabWidth:2（缩进空格）、printWidth:120（换行宽度）等，统一代码外观。冲突解决配置安装eslint-config-prettier禁用ESLint中与Prettier冲突的格式规则，在.eslintrc.js的extends中添加'plugin:prettier/recommended'，确保Prettier格式规则优先生效。忽略文件配置创建.eslintignore和.prettierignore文件，指定无需校验的目录（如node_modules/、dist/）和文件类型，避免不必要的检查耗时。创建配置文件常用格式规则详解缩进与空格

设置tabWidth为2或4空格，建议使用空格而非制表符。如Vue项目中可通过"vueIndentScriptAndStyle":true保持模板与脚本缩进一致。引号与分号

单引号配置："singleQuote":true；分号控制："semi":true强制结尾加分号，false则省略。Prettier会统一替换字符串引号类型。行宽与换行

printWidth设置每行最大字符数（如100），超过自动换行。trailingComma设为"es5"可在对象/数组末尾添加逗号，提升代码可读性。箭头函数与括号

arrowParens设为"always"强制参数加括号（如(x)=>x），"avoid"则在单个参数时省略（如x=>x），团队需统一风格避免冲突。与ESLint冲突解决冲突根源剖析ESLint与Prettier冲突源于职责重叠，ESLint部分规则（如缩进、引号）与Prettier格式化功能重复，导致代码保存时出现格式反复修改的问题。核心解决方案安装eslint-config-prettier插件可关闭ESLint中与Prettier冲突的格式规则，确保Prettier专注代码格式化，ESLint专注代码质量检查。配置优先级设置在ESLint配置文件中，将"plugin:prettier/recommended"置于extends数组末尾，确保Prettier规则优先级最高，覆盖ESLint格式规则。规则冲突检查清单常见冲突点包括分号使用、引号类型、尾随逗号等。可通过运行"eslint--print-config.eslintrc.js"命令查看当前生效规则，排查冲突项。Husky与提交校验05Husky安装与初始化01Husky核心依赖安装在项目根目录执行命令安装Husky及相关工具：pnpmaddhuskylint-staged-D。其中，husky用于创建Git钩子，lint-staged仅对暂存区文件进行校验，避免全项目扫描耗时过长。02初始化Husky配置执行npxhuskyinstall命令初始化Husky，生成.husky目录。建议在package.json中添加"prepare":"huskyinstall"脚本，确保团队成员克隆项目后自动启用Git钩子。03创建提交前校验钩子通过npxhuskyadd.husky/pre-commit"npxlint-staged"命令创建pre-commit钩子，实现代码提交前自动触发lint-staged。此时需在package.json中配置lint-staged规则，如指定校验文件类型及执行命令。pre-commit钩子配置01安装husky与lint-staged依赖执行命令：pnpmaddhuskylint-staged-D。husky用于管理Git钩子，lint-staged确保仅校验暂存区文件，提升效率。02初始化husky配置执行npxhuskyinstall初始化husky，通过npmset-scriptprepare"huskyinstall"设置自动启用钩子，确保团队成员一致。03创建pre-commit钩子文件执行npxhuskyadd.husky/pre-commit"npxlint-staged"，在提交前触发lint-staged命令，拦截不规范代码。04配置lint-staged规则在package.json中添加："lint-staged":{"*.{js,ts,vue}":["eslint--fix","prettier--write"]}，指定文件类型及处理命令。lint-staged使用方法

lint-staged安装与初始化通过npm或pnpm安装lint-staged依赖：pnpmaddhuskylint-staged-D。初始化husky钩子：npxhuskyinstall，配置pre-commit钩子触发lint-staged。

配置文件编写规则在package.json中添加配置："lint-staged":{"*.{js,vue}":["eslint--fix","prettier--write"]}，指定对暂存区的JS和Vue文件先执行ESLint修复再执行Prettier格式化。

与Husky协同工作流通过npxhuskyadd.husky/pre-commit"npxlint-staged"命令，将lint-staged绑定到Git的pre-commit钩子，实现提交前自动校验暂存区文件，不规范代码无法提交。

性能优化与排除策略使用.gitignore和.lintstagedrc排除node_modules、dist等目录，仅校验修改的文件，避免全量检查耗时。例如配置"ignore":["**/node_modules/**"]提升执行效率。编辑器集成方案06VSCode插件安装

核心插件清单需安装两款必备插件：ESLint（dbaeumer.vscode-eslint）用于代码质量检查，Prettier-Codeformatter（esbenp.prettier-vscode）用于代码格式化。

插件安装步骤打开VSCode扩展面板（Ctrl+Shift+X），搜索插件名称，点击"安装"按钮，安装完成后重启编辑器使插件生效。

插件版本兼容性建议使用最新稳定版插件，ESLint插件需与项目本地ESLint版本匹配，Prettier插件版本需≥3.0以支持最新配置特性。保存自动格式化配置

VSCode编辑器基础设置在VSCode中开启"editor.formatOnSave"选项，勾选后保存文件时将自动触发格式化。通过快捷键Ctrl+Shift+P打开命令面板，搜索"Preferences:OpenSettings(JSON)"进入配置文件。

指定默认格式化工具在settings.json中设置"editor.defaultFormatter":"esbenp.prettier-vscode"，确保Prettier作为默认格式化器。同时配置"editor.codeActionsOnSave":{"source.fixAll.eslint":true}，实现ESLint自动修复。

文件类型特定配置针对不同文件类型单独设置格式化规则，例如在settings.json中添加"[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}，确保Vue文件使用Prettier格式化。

配置验证与生效修改配置后重启VSCode确保生效。创建测试文件（如test.js），故意写入不规范代码（如双引号、缺少分号），保存后观察是否自动修复为Prettier规则定义的格式（如单引号、添加分号）。VSCode核心配置安装ESLint和Prettier插件，在settings.json中设置"editor.defaultFormatter":"esbenp.prettier-vscode"，开启"editor.formatOnSave":true和"editor.codeActionsOnSave":{"source.fixAll.eslint":true}，实现保存时自动格式化与修复。WebStorm配置要点在Preferences中启用ESLint和Prettier，设置Prettier为默认格式化工具，勾选"Onsave"自动格式化，并在Languages&Frameworks>JavaScript>CodeQualityTools>ESLint中启用自动修复。跨编辑器共享配置文件项目根目录放置.editorconfig文件，定义缩进风格（如indent_size=2）、字符集（charset=utf-8）等基础规则，确保不同编辑器读取统一配置，避免因编辑器差异导致格式混乱。配置优先级与冲突解决明确规则优先级：项目配置文件（.eslintrc、.prettierrc）>编辑器工作区设置>用户全局设置。通过eslint-config-prettier关闭ESLint与Prettier冲突规则，确保格式化结果唯一。多编辑器统一配置团队协作落地案例07配置共享方案

创建可复用配置包将ESLint和Prettier配置封装为npm包，如`@company/eslint-config`，包含基础规则、框架适配规则和自定义业务规则，供团队所有项目统一安装使用。

Git仓库共享配置文件通过Git仓库维护`.eslintrc.js`、`.prettierrc`等配置文件，团队项目通过gitsubmodule或直接下载方式引入，确保配置同步更新。

编辑器配置同步提供统一的VSCode工作区配置文件（`.vscode/settings.json`），包含格式化工具指定、保存自动修复等设置，通过团队共享确保编辑器行为一致。

配置文档与版本管理建立配置规则说明文档，记录规则用途和修改历史；采用语义化版本控制（SemVer）管理配置包，重大规则变更发布主版本号，避免破坏性更新。规则定制流程环境准备与依赖安装安装核心依赖：ESLint负责语法校验，Prettier处理代码格式化，eslint-config-prettier解决规则冲突，eslint-plugin-prettier将Prettier集成到ESLint。使用npm或pnpm安装，例如：pnpmaddeslintprettiereslint-config-prettiereslint-plugin-prettier-D。ESLint配置文件创建与基础设置通过npxeslint--init生成配置文件，根据项目类型（如Vue、TypeScript）选择对应选项。配置文件中指定环境（browser、node）、解析器（如@typescript-eslint/parser）、继承规则集（如eslint:recommended、plugin:vue/vue3-essential）及插件。自定义ESLint规则在rules字段中配置规则，如关闭组件名多单词校验（vue/multi-word-component-names:off）、设置console警告级别（no-console:warn）。规则值设为error（报错）、warn（警告）或off（关闭），可根据团队需求调整。Prettier规则配置创建.prettierrc文件定义格式规则，常见配置包括单引号（singleQuote:true）、缩进空格数（tabWidth:2）、行尾分号（semi:true）、每行最大长度（printWidth:120）等，确保团队代码格式统一。规则冲突解决与优先级设置通过eslint-config-prettier关闭ESLint中与Prettier冲突的格式规则，在ESLint配置的extends数组中最后添加plugin:prettier/recommended，使Prettier规则优先级最高，避免格式规则冲突。常见问题解决方案

ESLint与Prettier规则冲突通过安装eslint-config-prettier关闭ESLint中与Prettier冲突的格式规则，使用eslint-plugin-prettier将Prettier作为ESLint规则运行，确保格式问题通过ESLint报错出口统一提示。

配置文件不生效检查配置文件命名与格式是否正确（如.eslintrc.js、.prettierrc），确保文件放置在项目根目录，VSCode需重启或重新加载窗口使配置生效，必要时通过eslint--print-config命令验证配置加载情况。

VSCode保存不自动格式化在VSCode的settings.json中配置"editor.formatOnSave":true，指定"editor.defaultFormatter":"esbenp.prettier-vscode"，并