正确配置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 -y
npm 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。
或者在 .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 负责样式，各司其职。
以上就是在VSCode中集成ESLint和Prettier实现代码自动格式化的详细内容，更多请关注php中文网其它相关文章！