ESLint + Prettier 太烦人？这次彻底搞定

2025-06-15

2 分钟

前端工程化

众所周知，前端搭建项目的时候，如果是团队开发肯定需要配置 ESLint 和 Prettier 来保证代码风格统一。但是 ESLint 和 Prettier 如果配置不好，就会“打架”，并且它们的配置还比较麻烦，那怎么办呢？其实很简单，就是使用现成的，很多大厂都提供了现成的解决方案，下面就来看一下吧！

下面，来看看社区提供的五套方案，让我们先看一下下面的表格，这里除了 @antfu/eslint-config ，其他都是出自大厂的开源

下面让我们更加详细的看看它们的优缺点

@antfu/eslint-config

这是 Vue 团队成员 Anthony Fu 开发的 ESLint 配置，特点是开箱即用，零配置，支持 JS, TS, JSX, Vue, JSON, YAML, Markdown，并可选择性支持 React, Svelte, UnoCSS, Astro, Solid 等。通过 eslint-plugin-format 支持 CSS, HTML, XML 等格式化，我觉得很好用，推荐。

使用非常简单，既可以通过 CLI:

pnpm dlx @antfu/eslint-config@latest

也可以通过手动安装到项目：

pnpm i -D eslint @antfu/eslint-config

然后，需要在根目录下新建 eslint.config.mjs 并进行配置

如果你是 antfu 的粉丝，或者你不了解 ESLint 和 Prettier，那么这是一个好的选择

@umijs/fabric

这是蚂蚁集团 Umi 团队的规范，如果你使用 umi 框架，应该对它不陌生。但最近一次更新已经是在两年前

它支持 JS, 适合在 React 和 TS 项目使用，包含 prettier，eslint，stylelint ,commitlint 的配置

使用它，需要手动安装并配置：

npm i @umijs/fabric --save-dev

然后根据官方文档配置 .eslintrc.js , .stylelintrc.js 和 .prettierrc.js

eslint-config-ali

遵循阿里巴巴前端工程规范（F2E Guidelines）的配置，支持 JavaScript、TypeScript、React、Vue、Node.js 等多种项目类型，大厂出品，应该兼容性和质量比较高，也是我在使用的，推荐。

推荐使用 CLI 方式接入，直接在项目根目录运行：

npx f2elint

选择你的配置，它会自动帮你进行安装依赖和生成对应的脚本和配置

eslint-config-airbnb 和 eslint-config-airbnb-base

eslint-config-airbnb：Airbnb 风格指南，适合 React 项目。
eslint-config-airbnb-base：Airbnb 基础 JS 配置，无 React 插件，适合非 React JS 项目。

Airbnb 的 JavaScript 代码规范，业界最流行的规范之一。github star 147k。但是库的更新最近一次是 2021 年安装使用它，对于 React 项目：

npx install-peerdeps --dev eslint-config-airbnb

对于非 React 项目：

npx install-peerdeps --dev eslint-config-airbnb-base

然后配置 .eslintrc.js

eslint-config-alloy

腾讯 AlloyTeam 出品的 ESLint 配置，支持多种技术栈。适合 React, Vue, TypeScript 项目，特别适合需要高度定制的团队，腾讯 AlloyTeam 开发。使用它可以通过手动的方式：

npm install --save-dev eslint @babel/core @babel/eslint-parser eslint-config-alloy

最后

ESLint + Prettier 依然是目前最主流的前端代码规范的工具，但是也有新星挑战者，Biome 和 Oxlint，它们的集成也比较简答，选择一个适合自己的项目代码格式化规范，这样以后就可以专注代码和其他事情上了！

此文自动发布于：github issues