React项目中eslint import/first报错排查求助

报错信息 #

ERROR in [eslint]
src\questions\CompanyAddress.jsx
Line 6:1: Import in body of module; reorder to top import/first
Line 7:1: Import in body of module; reorder to top import/first
Line 8:1: Import in body of module; reorder to top import/first

涉及代码 #

import React, { useState } from 'react';
import '../styles/forms.css';
import Banner from '../components/ProgressBar';
import { useNavigate } from 'react-router-dom';;
import CTA from '../components/CTA';
import { LinkWithQuery } from '../components/BackButton';
import Autocomplete from "react-google-autocomplete";

function CompanyAddress() {
...
}

需要补充以下信息来进一步排查：

• 项目的ESLint配置文件内容（比如.eslintrc.js、.eslintrc.json或package.json里的eslintConfig字段），包括import/first规则的自定义设置，以及所有extends、插件的配置
• 是否用了Prettier这类代码格式化工具，以及对应的配置文件内容，排查是否存在格式化规则与ESLint冲突的情况
• 文件的完整代码（包括被省略的部分），确认函数内部或其他位置有没有隐藏的导入语句（比如动态导入、条件导入）
• ESLint和eslint-plugin-import插件的具体版本
• 添加eslint-disable注释的具体位置和写法（比如是加在文件顶部、导入行上方还是其他地方）
• 项目是否使用babel、webpack等构建工具，相关配置里有没有影响模块解析的设置
• 文件的编码格式，排查是否存在BOM头等不可见字符导致ESLint误判导入位置

内容的提问来源于stack exchange，提问作者David