首先安装ESLint和Prettier插件并重启VSCode，接着在项目中初始化.eslintrc.js和.prettierrc配置文件，然后设置VSCode的defaultFormatter为Prettier并启用formatOnSave和codeActionsOnSave，确保保存时先执行ESLint修复再Prettier格式化，最后通过安装eslint-config-prettier避免规则冲突，实现代码风格统一与自动格式化。
在 VSCode 中配置 ESLint 和 Prettier，可以实现代码风格统一和自动格式化。关键是正确安装插件、配置文件，并让两者协同工作，避免冲突。
安装必要的插件
打开 VSCode 扩展商店，搜索并安装以下两个核心插件：
- ESLint：提供语法检查和错误提示
- Prettier - Code formatter：负责代码格式化
安装完成后，重启编辑器确保插件生效。
项目中初始化配置文件
在项目根目录下创建或确认存在以下配置文件：
如果使用 ESLint，运行命令初始化：
npx eslint --init根据提示选择模块类型、框架、是否启用 TypeScript 等，最终生成 .eslintrc.js 或 .eslintrc.json 文件。
对于 Prettier，可在项目根目录创建 .prettierrc 文件，定义格式规则，例如：
配置 VSCode 设置以协同工作
按下 Ctrl + , 打开 VSCode 设置，搜索 “default formatter”，设置 Prettier 为默认格式化工具。
然后在项目根目录创建 .vscode/settings.json 文件，内容如下：
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"] }这个配置的作用是：保存文件时，先用 ESLint 修复可修复的问题，再用 Prettier 格式化代码。
确保 Prettier 不与 ESLint 冲突
为了避免格式规则冲突，推荐安装 eslint-config-prettier，它会关闭 ESLint 中与 Prettier 冲突的规则。
npm install --save-dev eslint-config-prettier然后在 .eslintrc 的 extends 中添加：
"extends": [ "eslint:recommended", "plugin:vue/vue3-recommended", "prettier" ]基本上就这些。配置完成后，保存代码时会自动执行 ESLint 检查和 Prettier 格式化，提升开发效率和代码一致性。
