Utilizing Arrow Functions for Concise JavaScript Syntax

Strategies for adopting arrow functions to write more concise and readable JavaScript code with lexical this binding.

0 likes
7 views

Rule Content

{
  "title": "Utilizing Arrow Functions for Concise JavaScript Syntax",
  "description": "Enforce the use of arrow functions to write more concise and readable JavaScript code with lexical this binding.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "id": "prefer-arrow-functions",
      "description": "Use arrow functions for anonymous function expressions, especially for inline callbacks.",
      "severity": "warning",
      "pattern": {
        "type": "function",
        "anonymous": true,
        "body": {
          "type": "block"
        }
      },
      "fix": {
        "message": "Replace with an arrow function.",
        "pattern": {
          "type": "function",
          "anonymous": true
        },
        "replacement": {
          "type": "arrow_function"
        }
      }
    },
    {
      "id": "arrow-parens",
      "description": "Always include parentheses around arrow function parameters for clarity and consistency.",
      "severity": "warning",
      "pattern": {
        "type": "arrow_function",
        "params": {
          "type": "identifier"
        }
      },
      "fix": {
        "message": "Add parentheses around the parameter.",
        "pattern": {
          "type": "arrow_function",
          "params": {
            "type": "identifier"
          }
        },
        "replacement": {
          "type": "arrow_function",
          "params": {
            "type": "parenthesized_expression",
            "expression": {
              "type": "identifier"
            }
          }
        }
      }
    },
    {
      "id": "arrow-body-style",
      "description": "Use implicit return for single-expression arrow functions; use braces and explicit return for multi-statement bodies.",
      "severity": "warning",
      "pattern": {
        "type": "arrow_function",
        "body": {
          "type": "block",
          "statements": [
            {
              "type": "return_statement",
              "expression": {
                "type": "expression"
              }
            }
          ]
        }
      },
      "fix": {
        "message": "Remove braces and use implicit return.",
        "pattern": {
          "type": "arrow_function",
          "body": {
            "type": "block",
            "statements": [
              {
                "type": "return_statement",
                "expression": {
                  "type": "expression"
                }
              }
            ]
          }
        },
        "replacement": {
          "type": "arrow_function",
          "body": {
            "type": "expression"
          }
        }
      }
    },
    {
      "id": "no-confusing-arrow",
      "description": "Avoid confusing arrow function syntax with comparison operators by wrapping the function body in parentheses when necessary.",
      "severity": "warning",
      "pattern": {
        "type": "arrow_function",
        "body": {
          "type": "binary_expression",
          "operator": {
            "in": ["<=", ">=", "<", ">"]
          }
        }
      },
      "fix": {
        "message": "Wrap the function body in parentheses.",
        "pattern": {
          "type": "arrow_function",
          "body": {
            "type": "binary_expression",
            "operator": {
              "in": ["<=", ">=", "<", ">"]
            }
          }
        },
        "replacement": {
          "type": "arrow_function",
          "body": {
            "type": "parenthesized_expression",
            "expression": {
              "type": "binary_expression"
            }
          }
        }
      }
    },
    {
      "id": "implicit-arrow-linebreak",
      "description": "Enforce the location of arrow function bodies with implicit returns to maintain readability.",
      "severity": "warning",
      "pattern": {
        "type": "arrow_function",
        "body": {
          "type": "expression",
          "location": {
            "line_break": true
          }
        }
      },
      "fix": {
        "message": "Place the function body on the same line as the arrow.",
        "pattern": {
          "type": "arrow_function",
          "body": {
            "type": "expression",
            "location": {
              "line_break": true
            }
          }
        },
        "replacement": {
          "type": "arrow_function",
          "body": {
            "type": "expression",
            "location": {
              "line_break": false
            }
          }
        }
      }
    }
  ]
}