Notion app logo
Struggling to stay organized and effective? Learn to master your time and tasks with the Effectively Notion course!

Disable ESLint Rules with Comment Syntax

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.

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 */
};
Photo of Chase Adams

Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.

Freebies

Vector Arrow Scribbles
banner image for figma vector arrows scribbles

A figma community project of vectorized hand-drawn arrows.

Go To Figma
Vector Line Scribbles
banner for figma vector line scribbles

A figma community project of vectorized hand-drawn lines.

Go To Figma
Vector Shape Scribbles
banner image of figma vector shapes scribbles

A figma community project of vectorized hand-drawn shapes.

Go To Figma

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.

Online

I'm on almost all social media as @curiouslychase.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.