Learn how to disable ESLint rules with the comment syntax
Learn all the ways to disable ESLint (JavaScript lint library) rules with the comment syntax.
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.
Syntax: /* eslint-disable */
Example:
/* eslint-disable */
var myObj = {};
Syntax: /* eslint-disable <rule> */
Example (using no-unused-vars
):
/* eslint-disable no-unused-vars */
var myObj = {};
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" };
}
Sometimes you may want to ignore a rule inside of a block of code and re-enable outside of it.
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 */
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 */
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 */
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.
Syntax: // eslint-disable-line
Example:
var myObj = {}; // eslint-disable-line
Syntax: // eslint-disable-line <rule>
Example (using no-var
):
var myObj = {}; // eslint-disable-line no-var
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
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.
Syntax: // eslint-disable-next-line
Example:
// eslint-disable-next-line
module.exports = () => {
/* lots of code here, all covered under the eslint-disable comment */
};
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 */
};
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 */
};
Subscribe to my Newsletter
Every other week I publish the Curiously Crafted newsletter.
In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.