Disable ESLint Rules with Comment Syntax

Comment Generator
Pick Some Rules...
react-hooks/rules-of-hooks
import/extensions
comma-dangle
no-cond-assign
no-console
no-constant-condition
no-control-regex
no-debugger
no-dupe-args
no-dupe-keys
no-duplicate-case
no-empty
no-empty-character-class
no-ex-assign
no-extra-boolean-cast
no-extra-parens
no-extra-semi
no-func-assign
no-inner-declarations
no-invalid-regexp
no-irregular-whitespace
no-negated-in-lhs
no-obj-calls
no-regex-spaces
no-sparse-arrays
no-unexpected-multiline
no-unreachable
no-unsafe-finally
use-isnan
valid-typeof
accessor-pairs
block-scoped-var
complexity
consistent-return
curly
default-case
dot-location
dot-notation
eqeqeq
guard-for-in
no-alert
no-caller
no-case-declarations
no-div-regex
no-else-return
no-empty-function
no-empty-pattern
no-eq-null
no-eval
no-extend-native
no-extra-bind
no-extra-label
no-fallthrough
no-floating-decimal
no-implicit-coercion
no-implicit-globals
no-implied-eval
no-invalid-this
no-iterator
no-labels
no-lone-blocks
no-loop-func
no-magic-numbers
no-multi-spaces
no-multi-str
no-native-reassign
no-new
no-new-func
no-new-wrappers
no-octal
no-octal-escape
no-param-reassign
no-proto
no-redeclare
no-return-assign
no-script-url
no-self-assign
no-self-compare
no-sequences
no-throw-literal
no-unmodified-loop-condition
no-unused-expressions
no-unused-labels
no-useless-call
no-useless-concat
no-useless-escape
no-void
no-warning-comments
no-with
radix
vars-on-top
wrap-iife
yoda
strict
init-declarations
no-catch-shadow
no-delete-var
no-label-var
no-restricted-globals
no-shadow
no-shadow-restricted-names
no-undef
no-undef-init
no-undefined
no-unused-vars
no-use-before-define
callback-return
global-require
handle-callback-err
no-mixed-requires
no-new-require
no-path-concat
no-process-env
no-process-exit
no-restricted-modules
no-sync
array-bracket-spacing
block-spacing
brace-style
camelcase
comma-spacing
comma-style
computed-property-spacing
consistent-this
eol-last
func-names
func-style
id-blacklist
id-length
id-match
indent
jsx-quotes
key-spacing
keyword-spacing
linebreak-style
lines-around-comment
max-depth
max-len
max-nested-callbacks
max-params
max-statements
new-cap
new-parens
newline-after-var
newline-before-return
newline-per-chained-call
no-array-constructor
no-bitwise
no-continue
no-inline-comments
no-lonely-if
no-mixed-spaces-and-tabs
no-multiple-empty-lines
no-negated-condition
no-nested-ternary
no-new-object
no-plusplus
no-restricted-syntax
no-spaced-func
no-ternary
no-trailing-spaces
no-underscore-dangle
no-unneeded-ternary
no-whitespace-before-property
object-curly-spacing
one-var
one-var-declaration-per-line
operator-assignment
operator-linebreak
padded-blocks
quote-props
quotes
require-jsdoc
semi
semi-spacing
sort-imports
sort-vars
space-before-blocks
space-before-function-paren
space-in-parens
space-infix-ops
space-unary-ops
spaced-comment
wrap-regex
arrow-body-style
arrow-parens
arrow-spacing
constructor-super
generator-star-spacing
no-class-assign
no-confusing-arrow
no-const-assign
no-dupe-class-members
no-new-symbol
no-restricted-imports
no-this-before-super
no-useless-computed-key
no-useless-constructor
no-var
object-shorthand
prefer-arrow-callback
prefer-const
prefer-reflect
prefer-rest-params
prefer-spread
prefer-template
require-yield
template-curly-spacing
yield-star-spacing
react/display-name
react/forbid-prop-types
react/jsx-boolean-value
react/jsx-closing-bracket-location
react/jsx-curly-spacing
react/jsx-handler-names
react/jsx-indent-props
react/jsx-key
react/jsx-max-props-per-line
react/jsx-no-bind
react/jsx-no-duplicate-props
react/jsx-no-literals
react/jsx-no-undef
react/jsx-pascal-case
react/sort-prop-types
react/jsx-sort-prop-types
react/jsx-sort-props
react/jsx-uses-react
react/jsx-uses-vars
react/no-danger
react/no-deprecated
react/no-did-mount-set-state
react/no-did-update-set-state
react/no-direct-mutation-state
react/no-is-mounted
react/no-multi-comp
react/no-set-state
react/no-string-refs
react/no-unknown-property
react/prefer-es6-class
react/prefer-stateless-function
react/prop-types
react/react-in-jsx-scope
react/require-extension
react/require-render-return
react/self-closing-comp
react/jsx-space-before-closing
react/sort-comp
react/jsx-wrap-multilines
react/wrap-multilines
react/jsx-first-prop-new-line
react/jsx-equals-spacing
react/jsx-indent
react/jsx-no-target-blank
react/jsx-filename-extension
react/jsx-no-comment-textnodes
react/no-comment-textnodes
react/no-render-return-value
react/require-optimization
react/no-find-dom-node
react/forbid-component-props
react/no-danger-with-children
react/no-unused-prop-types
react/style-prop-object
react/no-unescaped-entities
react/no-children-prop
flowtype/generic-spacing
flowtype/space-after-type-colon
flowtype/space-before-generic-bracket
flowtype/space-before-type-colon
flowtype/union-intersection-spacing
flowtype/no-weak-types
import/no-duplicates
import/no-unresolved
import/no-useless-path-segments
import/named
import/default
import/namespace
mocha/no-exclusive-tests
no-mixed-operators
no-tabs
array-bracket-newline
array-element-newline
func-call-spacing
function-paren-newline
generator-star
indent-legacy
multiline-ternary
no-arrow-condition
no-comma-dangle
no-reserved-keys
no-space-before-semi
no-wrap-func
nonblock-statement-body-position
object-curly-newline
object-property-newline
rest-spread-spacing
semi-style
space-after-function-name
space-after-keywords
space-before-function-parentheses
space-before-keywords
space-in-brackets
space-return-throw-case
space-unary-word-ops
switch-colon-spacing
template-tag-spacing
Disable Rules By...
File
Current Line
Next Line
Code Block
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 */
};
Was this article useful? Share it on Twitter!