Disable ESLint Rules with Comment Syntax

Published
Updated
Share: Twitter

Want to ignore ESLint rules by file? current line? next line? by a single ESLint rule? by multiple ESLint rules?

It's hard for me to remember the ESLint ignore syntaxes, so this resource is meant to be a complete list of all the ways you can ignore ESLint rules inside of a file.

I built this generator so that you could easily generate the comment you need!

Disable ESLint Rules By Comment (Generator)

Use this tool to build the ESLint disable comment that fits your needs.

Options
I want to ignore...
Choose Rules... (all by default)
for...
a file
Output
Add this to the top of your file:
/* eslint-disable */

#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 */
};
Enjoy this article? Share it on Twitter!
View the source on GitHub
Tagged with JavaScript, ESLint, Developer Experience
chaseonsoftware.com is powered by GatsbyJS, GitHub & Netlify.
Deployed commit of chaseonsoftware.com is b516e4
👋 Say Hi!