How to disable an ESLint rule

A quick tutorial on how to disable ESLint rules

What can you do to disable one ESLint rule that is perhaps set automatically by your tooling?

Consider the case where your tooling set the no-debugger and no-console rules.

There might be a valid reason for production code, but in development mode, having the ability to access the browser debugger and the Console API is essential.

You can disable one or more specific ESLint rules for a whole file by adding on a few lines:

/* eslint-disable no-debugger, no-console */
console.log('test')

or you can just do so in a block, re-enabling it afterwards:

/* eslint-disable no-debugger, no-console */
console.log('test')
/* eslint-enable no-alert, no-console */

Or you can disable the rule on a specific line:

console.log('test') // eslint-disable-line no-console

debugger // eslint-disable-line no-debugger

alert('test') // eslint-disable-line no-alert

Another way is to disable it globally for the project.

In package.json you can find the eslintConfig rule, which might have some content already, like this:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

Here you can disable the rules you want to disable:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-unused-vars": "off"
    }
  },