1 | # babel-plugin-syntax-trailing-function-commas
|
2 |
|
3 | Compile trailing function commas to ES5
|
4 |
|
5 |
|
6 | ```js
|
7 | function clownPuppiesEverywhere(
|
8 | param1,
|
9 | param2,
|
10 | ) { /* ... */ }
|
11 |
|
12 | clownPuppiesEverywhere(
|
13 | 'foo',
|
14 | 'bar',
|
15 | );
|
16 | ```
|
17 | [Try in REPL](http://babeljs.io/repl/#?evaluate=true&presets=es2015%2Cstage-0&code=function%20clownPuppiesEverywhere(%0A%20%20param1%2C%0A%20%20param2%2C%0A)%20%7B%20%2F*%20...%20*%2F%20%7D%0A%0AclownPuppiesEverywhere(%0A%20%20'foo'%2C%0A%20%20'bar'%2C%0A)%3B)
|
18 |
|
19 | ## Example
|
20 |
|
21 | ### Basic
|
22 | This is an example from the [Proposal](https://github.com/jeffmo/es-trailing-function-commas).
|
23 |
|
24 | Let's say you have this function:
|
25 |
|
26 | ```js
|
27 | function clownPuppiesEverywhere(
|
28 | param1,
|
29 | param2
|
30 | ) { /* ... */ }
|
31 |
|
32 | clownPuppiesEverywhere(
|
33 | 'foo',
|
34 | 'bar'
|
35 | );
|
36 | ```
|
37 |
|
38 | If you want to have a new parameter called `param3`, the diff output would be like that:
|
39 |
|
40 | ```diff
|
41 | function clownPuppiesEverywhere(
|
42 | param1,
|
43 | - param2
|
44 | + param2, // Change this line to add a comma
|
45 | + param3 // Add param3
|
46 | ) { /* ... */ }
|
47 |
|
48 | clownPuppiesEverywhere(
|
49 | 'foo',
|
50 | - 'bar'
|
51 | + 'bar', // Change this line to add a comma
|
52 | + 'baz' // Add param3
|
53 | );
|
54 | ```
|
55 | In total, you have to change 2 lines for the function declaration and 2 lines for each usage.
|
56 |
|
57 | If you had your function defined with trailing commas:
|
58 |
|
59 | ```js
|
60 | function clownPuppiesEverywhere(
|
61 | param1,
|
62 | param2,
|
63 | ) { /* ... */ }
|
64 |
|
65 | clownPuppiesEverywhere(
|
66 | 'foo',
|
67 | 'bar',
|
68 | );
|
69 | ```
|
70 | Adding a new parameter would only change one line in the function declaration and one line for each usage:
|
71 |
|
72 | ```diff
|
73 | function clownPuppiesEverywhere(
|
74 | param1,
|
75 | param2,
|
76 | + param3, // Add param3
|
77 | ) { /* ... */ }
|
78 |
|
79 | clownPuppiesEverywhere(
|
80 | 'foo',
|
81 | 'bar',
|
82 | + 'baz', // Add param3
|
83 | );
|
84 | ```
|
85 | In the end, your diff output will be cleaner and easier to read, it would be much quicker to add a new parameter to your functions, it also makes it easier to copy paste elements and move code around.
|
86 |
|
87 | ## Installation
|
88 |
|
89 | ```sh
|
90 | npm install --save-dev babel-plugin-syntax-trailing-function-commas
|
91 | ```
|
92 |
|
93 | ## Usage
|
94 |
|
95 | ### Via `.babelrc` (Recommended)
|
96 |
|
97 | **.babelrc**
|
98 |
|
99 | ```json
|
100 | {
|
101 | "plugins": ["syntax-trailing-function-commas"]
|
102 | }
|
103 | ```
|
104 |
|
105 | ### Via CLI
|
106 |
|
107 | ```sh
|
108 | babel --plugins syntax-trailing-function-commas script.js
|
109 | ```
|
110 |
|
111 | ### Via Node API
|
112 |
|
113 | ```javascript
|
114 | require("babel-core").transform("code", {
|
115 | plugins: ["syntax-trailing-function-commas"]
|
116 | });
|
117 | ```
|
118 |
|
119 | ## References
|
120 |
|
121 | * [Proposal](https://github.com/jeffmo/es-trailing-function-commas)
|
122 | * [Spec](http://jeffmo.github.io/es-trailing-function-commas/)
|
123 | * [Why you should enforce Dangling Commas for Multiline Statements](https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8)
|