在 React 中完全禁用 eslint

Question

I want to disable eslint and prettier completely in my React app project. These errors are causing havoc in development.

There are errors coming because of eslint/prettier/jsx-ally and I am stuck with it -

Visible, non-interactive elements with click handlers must have at least one keyboard listener 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

You can put this line in your .env file:

DISABLE_ESLINT_PLUGIN=true

Also you can just disable prettier extension.

Answer 2

I am assuming you are new to development. And the frustration is understandable. However, do note that these rules exist because javascript is not a statically typed language and these rules help you avoid common issues in your application and also help make your code more readable.

jsx-a11y is a ruleset for accessibility which will help make your application more accessible to people with disability.

If you still want to just get rid of the linters, you can remove them from your build steps/scripts or just remove these plugins from eslintconfig: 'plugin:react/recommended', 'airbnb', 'prettier'

Answer 3

I would strongly recommend to keep Eslint checks activated, because they can be very valuable. However, if you are especially blocked by the rule jsx-a11y/click-events-have-key-events then you could add "jsx-a11y/click-events-have-key-events": "off" into your .eslintrc.js in the "rules" property.

For your particular problem:

It seems like you are using a <span> tag with a click handler. This is untypical as Browsers expect these elements to be not interactive. You could try putting the onClick property on the <Link> component, if this supports it or you add role="button" to your <span> to indicate that it is an interactive element.