JavaScript: How to disable ESLint in code, file, folder

After applying ESLint to our codebase to automatic find problems and improve code quality, we may want to disable certain ESLint rules in specify code, file, folder or even whole project! Let’s look into them here.

Benefits of ESLint

There are quite a few benefits to integrate ESLint into projects.

• Analyse code to find problems
• Able to integrate with Git to prevent pushing of codes can break the rules
• Automatically fix code with VS Code
• Improve code quality

ESLint Disable Methods

There are various scope to which we can choose to disable for all rules or certain rules. Below are the more common ones. Let’s look into each of them.

1. Disable Current Line

To disable all ESLint rules check on a current single line code, we can add eslint-disable-line on the right side of the code. If we want to specific only certain rules, we can append the rule name.

console.log('Ignore me'); // eslint-disable-line no-console

2. Disable Next Line

As disabling ESLint on the same line is not too readable, We can also use eslint-disable-next-line to indicate that we will disable ESLint on next line code.

// eslint-disable-next-line no-console
console.log('Ignore me'); 

3. Disable Block

If there are more than 2 lines to disable ESLint, we will use eslint-disable block comment to indicate the start of the disabling and eslint-enable block comment to indicate the end.

/* eslint-disable */
console.log('Ignore me 1'); 
console.log('Ignore me 2'); 
/* eslint-enable */

4. Disable File

Since eslint-disable indicate the start of the disabling ESLint, we can place this at the beginning of the file to disable whole file.

/* eslint-disable no-console */

// The rest of the code
import React from 'react';
...

Although the above block comment method does work, it is not advisable as it will not be easily trackable. Hence, the other method is to use .eslintignore to indicate the files to ignore.

We will place the .eslintignore file in the root directory of the project, then add the file name with relative path into the file.

myfile.js
src/component/myfile.js

5. Disable Folder

To disable ESLint in the whole folder, we will also make use of .eslintignore file to indicate the folder to disable.

src/component/*

6. Disable Project

The most common way to disable is via project level since there might be some rules that we want to ignore fully.

We will first create a .eslintrc.json file, then we will enter in the rules to disable on project level like the illustration below.

{  
  "rules": {
    "eqeqeq": "off",
    "no-console": "off"
  }
}

Conclusion

We have look at how we can disable ESLint base on the scope we want to disable. From a simple code line level to project level. Thus, we will need to decide which to choose base on use-case.