ESLint Ignore Multiple Paths for All Rules (or One Rule!)

ESLint comes with lots of default rules enabled. There are additional rules you can choose to enable. Sometimes we want these rules to be on for most of our files, but have a few exceptions.

In this tutorial we will first disable all rules for a certain file path. Next, we will disable a single rule for a certain file path.

The example rule we will disable is @typescript-eslint/ban-ts-comment. It had to be manually enabled by adding it to .eslintrc.json like I did here:

ESLint rule enabled for all files
ESLint rule enabled for all files

The following code and examples also apply for all vanilla ESLint rules (without TypeScript).

ESLint Ignore Multiple Paths with .eslintignore

If I want all rules to be disabled for one or many folders and files, I can add the paths to my .eslintignore file. In the example below, I disabled all Eslint rules for all .tsx files in src/components/Vanilla.

.eslintignore example code
.eslintignore example code

Simply place the .eslintignore file in the project root folder. There is no additional configuration needed.

In the below screenshot you can see two rules are broken:

  • I have a ts-ignore comment even though it’s not allowed
  • I don’t have a comma on line 16
Rules disabled with .eslintignore
Rules disabled with .eslintignore

Using .eslintignore is a really broad tool. Most likely you only want to ignore certain rules or even disable certain lines.

ESLint Ignore Rule for Multiple Paths with Overrides

Using overrides in is far more precise than ignoring entire files with .eslintignore.

The following code is from the overrides section in my .eslintrc file. Notice I have specified that typescript-eslint/ban-ts-comment is not disabled, but instead set to “warn”. Being able to differently configure a rule instead of remove a rule is another benefit of overrides.

"overrides": [
  {
    "files": [
      "src/components/Select/*.tsx"
    ],
    "rules": {
      "@typescript-eslint/ban-ts-comment": "warn"
    }
  }
]

In the screenshot below we can see the result of my “warn” setting in overrides. For all .tsx files in the Select folder, I can now use ts comments.

ESLint Overrides for Rule
ESLint Overrides for Rule

Rule overrides are a great replacement for disabling rules with a comment at the top of a file. This keep the code cleaner and the ESLint configuration more abstract.

Resources

Here’s a great resource on the ban-types rule.

This SO answer was helpful in writing the overrides section.

Read the ESLint docs on overrides.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.