先安装ESLint和Prettier依赖及VSCode插件，再配置.eslintrc.js和settings.json，确保保存时自动格式化并修复代码，最后可选自定义.prettierrc规则。
在 VSCode 中集成 ESLint 和 Prettier，可以让代码在编辑时自动格式化并符合团队的编码规范。关键在于正确安装和配置这两个工具，并确保它们协同工作，避免冲突。
安装必要的扩展和依赖
先在项目中安装 ESLint 和 Prettier 的依赖包：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier如果你使用的是 React 项目，可能还需要：
npm install --save-dev eslint-plugin-react然后，在 VSCode 扩展市场中安装以下两个插件：
- ESLint（由 Microsoft 提供）
- Prettier - Code formatter（由 Prettier 官方提供）
配置 ESLint 规则文件
在项目根目录创建或修改 .eslintrc.js 文件：
module.exports = {env: {
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
rules: {}
};
注意： plugin:prettier/recommended 会自动关闭 ESLint 中与 Prettier 冲突的规则。
设置 VSCode 默认格式化工具
为了让保存时自动用 Prettier 格式化，需要在 VSCode 的 .vscode/settings.json 中添加配置：
{"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这样设置后，每次保存文件时，ESLint 会自动修复可修复的问题，Prettier 负责格式化代码。
可选：添加 .prettierrc 配置文件
如果需要自定义格式化风格，可在项目根目录创建 .prettierrc 文件：
{"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
这会让 Prettier 使用单引号、不加分号，并在对象最后一个属性后加逗号（如支持）。
基本上就这些。配置完成后，打开一个 JS 文件，输入一些不符合规范的代码，保存后应该会自动修正。如果没反应，检查终端是否有 ESLint 或 Prettier 报错，或确认扩展是否启用。
