ESLint prefer-arrow-callback错误

Question

I've got a problem with ESLint

Here is my function:

$productItem.filter(function (i, el) {
        return el.getBoundingClientRect().top < evt.clientY
    }).last()
    .after($productItemFull)

And Here is what ESLint tell me:

warning  Missing function expression name  func-names
error    Unexpected function expression    prefer-arrow-callback

How to solve this error?

Answer 1

It is basically saying to use Arrow function syntax in the filter callback function.

$productItem.filter((i, el) => el.getBoundingClientRect().top < evt.clientY)
    //              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    .last()
    .after($productItemFull);

Here's what ESLINT documentation for prefer-arrow-callback says

Arrow functions are suited to callbacks, because:

• this keywords in arrow functions bind to the upper scope's.

• The notation of the arrow function is shorter than function expression's.

And, in following cases the error will be thrown

 /*eslint prefer-arrow-callback: "error"*/ foo(function(a) { return a; }); foo(function() { return this.a; }.bind(this)); 

Your code is same same as the first snippet. So, the error prefer-arrow-callback is shown by ESLint.

To solve the error, you can

1. use Arrow function syntax(as shown above)

2. Suppress the error by using options and named function

    /*eslint prefer-arrow-callback: ["error", { "allowNamedFunctions": true }]*/ foo(function bar() {}); 

Answer 2

解决“ 意外函数表达式。（prefer-allow-callback） ”错误在eslint中在代码的开头写下这段代码：

/*eslint prefer-arrow-callback: 0*/