Turning off eslint rule for a specific file

Is it possible to turn off the eslint rule for the whole file? Something such as:

// eslint-disable-file no-use-before-define 

(Analogous to eslint-disable-line.) It happens to me quite often, that in a certain file, I'm breaking a specific rule on many places which is considered OK for that file, but I don't want to disable the rule for the whole project nor do I want to disable other rules for that specific file.


Solution 1:

You can turn off/change a particular rule for a file by putting the configurations at the top of the file.

/* eslint no-use-before-define: 0 */  // --> OFF

or

/* eslint no-use-before-define: 2 */  // --> ON

More info

Solution 2:

To disable a specific rule for the file:

/* eslint-disable no-use-before-define */

Note there is a bug in eslint where single line comment will not work -

// eslint-disable max-classes-per-file
// This fails!

Check this post

Solution 3:

You can tell ESLint to ignore specific files and directories by creating an .eslintignore file in your project’s root directory:

.eslintignore

build/*.js
config/*.js
bower_components/foo/*.js

The ignore patterns behave according to the .gitignore specification. (Don't forget to restart your editor.)

Solution 4:

Let's have a breakdown of the scenarios, like you always do, dear awesome developer!

Here are two questions to ask yourself, first.

Question One: How many "rules" do you want to ignore?

  1. All Rules
  2. One or more Specific Rules (e.g. quotes or semi)

Question Two: How many "lines/files" do you want to ignore?

  1. One or more Lines
  2. All lines in one or more Files
  3. Everywhere

Now, based on the your answers, there are 2 × 3 = 6 cases.


1) Disabling "All rules"


Case 1.1: You want to disable "All Rules" for "One or more Lines"

Two ways you can do this:

  1. Put /* eslint-disable-line */ at the end of the line(s),
  2. or /* eslint-disable-next-line */ right before the line.

Case 1.2: You want to disable "All Rules" for "One File"

  • Put the comment of /* eslint-disable */ at the top of the file.

Case 1.3: You want to disable "All rules" for "Some Files"

There are 3 ways you can do this:

  1. You can go with 1.2 and add /* eslint-disable */ on top of the files, one by one.
  2. You can put the file name(s) in .eslintignore. This works well, especially if you have a path that you want to be ignored. (e.g. apidoc/**)
  3. Alternatively, if you don't want to have a separate .eslintignore file, you can add "eslintIgnore": ["file1.js", "file2.js"] in package.json as instructed here.

2) Disabling "Some Rules"


Case 2.1: You want to disable "Some Rules" for "One or more Lines"

Two ways you can do this:

  1. You can put /* eslint-disable-line quotes */ (replace quotes with your rules) at the end of the line(s),

  2. or /* eslint-disable-next-line no-alert, quotes, semi */ before the line.

Pro Tip: if you have multiple lines that you want to ignore the same rule(s) for, you can disable and enable the rules like this:

// Assume these lines are long engouh that max-len is gonna trigger

/* eslint-disable max-len */
console.log("I am a loooooooooo...ooooong line 1, but eslint doesn't bug!");
console.log("I am a loooooooooo...ooooong line 2, but eslint doesn't bug!");
console.log("I am a loooooooooo...ooooong line 3, but eslint doesn't bug!");
/* eslint-enable max-len */
console.log("I am a loooooooooo...ooooong line 4, AND eslint's GONNA CRY!"); // <--- eslint is gonna cry over this one only!

Case 2.2: You want to disable "Some Rules" for "One File"

  • Put the /* eslint-disable no-use-before-define */ comment at the top of the file.

More examples here.


Case 2.3: You want to disable "Some Rules" for "Some files"

  • This is less straightforward. You should create an "overrides" section in your .eslintrc and specify which rules should be disabled/modified for which globs/files. An example can be found in this answer.