Disable ESLint Rules with Comment Syntax
3/5/2019
Learn all the ways to disable ESLint (JavaScript lint library) rules with the comment syntax.
Ignore ESLint rules for file
In general, using file level eslint-disable
is an indicator that the code needs to be fixed rather than ignored, but there are definitely times when using eslint-disable
at the file level is necessary.
Ignore all rules for a file
Syntax: /* eslint-disable */
Example:
/* eslint-disable */
var myObj = {};
Ignore single rule for a file
Syntax: /* eslint-disable <rule> */
Example (using no-unused-vars
):
/* eslint-disable no-unused-vars */
var myObj = {};
Ignore multiple ESLint rules for a file
Syntax: /* eslint-disable <rule>, <rule>, <etc> */
Example (using no-unused-vars
and no-shadow
):
/* eslint-disable no-unused-vars, no-shadow */
var myObj = { old: "thing" };
function myFunc() {
var myObj = { new: "thing" };
}
Ignore ESLint rules in a block of code
Sometimes you may want to ignore a rule inside of a block of code and re-enable outside of it.
Ignore all rules in a block of code
Syntax:
/* eslint-disable */
/* ...block of code... */
/* eslint-enable */
Example:
var myObj = { old: "thing" };
/* eslint-disable */
function myFunc() {
var myObj = { new: "thing" };
}
function myFunc2() {
var myObj = { new: "thing" };
}
/* eslint-enable */
Ignore single rule in a block of code
Syntax: /* eslint-disable <rule> */ /* ...block of code... */ /* eslint-enable <rule> */
Example (using no-shadow
):
var myObj = { old: "thing" };
/* eslint-disable no-shadow */
function myFunc() {
var myObj = { new: "thing" };
}
function myFunc2() {
var myObj = { new: "thing" };
}
/* eslint-enable no-shadow */
Ignore multiple rules in a block of code
Syntax: /* eslint-disable <rule>, <rule>, <etc> */ /* ...block of code... */ /* eslint-enable <rule>, <rule>, <etc> */
Example (using no-shadow
and no-unused-vars
):
var myObj = { old: "thing" };
/* eslint-disable no-shadow, no-unused-vars */
function myFunc() {
var myObj = { new: "thing" };
}
function myFunc2() {
var myObj = { new: "thing" };
}
/* eslint-enable no-shadow, no-unused-vars */
Ignore ESLint rules for current line
This is useful for ignoring rules for a single line. I find it useful because if code gets moved around, it guarantees that the eslint-disable
comment is preserved with the code it's meant for.
Ignore all rules for current line
Syntax: // eslint-disable-line
Example:
var myObj = {}; // eslint-disable-line
Ignore single rule for current line
Syntax: // eslint-disable-line <rule>
Example (using no-var
):
var myObj = {}; // eslint-disable-line no-var
Ignore multiple rules for current line
Syntax: // eslint-disable-line <rule>, <rule>, <etc>
Example (using no-var
and no-unused-vars
):
var myObj = {}; //eslint-disable-line no-var, no-unused-vars
Ignore ESLint rules for next line
This is useful for when you have a declaration/definition that spans multiple lines. Some examples of this may be multi-line imports or destructuring, multi-line function definitions or multi-line object definitions.
Ignore all rules for next line
Syntax: // eslint-disable-next-line
Example:
// eslint-disable-next-line
module.exports = () => {
/* lots of code here, all covered under the eslint-disable comment */
};
Ignore single rule for next line
Syntax: // eslint-disable-next-line <rule>
Example (using no-unused-vars
):
// eslint-disable-next-line no-unused-vars
module.exports = () => {
/* lots of code here, all covered under the eslint-disable comment */
};
Ignore multiple rules for next line
Syntax: // eslint-disable-next-line <rule>, <rule>, <etc>
Example (using no-var
and no-unused-vars
):
// eslint-disable-next-line no-var, no-unused-vars
module.exports = () => {
var myObj = {};
/* lots of code here, all covered under the eslint-disable comment */
};