在Nuxt项目中配置antfu/eslint-config与Stylistic格式化

背景介绍

antfu/eslint-config是一个流行的ESLint配置集合，它为前端项目提供了一套完善的代码规范和格式化规则。当与Nuxt.js框架结合使用时，开发者可能会遇到Stylistic格式化功能失效的问题。本文将详细介绍如何正确配置以实现无缝集成。

常见问题分析

许多开发者在Nuxt项目中尝试使用antfu/eslint-config时，会遇到Stylistic格式化不生效的情况。这通常表现为：

1. 使用默认Nuxt ESLint配置时Stylistic工作正常
2. 引入antfu/eslint-config后格式化功能失效
3. 不同Node.js版本下表现不一致

解决方案

基础配置

首先，确保你的Nuxt配置文件中包含以下基本设置：

export default defineNuxtConfig({
  eslint: {
    checker: {
      configType: 'flat'
    },
    config: {
      standalone: false
    }
  }
})

ESLint配置文件

在项目根目录的eslint.config.js中，使用以下配置：

import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  antfu({
    stylistic: true,
    formatters: true
  })
)

关键配置项说明

1. standalone: false - 告知Nuxt不要使用独立模式运行ESLint
2. stylistic: true - 启用Stylistic格式化规则
3. formatters: true - 确保格式化器被正确加载

环境注意事项

1. Node.js版本：某些情况下，Node.js 20可能无法正确执行格式化，而Node.js 22可以正常工作。建议使用较新的Node.js版本以获得最佳兼容性。

2. 依赖版本：确保所有相关依赖（包括ESLint、Nuxt ESLint模块和antfu配置）都更新到最新版本。

进阶配置建议

对于需要更细致控制的项目，可以考虑：

1. 自定义Stylistic规则
2. 针对特定文件类型设置不同的格式化规则
3. 结合编辑器插件实现保存时自动格式化

总结

通过正确配置Nuxt的ESLint模块和antfu/eslint-config，开发者可以轻松实现代码的自动格式化。关键在于确保配置文件的正确性以及运行环境的兼容性。当遇到问题时，检查Node.js版本和各项配置参数通常是解决问题的第一步。