101 lines
3.3 KiB
Plaintext
101 lines
3.3 KiB
Plaintext
== Why is this an issue?
|
|
|
|
Arrow functions in JavaScript provide a concise syntax to write function expressions. However, the use of braces `{}` and parentheses `()` should be consistent in arrow functions for the following reasons:
|
|
|
|
* Readability: Consistent use of braces and parentheses improves the readability of the code. It makes it easier for other developers to understand the code quickly and reduces the chances of misinterpretation.
|
|
|
|
* Predictability: When braces and parentheses are used consistently, it makes the code more predictable. Developers can easily predict the outcome of the function.
|
|
|
|
* Avoid Errors: Inconsistent use of braces and parentheses can lead to errors. For example, if braces are omitted for a function that has more than one statement, it will result in a syntax error.
|
|
|
|
* Code Maintenance: Consistent use of braces and parentheses makes the code easier to maintain. It's easier to add or remove code lines without worrying about adjusting braces or parentheses.
|
|
|
|
Shared coding conventions allow teams to collaborate effectively. This rule raises an issue when using parentheses and curly braces with an arrow function does not conform to the configured requirements.
|
|
|
|
== How to fix it
|
|
|
|
=== Code examples
|
|
|
|
Use parentheses and curly braces with arrow functions consistently. By default, the rule forbids arrow functions to have parentheses around single parameters and curly braces around single-return bodies.
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
const foo = (a) => { /* ... */ }; // Noncompliant; remove the parentheses from the parameter
|
|
const bar = (a, b) => { return 0; }; // Noncompliant; remove the curly braces from the body
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
const foo = a => { /* ... */ };
|
|
const bar = (a, b) => 0;
|
|
----
|
|
|
|
== Resources
|
|
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions[Arrow function expressions]
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
=== Message
|
|
|
|
* [Add|Remove] parentheses around the parameter of this arrow function.
|
|
* Add curly braces and "return" to this arrow function body.
|
|
* Remove curly braces and "return" from this arrow function body.
|
|
|
|
|
|
=== Parameters
|
|
|
|
.parameter_parens
|
|
****
|
|
|
|
----
|
|
False
|
|
----
|
|
|
|
True to require parentheses around parameters. False to forbid them for single parameter.
|
|
****
|
|
.body_braces
|
|
****
|
|
|
|
----
|
|
False
|
|
----
|
|
|
|
True to require curly braces around function body. False to forbid them for single-return bodies.
|
|
****
|
|
|
|
|
|
=== Highlighting
|
|
|
|
The part that needs changing
|
|
|
|
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
=== on 4 Feb 2016, 09:01:13 Elena Vilchik wrote:
|
|
\[~ann.campbell.2] For body we should forbid not parentheses but *curly braces*.
|
|
|
|
----
|
|
var foo = (p1, p2) => { return bar(p1, p2) } // NOK
|
|
var foo = (p1, p2) => bar(p1, p2) // OK
|
|
----
|
|
|
|
And we do that only for function body with one return statement (we should put it in rule description or at least to parameter description).
|
|
|
|
|
|
Also I think it's worth mentioning (in rule or parameter description) that we forbid parentheses around parameters only when there is exactly one parameter.
|
|
|
|
endif::env-github,rspecator-view[]
|