【ESLintPrettier】前端工程化协作从规范原理到项目落地统一团队代码风格自动修复格式与语法问题避开规则冲突与配置失效坑 文章目录一、为什么需要 ESLint 和格式化规范1.1 你可能遇到过的场景1.2 ESLint 和 Prettier 各自做什么二、从零搭建 ESLint2.1 初始化项目并安装 ESLint2.2 初始化 ESLint 配置2.3 生成的.eslintrc.js示例三、常用规则说明3.1 按错误等级理解3.2 常见规则示例四、ESLint Prettier 配合使用4.1 为什么还要用 Prettier4.2 安装和配置4.3 配置示例五、自动修复5.1 命令行修复5.2 在 package.json 中添加脚本5.3 保存时自动修复VSCode六、Vue 项目中的完整配置示例6.1 目录结构6.2.eslintrc.js6.3.prettierignore6.4 依赖版本示例七、常见坑和解决方案7.1 Prettier 和 ESLint 规则冲突7.2 Vue 单文件组件解析失败7.3 某些目录/文件不想被检查7.4 某几行需要临时忽略规则7.5 团队协作时的版本锁定八、总结 系列模块导航 工程化与协作规范 系列总览同学们好我是 Eugene尤金一名多年中后台前端开发工程师。Eugene 发音 /juːˈdʒiːn/大家怎么顺口怎么叫就好很多前端开发者都会遇到一个瓶颈代码能跑但不够规范功能能实现但维护起来特别痛苦一个人写没问题一到团队协作就各种混乱、踩坑、返工。想写出干净、优雅、可维护的专业代码靠的不是天赋而是体系化的规范 真实实战经验。这一系列《前端规范实战》我会用大白话 真实业务场景不讲玄学、不堆理论只分享能直接落地的规范、标准与避坑指南。帮你从「会写代码」真正升级为「会写优质、可维护、团队级别的代码」。一、为什么需要 ESLint 和格式化规范1.1 你可能遇到过的场景// 同事A的风格单引号、无分号、2空格constfoohelloconstbar{name:test}// 同事B的风格双引号、有分号、4空格constfoohello;constbar{name:test};每次合并代码要么是格式冲突要么是风格混在一起可读性和维护成本都会变高。⬆ 返回目录1.2 ESLint 和 Prettier 各自做什么工具主要职责典型规则ESLint代码质量、逻辑错误、最佳实践no-unused-vars、no-console、eqeqeqPrettier格式化、风格统一引号、分号、缩进、换行ESLint发现并避免潜在错误、规范写法。Prettier统一格式让项目看起来像同一个人写的。实际项目中通常 ESLint Prettier 一起用各负责一部分。⬆ 返回目录二、从零搭建 ESLint2.1 初始化项目并安装 ESLint# 在项目根目录执行npminit-ynpminstalleslint --save-dev⬆ 返回目录2.2 初始化 ESLint 配置npx eslint--init会出现交互式配置大致如下How would you like to use ESLint?选To check syntax and find problems检查语法和问题What type of modules does your project use?选JavaScript modules (import/export)ES6 模块Which framework does your project use?Vue 选Vue.js纯 JS 选NoneDoes your project use TypeScript?用 TS 选 Yes否则 NoWhere does your code run?浏览器选BrowserNode 选Node混合就两个都选What format do you want your config file to be in?推荐JavaScript或JSON⬆ 返回目录2.3 生成的.eslintrc.js示例module.exports{env:{browser:true,// 浏览器全局变量如 window、documentes2021:true,// 支持 ES2021 语法node:true,// Node.js 全局变量如 process},extends:[eslint:recommended,// ESLint 推荐规则集plugin:vue/vue3-recommended,// Vue3 推荐规则如果选了 Vue],parserOptions:{ecmaVersion:latest,sourceType:module,},rules:{// 自定义规则覆盖},};env声明代码运行环境避免把window、process当成未定义。extends继承官方或社区规则集减少重复配置。rules单独覆盖某条规则。⬆ 返回目录三、常用规则说明3.1 按错误等级理解值含义off或0关闭规则warn或1警告不阻止构建error或2报错会阻止构建⬆ 返回目录3.2 常见规则示例1no-unused-vars未使用的变量// ❌ 会报错foo 声明了但未使用constfoohello;console.log(world);// ✅ 正确要么用上要么删掉constfoohello;console.log(foo);规则配置示例rules:{no-unused-vars:[error,{argsIgnorePattern:^_}]}这样_unused这种刻意忽略的参数不会被报错。2no-console生产环境禁止 console// ❌ 生产环境一般不希望有console.log(debug);// ✅ 可以用 eslint-disable-next-line 临时关掉// eslint-disable-next-line no-consoleconsole.log(临时调试);3eqeqeq使用而非// ❌ 容易出隐式类型转换问题if(valuenull){}// ✅ 推荐if(valuenull||valueundefined){}4vue/multi-word-component-namesVue 组件名至少两个单词// ❌ 易与原生 HTML 标签混淆exportdefault{name:User}// ✅ 推荐exportdefault{name:UserProfile}5no-var禁止使用var// ❌ 作用域容易混乱varx1;if(true){varx2;// 覆盖外层 x}// ✅ 使用 const / letconstx1;if(true){constx2;// 块级作用域}⬆ 返回目录四、ESLint Prettier 配合使用4.1 为什么还要用 PrettierESLint 也能做部分格式化如引号、分号但规则多、配置杂容易冲突。格式化并非 ESLint 的核心职责。Prettier 专注格式化配置简单、结果一致。二者分工ESLint逻辑、质量、最佳实践。Prettier空格、换行、引号等样式。⬆ 返回目录4.2 安装和配置npminstallprettier eslint-config-prettier eslint-plugin-prettier --save-deveslint-config-prettier关闭 ESLint 中与 Prettier 冲突的规则。eslint-plugin-prettier把 Prettier 作为 ESLint 的一条规则运行。⬆ 返回目录4.3 配置示例.eslintrc.jsmodule.exports{env:{browser:true,es2021:true,},extends:[eslint:recommended,plugin:vue/vue3-recommended,plugin:prettier/recommended,// 必须放在最后用于覆盖冲突规则],parserOptions:{ecmaVersion:latest,sourceType:module,},rules:{vue/multi-word-component-names:warn,no-console:process.env.NODE_ENVproduction?warn:off,},};.prettierrc{ semi: false, singleQuote: true, tabWidth: 2, trailingComma: es5, printWidth: 80 }说明semi: false不加分号。singleQuote: true使用单引号。tabWidth: 22 空格缩进。trailingComma: es5对象、数组等在 ES5 允许的地方加尾逗号。printWidth: 80每行最多 80 字符。⬆ 返回目录五、自动修复5.1 命令行修复# 检查并修复单个文件npx eslint src/main.js--fix# 检查并修复整个目录npx eslint src--fix# 指定扩展名npx eslintsrc/**/*.{js,vue}--fix带--fix时能自动修复的规则会直接改文件。⬆ 返回目录5.2 在 package.json 中添加脚本{scripts:{lint:eslint src --ext .js,.vue,lint:fix:eslint src --ext .js,.vue --fix,format:prettier --write \src/**/*.{js,vue,css,json}\}}日常使用npmrun lint# 只检查npmrun lint:fix# 检查并尝试自动修复npmrunformat# 用 Prettier 格式化⬆ 返回目录5.3 保存时自动修复VSCode安装扩展ESLintPrettier - Code formatter在.vscode/settings.json中配置{editor.formatOnSave:true,editor.defaultFormatter:esbenp.prettier-vscode,editor.codeActionsOnSave:{source.fixAll.eslint:true}}保存时会用 Prettier 格式化。运行 ESLint 并自动修复可修复的问题。⬆ 返回目录六、Vue 项目中的完整配置示例6.1 目录结构project/ ├── .eslintrc.js ├── .prettierrc ├── .prettierignore ├── package.json └── src/ └── ...⬆ 返回目录6.2.eslintrc.jsmodule.exports{root:true,env:{browser:true,es2021:true,node:true,},extends:[eslint:recommended,plugin:vue/vue3-recommended,plugin:prettier/recommended,],parserOptions:{ecmaVersion:latest,sourceType:module,parser:require.resolve(babel/eslint-parser),requireConfigFile:false,},plugins:[vue],rules:{vue/multi-word-component-names:warn,no-console:process.env.NODE_ENVproduction?warn:off,no-debugger:process.env.NODE_ENVproduction?error:off,},overrides:[{files:[*.vue],rules:{indent:off,// Vue 单文件组件由 Prettier 处理缩进},},],};⬆ 返回目录6.3.prettierignorenode_modules dist *.min.js package-lock.json⬆ 返回目录6.4 依赖版本示例{devDependencies:{eslint:^8.57.0,eslint-config-prettier:^9.1.0,eslint-plugin-prettier:^5.1.3,eslint-plugin-vue:^9.24.0,prettier:^3.2.5,babel/eslint-parser:^7.24.0}}⬆ 返回目录七、常见坑和解决方案7.1 Prettier 和 ESLint 规则冲突现象同时开启时出现互相“改回去”的情况。解决extends中把plugin:prettier/recommended放在最后用eslint-config-prettier关掉冲突规则。⬆ 返回目录7.2 Vue 单文件组件解析失败现象Parsing error: Unexpected token等。解决确保安装了vue-eslint-parser和eslint-plugin-vue并在parserOptions.parser中正确配置 Babel 解析器。⬆ 返回目录7.3 某些目录/文件不想被检查在.eslintignore中配置node_modules dist public *.min.js⬆ 返回目录7.4 某几行需要临时忽略规则// 忽略下一行// eslint-disable-next-line no-consoleconsole.log(调试);// 忽略整个块/* eslint-disable no-console */console.log(a);console.log(b);/* eslint-enable no-console */建议尽量少用只针对必要场景。⬆ 返回目录7.5 团队协作时的版本锁定把 ESLint、Prettier 等放在devDependencies并用package-lock.json或yarn.lock锁版本避免不同成员本地版本不一致导致结果不同。⬆ 返回目录八、总结步骤建议新项目一开始就加上 ESLint Prettier规则优先用extends少量在rules中微调格式化Prettier 负责格式ESLint 负责质量自动化配置保存时自动修复 CI 中跑lint团队统一配置、统一依赖版本、提交前跑lint把 ESLint Prettier 当成团队的基础设施可以显著减少风格争论和低级错误把精力放在业务和架构上。如果还有具体规则或报错不清楚可以把规则名或报错信息贴出来一起分析。⬆ 返回目录 系列模块导航 工程化与协作规范一、《Vite 工程化实战alias/env/proxy/ 打包配置全解析统一项目规范避坑工程化与协作规范篇》二、《前端多环境配置规范dev/test/pre/prod 环境差异与配置避免生产环境踩坑工程化与协作规范篇》三、《前端 Git 协作规范实战commit message 分支管理 合并流程告别冲突与混乱工程化与协作规范篇》四、《ESLint Prettier 实战统一前端代码风格自动修复语法格式问题工程化与协作规范篇》五、《Element Plus/VXE-Table UI 组件库规范统一用法实战避开样式冲突与维护混乱工程化与协作规范篇》 跟着系列慢慢学把技术功底扎扎实实地打牢 系列总览前端体系化学习完全体基础 → 规范 → 架构 → 大厂面试四套系列、百余篇高质量实战文从入门到进阶一站式补齐前端核心能力前端基础实战系列 《前端基础实战JS/TS与Vue体系化扫盲47 篇完整目录 避坑》前端规范实战系列 《JS/TS/Vue 前端规范实战从写对到写优搞定中后台规范落地打造可维护代码40 篇全目录》前端架构实战系列聚焦工程化、性能优化、可维护架构、中后台体系设计持续更新中前端大厂面试系列覆盖高频考点、手写题、项目深挖、简历与面试技巧规划中每个系列完结后都会整理成一篇完整导航文并附上直达链接方便大家按顺序、体系化学习。全套内容持续更新中敬请期待⬆ 返回目录技术成长从来不是比谁写得快而是比谁写得稳、规范、可维护。哪怕每次只吃透一条规范长期下来差距会非常明显。后续我会持续更新前端规范、工程化、可维护代码相关实战干货帮你告别面条代码、维护噩梦在开发与面试中更有底气。觉得有用欢迎点赞 收藏 关注不错过每一篇实战内容。我是 Eugene与你一起写规范、写优质代码我们下篇干货见