怎样在VSCode中集成ESLint和Prettier？-VSCode-PHP中文网

怎样在VSCode中集成ESLint和Prettier？

幻影之瞳

发布： 2025-09-27 17:49:02

原创

212人浏览过

先安装ESLint和Prettier依赖及VSCode插件，再配置.eslintrc.js和settings.json，确保保存时自动格式化并修复代码，最后可选自定义.prettierrc规则。

怎样在vscode中集成eslint和prettier？

在 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 负责格式化代码。