预提交 eslint --fix 由于不存在的错误而导致的错误

Question

由于预提交 eslint --fix 任务失败，我无法提交对文件的更改，returns 出现以下错误：

× eslint --fix:

C:\Users\user\source\repos\project\project-frontend\src\components\Header.tsx
  654:61  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  654:61  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

✖ 2 problems (2 errors, 0 warnings)

我尝试通过在所述文件的第 654 行向组件及其子按钮组件添加键盘侦听器和角色来修复这些错误，但没有成功。

            <Snackbar
                role="alert"
                tabIndex={0}
                style={{ right: '24px', textAlign: 'center' }}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open={openLgpd}
                onClose={handleCloseLgpd}
                onKeyDown={handleCloseLgpd}
                message="This is a message!"
                action={
                    <Button role="button" color="secondary" size="small" onKeyDown={handleCloseLgpd} onClick {handleCloseLgpd}>
                        OK
                    </Button>
                }
             />

我还尝试通过将 aria-hidden 属性添加到该组件及其子组件来忽略这些错误，但它也没有用：

             <Snackbar
                aria-hidden
                tabIndex={0}
                style={{ right: '24px', textAlign: 'center' }}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open={openLgpd}
                onClose={handleCloseLgpd}
                message="This is a message!"
                action={
                    <Button role="button" color="secondary" size="small" aria-hidden onClick={handleCloseLgpd}>
                        OK
                    </Button>
                }
             />

渲染后的组件如下所示： snackbar component

当我尝试完全删除该组件时，eslint 在该文件 中根本不存在的一行上返回了完全相同的错误。我不知道是什么原因造成的。如果有帮助，我会使用 Webpack 模块捆绑器。

Answer 1

在谷歌搜索一两个小时并了解 ESLint 的工作原理后，我能够解决这个问题，但我现在只能 post 在这里找到答案。对于那个很抱歉。这是我学到的东西：

由于我的代码大部分是用 TypeScript 编写的，ESLint 可能会对 JavaScript 编译代码进行 linting（因为 ESLint 是专门为 JavaScript 而不是 TypeScript 构建的），因此抛出JS 文件行中的错误与我的 TS 文件行不匹配。如果我错了，请随时纠正我，因为我没有深入到足以完全理解这个问题的根本原因，解决它，然后...
为了在 VS Code 中更好地显示 ESLint 错误信息，我安装了它的官方扩展，它会在文本编辑器上高亮显示正确行中的错误（无论您使用的是 JS 还是 TS）并提出快速解决方案。

就是这样，感谢所有发表评论的人。希望这可能有用。

预提交 eslint --fix 由于不存在的错误而导致的错误

Pre-commit eslint --fix error due to nonexistent errors

git

typescript

reactjs

eslint

webpack