众所周知，前端搭建项目的时候，如果是团队开发肯定需要配置 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`，它们的集成也比较简答，选择一个适合自己的项目代码格式化规范，这样以后就可以专注代码和其他事情上了！