eslint 中只有箭头函数吗？

Question

我更喜欢这个：

const foo = x => x + 1;

对此：

function foo(x) {
  return x + 1;
}

是否有eslint规则来强制执行此操作？

Answer 1

Anser 基于@JohannesEwald 评论和@KevinAmiranoff 答案。

我使用以下规则：

https://www.npmjs.com/package/eslint-plugin-prefer-arrow

https://eslint.org/docs/rules/prefer-arrow-callback

https://eslint.org/docs/rules/func-style

npm install -D eslint-plugin-prefer-arrow

.eslintrc或package.json与eslintConfig：

"plugins": [
  "prefer-arrow"
],
"rules": {
  "prefer-arrow/prefer-arrow-functions": [
    "error",
    {
      "disallowPrototype": true,
      "singleReturnOnly": false,
      "classPropertiesAllowed": false
    }
  ],
  "prefer-arrow-callback": [
    "error",
    { "allowNamedFunctions": true }
  ],
  "func-style": [
    "error",
    "expression",
    { "allowArrowFunctions": true }
  ]
}

我认为这非常有效。如果您需要禁用特定行的规则，我会这样做：

// eslint-disable-next-line func-style, prefer-arrow/prefer-arrow-functions

Answer 2

您可以使用 ESLint 的内置no-restricted-syntax规则来禁止FunctionExpression和FunctionDeclarationAST 节点：

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      "FunctionExpression",
      "FunctionDeclaration"
    ]
  }
}

这并不明确“首选”箭头函数，但如果您不允许所有ArrowFunctionExpression替代方案，那么您只能有效地强制执行箭头函数。

根据上述规则，这些会失败：

// VariableDeclaration containing a FunctionExpression
const f1 = function () {}

// FunctionDeclaration
function f2() {}

class C {
  // MethodDefinition containing a FunctionExpression
  m() {}
}

这些通过：

// VariableDeclaration containing an ArrowFunctionExpression
const f = () => {}

class C {
  // PropertyDefinition containing an ArrowFunctionExpression
  m = () => {}
}

如果您想在引用或作为生成器函数时允许FunctionExpression和FunctionDeclaration节点（当前没有箭头生成器函数之类的东西），那么您可以使用语法来明确禁止这些节点（当它们没有节点作为后代时）它们不是生成器函数：thisesqueryThisExpression

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      "FunctionExpression[generator=false]:not(:has(ThisExpression))",
      "FunctionDeclaration[generator=false]:not(:has(ThisExpression))"
    ]
  }
}

根据上述规则，这些会失败：

// VariableDeclaration containing a FunctionExpression
const f1 = function () {}

// FunctionDeclaration
function f2() {}

class C {
  // MethodDefinition containing a FunctionExpression
  m() {}
}

这些通过：

// VariableDeclaration containing a FunctionExpression containing a ThisExpression
const f1 = function () {
  this.x = 42
}

// VariableDeclaration containing a FunctionExpression[generator=true]
const f2 = function* () {}

// FunctionDeclaration containing a ThisExpression
function f3() {
  this.x = 42
}

// FunctionDeclaration[generator=true]
function* f4() {}

// VariableDeclaration containing an ArrowFunctionExpression
const f5 = () => {}

class C {
  // MethodDefinition containing a FunctionExpression containing a ThisExpression
  m1() {
    this.x = 42
  }

  // MethodDefinition containing a FunctionExpression[generator=true]
  *m2() {}
  
  // PropertyDefinition containing an ArrowFunctionExpression
  m3 = () => {}
}

不幸的是，下面示例中的函数f也是允许的，即使它可以重写为箭头函数：

function f() {
  function g() {
    this.x = 42
  }

  return g
}

我无法想出一个esquery选择器，其中包含诸如 之类的函数f，同时排除诸如 之类的函数g。

Answer 3

您可以使用此 ESLint首选箭头回调规则，该规则将在任何可以使用箭头函数而不是函数表达式的地方标记错误/警告