antfu-eslint-config

Owner avatar eslint-config

antfu 大佬的eslint项目，非常好用。平常前端最烦恼的一个问题是eslint和prettier都包含有format的功能，难以统一。比如我碰到过用eslint format以后，prettier又爆红了，因为两个format规则有冲突。这个项目的特性，很爽的一个点是:

1
Auto fix for formatting (aimed to be used standalone **without** Prettier)

without prettier. 说实话我是非常的不喜欢prettier，配置困难不清晰，官方文档能给的支持非常有限。各种强制换行还找不到对应的配置条目，很令人崩溃。

安装

1
pnpm i -D eslint @antfu/eslint-config

导入

1
2
3
// eslint.config.mjs
import antfu from '@antfu/eslint-config'
export default antfu()

package.json 去添加script

1
2
3
4
5
6
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

ide 配置

eslint & auto fix on save

我的vue3的antfu-eslint配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// eslint.config.mjs
import antfu from '@antfu/eslint-config'

const eslintObj = antfu(
  {
    vue: true,
    typescript: true,
    ignores: [
      'src/vite-env.d.ts',
    ],
  },
  {
    rules: {
      'no-console': 'off',
      'vue/html-indent': ['error', 2],
      'indent': ['error', 2],
      'style/indent': ['error', 2],
      'vue/block-order': ['error', {
        order: ['template', 'script', 'style'],
      }],
      'vue/attribute-hyphenation': ['error', 'never'],
      'vue/max-attributes-per-line': ['error', {
        singleline: {
          max: 5,
        },
        multiline: {
          max: 1,
        },
      }],
      'vue/html-self-closing': 'off',
    },
  },
)
export default eslintObj

vue eslint 内置规则在源码的目录

在这里可以看到antfu-eslint对vue项目的一些eslint规则

1
src/configs/vue.ts

用的不爽的rule可以用userConfig去覆盖。

其他规则去源码查看就好了。目录：src/config

一些尝试和理解

进入源代码来理解一下这个配置应该怎么写。 github 的readme已经有很详细的配置写法了，不过我一开始用这个项目的时候也没太理解这个配置应该怎么写。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// src/index.ts
import { antfu } from './factory'  
  
export * from './configs'  
export * from './factory'  
export * from './globs'  
export * from './types'  
export * from './utils'  
  
export default antfu

import { antfu } from ‘./factory’
进到antfu这个函数来

有两个参数，一个options一个用展开运算符收集的userConfig 第一个options，后面收集的对象都是userConfig 整个项目讲究一个flat。平整。第一个options我们去看看都要配置啥。 options的单项默认都是开关也可以额外进行配置。

这里我用ts的enable作为一个入口去看

解构赋值 + 别名从options里拿出来的内容。

往下看，enableTypeScript又有什么操作呢。

这里去configs里面push了typescript函数，接受一个对象作为参数，一个展开我们在options里面传入的typescript options，剩下三个。

typescriptOptions options可以是boolean或者是对应的配置项
componentExts exts，文件后缀集合

overrides
getOverrides函数，获取userConfig里面的覆盖的配置
type

看了一下上下文，type有两个值，app或者是lib

与type有关的便是如果type = lib就添加这一段规则。

折叠代码以后来看typescript函数的内容

files: 匹配文件后缀,要么options里面指定了，要么就是ts或者tsx文件 + 用户指定的额外文件后缀

1
const filesTypeAware = options.filesTypeAware ?? [GLOB_TS, GLOB_TSX]