Why is ESLint warning about a semicolon where I think it's useful?

Question

    fetch_roles () {
      axios.get('/roles')
        .then((response) => {
          this.is_loaded = true; <-- ES lint hate this semicolon?! 🤔
          this.pageData = response
        })
        .catch((error) => {
          alert(`Error: ${error}`)
        })
    }

I get ESLint: Extra semicolon.(semi) for the semicolon shown above. Isn't the semicolon good to have there in case we minify?

Answer 1

I get ESLint: Extra semicolon.(semi) for the above pointed semicolon.

ESLint can be configured to require, ignore, or forbid optional semi-colons . Your configuration has set them to forbidden.

Isn't the semicolon better be there incase we minify?

If minifying causes a problem when optional semi-colons are absent then you need a better minifier.

Answer 2

It sounds like your linter configuration is currently set up to forbid semicolons.

If you're an expert and can identify potential bugs due to Automatic Semicolon Insertion rules at a glance, you can keep your current rules and delete the semicolon from that line safely.

Otherwise, you might find it more beneficial to change the semi rule to require semicolons when appropriate instead, which can prevent hard-to-understand bugs from popping up.

To do this, change the semi rule to always instead of never . You'll also need to add semicolons to the following lines:

this.pageData = response

alert(`Error: ${error}`)

The existence (or lack thereof) of a semicolon will not really affect minification. If no semicolon on a line is causing a bug due to unintuitive ASI behavior, that bug will be present regardless if the source file is run or if the minified file is run.