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 } } } } } ] }