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