在VSCode中集成ESLint和Prettier实现代码自动格式化-VSCode-PHP中文网

在VSCode中集成ESLint和Prettier实现代码自动格式化

幻影之瞳

发布： 2025-11-12 19:04:02

原创

198人浏览过

正确配置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，可以实现代码保存时自动格式化，统一代码风格并提升开发效率。关键在于正确配置插件和规则优先级，避免冲突。

安装必要的扩展

打开 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 再进行格式化，两者协同工作。