How to Disable an ESLint Rule

In this tutorial, we will discuss how to disable specific ESLint rules in your code. Sometimes, your tooling may automatically set certain ESLint rules, such as the no-debugger and no-console rules. While these rules may be useful for production code, they can be restrictive during development when you need to access the browser debugger and the Console API. To disable these rules, you have several options:

Disabling Rules for a Whole File

To disable one or more specific ESLint rules for an entire file, you can add the following comment at the top of the file:

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

Alternatively, you can disable the rule(s) within a block and re-enable them afterwards:

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

Disabling Rules on a Specific Line

You can also disable a rule on a specific line by adding a comment at the end of the line:

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

Disabling Rules Globally

If you want to disable a rule globally for your entire project, you can modify the eslintConfig section in your package.json file. This section may already contain some content, such as:

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

To disable specific rules, you can add them to the rules object:

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

By following these steps, you can easily disable ESLint rules as per your requirements.