eslint + prettier的替代方案——@antfu/eslint-config

随着工程项目的不断发展，项目会越来越复杂，摒弃繁琐配置，适当减少设计者工作量，毕竟好用才是开源项目的。

antfu/eslint-config

在使用eslint + prettier 时发现配置时比较繁琐，需要分别导入两个包，而且两者会有格式化上面的冲突，具体情况也需要去自行百度才得以解决。偶然间看见一篇antfu大佬的译文，发现了这个依赖，强烈推荐，只需要一个配置即可解决所有的eslint和prettier问题，即使配置里面不满足业务需求。该插件也提供了自定义的入口，又或者通过fork修改源码来定义专属linters，一应俱全。

安装

pnpm add eslint antfu/eslint-config  -D -w

该插件可以理解为在eslint做了一层封装处理，不支持prettier插件，但可以利用其配置达到格式化代码的效果，所以也不用担心。

在package.json中添加：

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

根目录新建文件eslint.config.mjs,配置如下：

import antfu from '@antfu/eslint-config'

export default antfu(
  {
    type: 'app', // 项目类型为 'app'，适用于应用程序项目 可选lib

    stylistic: {
      indent: 2, // 缩进风格
      quotes: 'single', // 单引号
    },

    typescript: true,
    vue: {
      overrides: {
        // enforce order of component top-level elements 自定义 Vue 文件中标签的顺序，模板 -> 脚本 -> 样式
        'vue/block-order': ['error', {
          order: ['template', 'script', 'style'],
        }],
      },
    },
    jsonc: false,
    yaml: false,
    ignores: [
      '**/fixtures', // 忽略特定路径下的文件（如 fixtures 目录）
    ],
  },

  // 第二部分，应用于所有 TypeScript 文件的规则配置
  {
    files: ['**/*.ts'], // 仅匹配 TypeScript 文件
    rules: {},
  },

  // 第三部分，额外的规则配置
  {
    rules: {},
  },
)

其他配置可参考 eslint

编辑器配置

VS Code

在.vscode文件夹下新建settings.json

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": true,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

当你配置完后，应该会立即生效，如未生效，则重启编辑器即可。