正确配置VSCode中ESLint和Prettier的集成，可实现保存时自动格式化。首先安装ESLint和Prettier插件，初始化项目依赖并配置.eslintrc.js，引入plugin:prettier/recommended以避免规则冲突。接着在VSCode设置中启用editor.formatOnSave，并指定prettier为默认格式化工具。通过eslint-config-prettier关闭与Prettier冲突的ESLint规则，确保二者协同工作：ESLint负责代码质量，Prettier统一代码样式，提升团队开发效率。
在 VSCode 中集成 ESLint 和 Prettier，可以实现代码保存时自动格式化，统一代码风格并提升开发效率。关键在于正确配置插件和规则优先级，避免冲突。
安装必要的扩展
打开 VSCode 扩展商店，安装以下两个核心插件：
- ESLint：提供语法检查和代码风格提示
- Prettier - Code formatter：负责代码格式化
项目中初始化 ESLint 和 Prettier
在项目根目录执行以下命令，确保本地依赖已安装：
npm init -ynpm install eslint --save-dev
npx eslint --init
按照提示选择适合的配置（如使用 ES6、React、TypeScript 等），并选择是否使用文件保存时自动修复问题。
接着安装 Prettier 及其与 ESLint 的集成包：
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev创建或修改 .eslintrc.js 文件，确保包含 Prettier 插件：
module.exports = {extends: [
"eslint:recommended",
"plugin:prettier/recommended"
],
rules: {
// 自定义规则可写在这里
}
};
配置 VSCode 设置实现保存自动格式化
打开 VSCode 的设置（Ctrl + ,），搜索 "format on save"，勾选 Editor: Format On Save。
微信小程序公众号SaaS管理系统是一款完全开源的微信第三方管理系统，为中小企业提供最佳的小程序集中管理解决方案。可实现小程序的快速免审核注册（免300元审核费），可批量发布小程序模板，同步升级版本等功能。基础版本提供商城和扫码点餐两种小程序模板。商户端可以实现小程序页面模块化设计和自动生成小程序源代码并直接发布。
或者在 .vscode/settings.json 中添加配置：
{"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这样在保存文件时，ESLint 会先执行修复，Prettier 再进行格式化，两者协同工作。
处理可能的格式化冲突
ESLint 和 Prettier 有时会因规则重叠导致警告或格式混乱。解决方法是使用 eslint-config-prettier 关闭所有与 Prettier 冲突的 ESLint 规则。
只要在 extends 中包含 prettier，例如 "plugin:prettier/recommended"，就能自动处理大部分冲突。
若仍有报错，检查 ESLint 是否作用于不希望检查的文件类型，在 .eslintignore 中排除即可。
基本上就这些。配置完成后，每次保存代码都会自动按统一风格格式化，团队协作更顺畅。关键是让 ESLint 负责代码质量，Prettier 负责样式，各司其职。
