在 React 中完全禁用 eslint

Question

我想在我的 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"
};

Answer 1

您可以將此行放在.env文件中：

DISABLE_ESLINT_PLUGIN=true

您也可以禁用更漂亮的擴展。

Answer 2

我假設您是開發新手。 沮喪是可以理解的。 但是，請注意存在這些規則，因為 javascript 不是靜態類型語言，這些規則可幫助您避免應用程序中的常見問題，並有助於使您的代碼更具可讀性。

jsx-a11y是一個可訪問性規則集，它將幫助您的應用程序更容易被殘障人士訪問。

如果你仍然想擺脫 linter，你可以從你的構建步驟/腳本中刪除它們，或者只是從 eslintconfig 中刪除這些插件： 'plugin:react/recommended', 'airbnb', 'prettier'

Answer 3

我強烈建議激活 Eslint 檢查，因為它們可能非常有價值。 但是，如果您特別被規則jsx-a11y/click-events-have-key-events阻止，那么您可以將"jsx-a11y/click-events-have-key-events": "off"添加到您的.eslintrc.js在“規則”屬性中。

對於您的特定問題：

似乎您正在使用帶有單擊處理程序的<span>標記。 這是不典型的，因為瀏覽器期望這些元素不是交互式的。 您可以嘗試將onClick屬性放在<Link>組件上，如果這支持它，或者您將role="button"添加到您的<span>以表明它是一個交互式元素。