ESLint负责代码质量检查，Prettier专注格式化，通过eslint-config-prettier避免规则冲突；2. 安装相关依赖并配置.eslintrc.js和.prettierrc文件；3. 在VS Code中启用保存时自动格式化；4. 结合husky与lint-staged在提交前校验并修复代码，确保规范执行。
在现代前端开发中，保持代码的一致性和可维护性是团队协作的关键。ESLint 和 Prettier 是两个广泛使用的工具：ESLint 负责检测代码中的潜在问题和风格违规，Prettier 则专注于代码格式化。将它们配合使用，可以在保证代码质量的同时统一代码风格。
1. 工具分工明确
为了高效协作，需要明确 ESLint 与 Prettier 的职责边界：
ESLint：检查语法错误、潜在 bug、代码逻辑问题以及部分代码风格（如变量命名、禁止未使用变量等） Prettier：统一格式化代码结构，包括缩进、引号、括号、换行、分号等视觉层面的样式
若两者在格式规则上冲突，会导致格式混乱或报错。因此，推荐使用 eslint-config-prettier 插件来关闭 ESLint 中与 Prettier 冲突的规则。
2. 安装与配置
在项目中集成 ESLint 与 Prettier 的基本步骤如下：
安装依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
创建或更新 .eslintrc.js 配置文件：
module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 启用 Prettier 推荐配置并自动修复 ], parserOptions: { ecmaVersion: 2021, sourceType: 'module' }, env: { browser: true, es2021: true }};
添加 .prettierrc 文件定义格式规则：
{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2}
添加 .prettierignore 忽略不需要格式化的文件：
node_modulesdist*.min.js
3. 编辑器集成
为了让开发者在编写代码时自动应用规则，建议在编辑器中配置保存时自动格式化。
以 VS Code 为例：
安装 ESLint 和 Prettier 扩展 在项目根目录的 .vscode/settings.json 中添加：
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }}
这样保存文件时会优先通过 ESLint 自动修复可修复的问题，并由 Prettier 统一格式化。
4. 与 Git 集成确保提交质量
防止不符合规范的代码进入仓库，可通过 husky + lint-staged 在提交前校验：
安装：
npm install --save-dev husky lint-staged
启用 husky 并设置钩子：
npx husky init
配置 package.json：
"lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ]}
修改 .husky/pre-commit：
#!/bin/shnpx lint-staged
这样每次 git commit 时都会对暂存文件执行 ESLint 修复和 Prettier 格式化，不通过则阻止提交。
基本上就这些。合理配置 ESLint 与 Prettier，能显著提升团队开发效率和代码一致性，减少代码评审中的风格争议。关键是明确分工、统一配置、自动化执行。不复杂但容易忽略细节。
以上就是代码质量保证方案_ESLint与Prettier的配合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539772.html
微信扫一扫 
支付宝扫一扫 
