ESLint Disallow Use of Alert (no-alert)

Question

how can i turn the following alert into an acceptable alert for ESLint?

svg.onerror = function() {
    alert("File cannot be loaded");
};

My build fails because apparently i cant use "alert". I want to call this alert when there is an issue loading something. This code works successfully but it does not comply with ESLint.

http://eslint.org/docs/rules/no-alert

how can i modify my code to make it build successfully?

thanks in advance :)

Possible duplicate of [Turning off eslint rule for a specific line](https://stackoverflow.com/questions/27732209/turning-off-eslint-rule-for-a-specific-line) — Gabriel Isenberg, Feb 22 '19 at 19:22

score 16 · Answer 1 · answered Feb 10 '16 at 06:42

16

If you think you have a good reason for not observing an eslint setting, then you can disable that specific rule for that specific line by specifying eslint-disable-line in a comment on the offending line, like so:

svg.onerror = function() {
    alert("File cannot be loaded");  // eslint-disable-line no-alert
};

A better solution might be to implement a modal or show an error to the user in another less-intrusive way (eg: toggle visibility of an error element, or use something like Bootstrap's modal).

answered Feb 10 '16 at 06:42

Gabriel Isenberg

25,869
4
37
58

is there a way i can make the alert comply with eslint standard? they give an example in the link i gave above, but i dont understand it. – Feb 10 '16 at 06:47
Yep! The relevant section of those documents is: "This rule is aimed at catching debugging code that should be removed and popup UI elements that **should be replaced with less obtrusive, custom UIs**." In this case, you could place something like a `
Couldn't load SVG!
` near the element you're working with. Then, in the svg's `onerror` event, you'd do something like `$('#svg-error').show()` to show the error instead of doing an alert. Make sense? – Gabriel Isenberg Feb 10 '16 at 06:48
1

but it's impossible to actual have a pop up dialog? is this correct? because i want to have a box pop up stating the error. – Feb 10 '16 at 06:53
I'm not sure what's available in your specific case, but you could use or implement something similar to [Bootstrap's modal component](http://www.w3schools.com/bootstrap/bootstrap_modal.asp). This would give you the UI feedback you're looking for, as well as satisfy ESLint. – Gabriel Isenberg Feb 10 '16 at 06:55
yeah i considered bootstrap but i cant use it. i can use jquery if that helps. – Feb 10 '16 at 06:56
If jQuery UI is an option, then you might want to look at [jQuery UI's Dialog](https://jqueryui.com/dialog/). If not, you'll need to implement similar functionality. – Gabriel Isenberg Feb 10 '16 at 06:57

score 6 · Answer 2 · edited Aug 19 '22 at 08:03

Some ESLint rules don't make sense to include in every project, and no-alert is definitely one of them. While critics might say alert is obtrusive, that fails to account for the fact that obtrusive can be good!

To disable this rule, disable it in your ESLint configuration file by setting it to "off."

...
"rules": {
    ...
    "no-alert": "off",
    ...
}

ESlint: Turning off a specific rule across a project

ESLint Disallow Use of Alert (no-alert)

2 Answers2