The details both configuration comments and configuration files, but not separately. The format differs between the two, yet the documentation presents them in conjunction with each other, making the comment formats a little hard to find in and of their own. Here I will be focussing solely on the types of ESLint comments, their format, and how to use them in your JavaScript. ESLint documentation Why use ESLint comments? In general, it is best to use a , such as .eslintrc. A configuration specified a file will apply to all JavaScript in that folder and its subfolders, overridden by another configuration file further down the folder hierarchy. Configuration files are powerful, and should be the go-to choice for enforcing ESLint rules. configuration file unless ― “Look, that’s why there’s rules, understand? So that you think before you break ‘em.” Terry Pratchett And break them you will, but not often. Where to break them is in the file comments. What a typical comment configuration looks like getFinalContext = { { calls, ...finalContext } = context; finalContext;
    } const ( ) => context /* eslint-disable-next-line no-unused-vars */ const return The code above does a destructuring assignment from a passed-in parameter. The function is only interested in the to , and “discards” the first assignment, . My .eslintrc rules are are normally configured to flag this as an unused variable assignment. To avoid the annoying ESLint error, I am able to disable the rule using the comment . This only applies to the next code line, though, and the rule will remain in effect for the rest of the file. context rest assignment finalContext calls /*eslint-disable-next-line no-unused-vars*/ Types of ESLint configuration comments There are three main types: The comment eslint-disable will turn off a rule from the point it is invoke until the next eslint-enable (if any). Useful for disabling flags for blocks of code. If you want to disable multiple flags, use a comma-separated list: eslint-disable/eslint-enable <reams code here> /* eslint-disable no-alert, no-console */ of /* eslint-enable no-alert, no-console */ This disable flag only applies to the next or current line of JavaScript code. eslint-disable-next-line/eslint-disable-line alert( );
alert( ); /* eslint-disable-next-line no-alert */ 'foo' 'foo' // eslint-disable-line no-alert This is a global setting, usually appearing at the top of a JavaScript file. It sets the ‘environment’, which applies a host of rules that are tailored to the environment(s) specified. For example, will turn off no-undeclared-vars warning for and , and will do the same for It is possible to enable multiple environments: eslint-env eslint-env browser window console eslint-env node process. /* eslint-env node, mocha */ That was easy learn, hard to remember That’s basically it! Nothing complicated, but I so seldom use these comment flags that I find myself forgetting the exact syntax. If you find yourself suffering the same memory lapses, consider bookmarking this post!

Freelancing at the moment

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A quick overview of ESLint Configuration Comments

Too Long; Didn't Read

jefflowery

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A quick overview of ESLint Configuration Comments

Too Long; Didn't Read

jefflowery

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES