ESLint报错Parsing error: ',' expected，自动修复命令无效求助

问题根源 #

你的代码在return语句里多嵌套了一层不必要的大括号，React组件返回JSX时，不需要额外用大括号包裹条件表达式（仅在JSX内部嵌入变量/表达式时才需要大括号）。这种语法结构错误无法被npx eslint . --fix自动修复。

修复后的代码 #

const FooterLinkColumn: FC<IFooterLinkColumn> = ({ title, links }) => {
    const { t } = useTranslation(['common']);
    const { defaultLanguage } = useAppSelector(shopSelector);
    return (
        links.length ? (
            links.map((link) => (
                <Link
                    href={getContentHrefUrl()}
                    as={getContentUrl({
                        publicId: link.publicId, translations: { [defaultLanguage]: { slug: link.slug } }
                    } as IContentPage, defaultLanguage)}
                >
                    <a 
                        className={styles.footer__link}
                        data-testid={link.title.split('.')[1]}
                    >
                        {t(link.title)}
                    </a>
                </Link>
            ))
        ) : null
    );
};

关键修改点 #

• 移除return()内部最外层的{}，直接保留三元表达式links.length ? (...) : null作为返回内容
• 统一代码缩进与换行，提升可读性

补充说明 #

如果后续需要返回多个同级JSX元素，记得用<>（React Fragment）包裹，但当前场景下返回单个map结果或null，无需额外包裹。

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