正确配置vscode中Prettier与ESLint协同工作可提升代码一致性，需安装eslint、prettier及相关插件，通过.eslintrc.js集成规则，设置settings.json实现保存时自动格式化与修复。

在VSCode中使用Prettier和ESLint进行自动化代码格式化，可以大幅提升团队协作效率和代码一致性。关键在于正确配置两者协同工作，避免规则冲突，并设置保存时自动格式化。

安装必要的扩展和依赖

先确保在项目中安装Prettier和ESLint作为开发依赖：

npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

同时，在VSCode中安装以下扩展：

• Prettier – Code formatter
• ESLint

配置ESLint与Prettier协同工作

创建或更新项目根目录下的 .eslintrc.js 文件，启用Prettier插件并关闭与之冲突的ESLint规则：

module.exports = {
  extends: [
    ‘eslint:recommended’,
    ‘plugin:prettier/recommended’
  ],
  env: {
    node: true,
    es2021: true
  }
};

这样配置后，ESLint会把格式化任务交给Prettier处理，只专注于代码质量检查。

设置VSCode保存时自动格式化

在VSCode的设置中（settings.json），添加以下配置：

码上飞

码上飞（CodeFlying） 是一款ai自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

{
  “editor.defaultFormatter”: “esbenp.prettier-vscode“,
  “editor.formatOnSave”: true,
  “editor.codeActionsOnSave”: {
    “source.fixAll.eslint”: true
  }
}

这个配置的作用是：

• 指定Prettier为默认格式化工具
• 保存文件时自动格式化代码
• 保存时自动修复ESLint可修复的问题

可选：添加.prettierrc配置文件

如果需要自定义格式化风格，可在项目根目录添加 .prettierrc 文件：

{
  “semi”: false,
  “singleQuote”: true,
  “trailingComma”: “es5”
}

这样团队成员都能遵循统一的代码风格，无需手动调整。

基本上就这些。配置完成后，每次保存代码，VSCode会自动用Prettier格式化，并通过ESLint检查代码质量，实现无缝的开发体验。