【工程化】你还在用ESlint+Prettier吗？可以试试antfu，5分钟配置完

为什么不用主流的 ESlint + Prettier 方案？

以下是我的理由：

第一、配置繁琐，在一个 React 或者 Vue 工程中加入一套适配的 ESlint + Prettier 方案过程很麻烦，需要安装各种依赖，配置各种规则和文件，并且需要保证 ESlint 和 Prettier 版本一致，规则不冲突。

第二、Prettier 格式化有时候弄巧成拙，格式化后的样子可能更不适合阅读（例如不必要的换行）。

第三、我不想在一个工程中加入太多耦合度太高的插件，我希望工程尽可能的简单。

于是我就在网上找到了一个不错的方案：@antfu/eslint-config

antfu 介绍

作者为 Prettier+ 方案不足之处写了一篇文章：为什么我不使用 Prettier (antfu.me)。

如果懒得看，我帮大家梳理下~

---

文章要点总结如下：

• 自定义的配置并不是很丰富，这是 Prettier 设计者为了保证所有用户的风格一致化的理念。
• 强制换行和行合并功能有时候反而不合适阅读。
• 与 ESlint 有许多规则冲突。

最后作者的观点如下：

1. 只单纯使用 Prettier 十分合理 - 开箱即用是个很棒的功能。
2. 如果你需要使用 ESLint，它也可以像 Prettier 一样格式化代码 - 而且更加可配置。
3. Prettier + ESLint 仍然需要大量的配置 - 它并没有让你的工作变得更简单。
4. 你可以在 ESLint 中完全控制代码风格，但在 Prettier 中却无法做到，这两者混合在一起感觉很奇怪。
5. 我不认为 Parse 两次代码会更快。

---

所以，antfu 就是一个集成了多种规则的 ESlint 插件，配置简单，高效，可格式化。

试用下来后发现有几个优点：

• 插件的安装非常简单。
• 已自动安装各种预设插件（例如对 Vue ，React等支持），配置文件也只有一个。
• 能够自动格式化代码。
• 可对规则做二次细微调整。

一般项目中加入 antfu 已经是完全足够了，但是一般公司还可能有自己内部的规范，这个时候建议加入自研的 ESlint 插件，插入到 antfu 中。

所以最终应该是 antfu + 自定义 ESlint 插件。

如何使用它

我这里就不记录了，官方写的非常清楚且步骤简单，@antfu/eslint-config。

我这里就做一些其他补充。

关于 CSS 和 HTML的格式化

ESlint 是不支持 CSS 和 HTML 格式化的，要么这种格式的文件用其他格式化工具单独处理，工程用了 eslint-plugin-format 来处理。

安装后在 antfu 中配置：

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  formatters: {
    /**
     * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
     * By default uses Prettier
     */
    css: true,
    /**
     * Format HTML files
     * By default uses Prettier
     */
    html: true,
    /**
     * Format Markdown files
     * Supports Prettier and dprint
     * By default uses Prettier
     */
    markdown: 'prettier'
  }
})

关于 import 导入顺序

antfu 内部用的是eslint-plugin-import-x，问题是识别的导入类型颗粒度较大，并且匹配种类较少：eslint-plugin-import-x/docs/rules/order.md at master · un-ts/eslint-plugin-import-x (github.com)

但我觉得如果公司对导入顺序没有非常严谨的要求用自带的足够了。

如果你想更细粒度的控制，我是看到了一个能用的：eslint-plugin-simple-import-sort：

通过对地址的正则匹配，可以详细控制到每个引入的资源顺序，例如配置：

"simple-import-sort/imports": [
    "error",
    {
        groups: [
            // 这个插件只能通过路径帮我们判断
            [`^axios`, `^socket.io-client`, `^classnames`],
            [`^components`],
            ["^@types"],
            ["^@const"],
            [`^@hooks`, `^@utils`],
            [`^@store`],
            [`^svg`, `^png`, "webp", "jpg", "jpeg", "gif", "bmp", "tiff"],
            [`^.less`],
        ],
    },
],

缺点一是无法识别import type语句、无法并列同一个库的引入，例如：

import type { TypedUseSelectorHook } from 'react-redux'
import { useSelector } from 'react-redux'

会报 ESlint 错误。

缺点二每引入一个新的库都要配置下。

一些坑的提示

其实主要都是在公司内网才会出现一些问题：

• 如果在公司内网发现 eslint 格式化不生效，可以在 VScode 插件里看看 eslint 是不是被突然禁用了，重新启用试试。再不行重启VScode。

• 如果项目中的代码风格最后总是被 VScode 强制覆盖（例如 Organize imports ），如果能关掉就好，不能就重新安装一个 VScode 。这个问题也是在公司内网用的时候出现的。

结尾

个人把这套东西集成进了自己部门的脚手架里，用起来还是蛮好的。大家都可以尝试下~