[英]Disable eslint completely in React
我想在我的 React 应用项目中完全禁用 eslint 和更漂亮。 这些错误正在对开发造成严重破坏。
由于 eslint/prettier/jsx-ally 会出现错误,我一直坚持下去 -
带有点击处理程序的可见、非交互元素必须至少有一个键盘监听器 jsx-a11y/click-events-have-key-events
<span onClick={() => connect()}>
<Link
to='/'
className={location.pathname.toLowerCase().includes('/docs') ? 'active' : 'passive'}
>
{' '}Connect API
</Link>
</span>
.eslintrc.js:-
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
parserOptions: {
ecmaFeatures: {
jsx: false,
},
ecmaVersion: 13,
sourceType: 'module',
},
plugins: ['react'],
rules: {
semi: 'error',
'no-console': 'warn',
'no-undef': 'error',
'no-unused-vars': 'error',
'no-use-before-define': 'error',
'newline-before-return': 'error',
'react/prop-types': 'off',
'linebreak-style': 'off',
'prettier/prettier': 0,
'react/react-in-jsx-scope': 'off',
'react/function-component-definition': 'off',
'jsx-quotes': ['error', 'prefer-single'],
'react/jsx-filename-extension': 'off',
'jsx-a11y/label-has-associated-control': 'off',
},
};
.prettierrc.js:-
module.exports = {
"semi": true,
"tabSize": 2,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5",
"arrowParens": "always",
"bracketSpacing": true,
"jsxSingleQuote": true,
"useTabs": false,
"printWidth": 100,
"endOfLine": "auto"
};
您可以将此行放在.env
文件中:
DISABLE_ESLINT_PLUGIN=true
您也可以禁用更漂亮的扩展。
我假设您是开发新手。 沮丧是可以理解的。 但是,请注意存在这些规则,因为 javascript 不是静态类型语言,这些规则可帮助您避免应用程序中的常见问题,并有助于使您的代码更具可读性。
jsx-a11y
是一个可访问性规则集,它将帮助您的应用程序更容易被残障人士访问。
如果你仍然想摆脱 linter,你可以从你的构建步骤/脚本中删除它们,或者只是从 eslintconfig 中删除这些插件: 'plugin:react/recommended', 'airbnb', 'prettier'
我强烈建议激活 Eslint 检查,因为它们可能非常有价值。 但是,如果您特别被规则jsx-a11y/click-events-have-key-events
阻止,那么您可以将"jsx-a11y/click-events-have-key-events": "off"
添加到您的.eslintrc.js
在“规则”属性中。
对于您的特定问题:
似乎您正在使用带有单击处理程序的<span>
标记。 这是不典型的,因为浏览器期望这些元素不是交互式的。 您可以尝试将onClick
属性放在<Link>
组件上,如果这支持它,或者您将role="button"
添加到您的<span>
以表明它是一个交互式元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.