是否有 eslint 規則來防止在單行 if 語句中賦值？

Question

我試圖找出是否存在允許以下任何一項的非插件 eslint 規則：

function(x) {
let count = 0;
  if (doIncrement(x)) count++
  else (doDecrement(x)) count--
  if (count >=10) return "over nine";
  else return "keep counting";
}

但唯一的錯誤是：

let listOfThings = [];
if (treatAsString) listOfThings[0] = myString.trim();
else listOfThings = [...myString.split(',').map(stringPart => stringPart.trim())];


// or

let name = '';
if (hasFirstAndLAstName) name = `${firstName} ${lastName}`;
else name = `${emailAddress}`;

贊成像這樣使用三元賦值：

const listOfThings = treatAsString
  ? [myString.trim()]
  : [...myString.split(',').map(stringPart => stringPart.trim())];

// or

let name = hasFirstAndLAstName ? `${firstName} ${lastName}` : emailAddress;

不涉及插件的 eslint 是否存在該規則（或規則組合）？

Answer 1

目前沒有非插件的。

事實上，即使像prefer-ternary這樣的插件規則也不會捕獲復雜的情況，例如包含索引字段分配與完全重新分配的失敗情況，我將其歸類為“超級復雜”。

Answer 2

僅使用基本 ESLint，您可以嘗試使用no-restricted-syntax rule 。 它不是特定的，但可以禁止您想要的任何語法。

要確定您希望如何配置此規則，請檢查：

• 將您的代碼放在一個可以生成抽象語法樹 (AST) 的工具中，它會告訴您要禁止什么。 我使用的是https://astexplorer.net/
• ESLint 選擇器指南概述了如何使用和組合 AST 選擇器。 它們與 CSS 選擇器非常相似，但目標是編程代碼。

有了這兩個，這就是我想出的。 這只是一個示例，您可能需要進一步調整規則：

no-restricted-syntax: ["error", "IfStatement > ExpressionStatement > AssignmentExpression"]

這將禁止在單行if語句（和else ）中賦值。 請注意，它不適用於 blocks 。 允許

let x;
if (Math.random() > 0.5) {
    x = 4;
} else {
    x = 2;
}

不允許：

let x;
if (Math.random() > 0.5) x = 4;
else x = 2;

_{作為參考，具有包含賦值的塊體的 if 語句的選擇器將是IfStatement > BlockStatement > ExpressionStatement > AssignmentExpression}

這只會禁止賦值而不是變量聲明。 像const x = 42;這樣的構造const x = 42; 屬於 AST 中的VariableDeclaration ，因此AssignmentExpression是單獨的，僅在已聲明變量時才適用。

嘗試在線 ESLint 演示：

/* eslint no-restricted-syntax: ["error", "IfStatement > ExpressionStatement > AssignmentExpression"] */

// allowed
function foo(x) {
  let count = 0;
  if (doIncrement(x)) count++
  else if (doDecrement(x)) count--
  if (count >=10) return "over nine";
  else return "keep counting";
}

// allowed
function foo() {
  const listOfThings = treatAsString
    ? [myString.trim()]
    : [...myString.split(',').map(stringPart => stringPart.trim())];
}

// allowed
function foo() {
  let name = hasFirstAndLAstName ? `${firstName} ${lastName}` : emailAddress;
}

// allowed - assignment is not in `if`
function foo() {
  let x = 1;
  x = 2;
}

// allowed - if statement with blocks
function foo() {
  let x;
  if (Math.random() > 0.5) {
    x = 4;
  } else {
     x = 2;
  }
}

// disallowed
function foo() {
  let listOfThings = [];
  if (treatAsString) listOfThings[0] = myString.trim();
  else listOfThings = [...myString.split(',').map(stringPart => stringPart.trim())];
}

// disallowed
function foo() {
  let name = '';
  if (hasFirstAndLAstName) name = `${firstName} ${lastName}`;
  else name = `${emailAddress}`;
}

// disallowed - single line `if` (even though there is no `else`)
function foo() {
  let x = 1;
  if (Math.random() > 0.5)
    x = 2;
}

直接鏈接到在線 ESLint 演示

正如我所說，這只是為了展示功能。 它不鼓勵您使用條件語句（錯誤消息僅相當於“不要使用這個”），並且也可能無法涵蓋您想要的所有內容（例如，在if中的賦值位於另一個if ）。 但這是一個開始。

不過，您可能想考慮制作一個自定義插件，它可以更准確地檢查您想要的內容並報告更好的錯誤。 對於大多數用例來說， no-restricted-syntax規則可能過於通用。