How to Disable ESLint Rules in JavaScript
While ESLint rules are essential for maintaining code quality and consistency, there are legitimate cases where you need to make an exception. ESLint provides powerful and flexible ways to disable rules for a specific line, a block of code, an entire file, or your whole project.
This guide will teach you the standard methods for disabling ESLint rules, moving from the most specific to the most general scope.
The Core Commands: eslint-disable Comments
ESLint's in-code configuration is managed through special comments. The primary commands are:
eslint-disable-next-line: Disables rules for the line immediately following the comment.eslint-disable-line: Disables rules for the current line./* eslint-disable */: Disables rules for a block of code./* eslint-enable */: Re-enables rules after a disabled block.
You can specify which rules to disable by adding them after the command.
How to Disable Rules for a Specific Line
This is the most common and recommended way to handle a single, legitimate exception.
For example, this line of code triggers multiple ESLint warnings.
// ⛔️ no-console, no-alert
alert('Hello, World!');
Solution for the next line
Use eslint-disable-next-line with a comma-separated list of the rule names.
// eslint-disable-next-line no-console, no-alert
alert('Hello, World!'); // ✅ No warnings on this line
alert('This line will still be linted.');
Solution for the current line
Alternatively, you can place the comment on the same line.
alert('Hello, World!'); // eslint-disable-line no-console, no-alert
How to Disable Rules for a Block of Code
If you need to disable rules for a specific section of your code, you can wrap it in disable and enable block comments.
For example, this block of legacy code violates several rules that we want to temporarily ignore.
// ⛔️ prefer-const, no-var
var x = 1;
var y = 2;
The solution:
/* eslint-disable prefer-const, no-var */
var x = 1;
var y = 2;
/* eslint-enable prefer-const, no-var */
// ESLint rules are active again from this point on.
let z = 3;
To disable all rules for a block, simply omit the rule names:
/* eslint-disable */
// All ESLint rules are ignored in this block.
console.log('anything goes here');
/* eslint-enable */
How to Disable Rules for an Entire File
If a specific file (like a legacy utility or a third-party script) should be exempt from certain rules, place a disable comment at the very top of the file.
Solution:
/* eslint-disable no-console, camelcase, no-alert */
// These rules are now disabled for the entire file.
const my_variable = 'hello';
console.log(my_variable);
alert(my_variable);
To disable all rules for the entire file, use the block comment without any rule names at the top:
/* eslint-disable */
// The entire file will be ignored by ESLint.
How to Disable Rules Globally (Project-Wide)
If you disagree with a rule or it conflicts with your project's style guide, you should disable it for the entire project in your ESLint configuration file (.eslintrc.js or .eslintrc.json).
Solution: set the rule's value to "off" in the rules object.
module.exports = {
// ... other config
rules: {
'no-console': 'off',
'import/prefer-default-export': 'off',
'camelcase': 'warn', // You can also set it to 'warn'
},
};
This is the correct way to enforce a project-wide coding standard.
Conclusion: Best Practices
Disabling ESLint rules is a powerful feature that should be used judiciously.
- Use the most specific scope possible. Prefer
eslint-disable-next-linefor a single line over disabling a rule for an entire file. - Always provide a reason. It's a good practice to add a second comment explaining why a rule is being disabled.
// eslint-disable-next-line no-alert -- This is a temporary debug alert.
alert('Debug value'); - Disable rules globally in your config file for project-wide style decisions, not for one-off exceptions.