Learn how to disable ESLint rules with the comment syntax
2019-03-06
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 */
};
Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.
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.