Commas

  • 20.1 Leading commas: Nope. eslint: comma-style

    1. // bad
    2. const story = [
    3. once
    4. , upon
    5. , aTime
    6. ];
    7. // good
    8. const story = [
    9. once,
    10. upon,
    11. aTime,
    12. ];
    13. // bad
    14. const hero = {
    15. firstName: 'Ada'
    16. , lastName: 'Lovelace'
    17. , birthYear: 1815
    18. , superPower: 'computers'
    19. };
    20. // good
    21. const hero = {
    22. firstName: 'Ada',
    23. lastName: 'Lovelace',
    24. birthYear: 1815,
    25. superPower: 'computers',
    26. };

  • 20.2 Additional trailing comma: Yup. eslint: comma-dangle

    Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers.

    1. // bad - git diff without trailing comma
    2. const hero = {
    3. firstName: 'Florence',
    4. - lastName: 'Nightingale'
    5. + lastName: 'Nightingale',
    6. + inventorOf: ['coxcomb chart', 'modern nursing']
    7. };
    8. // good - git diff with trailing comma
    9. const hero = {
    10. firstName: 'Florence',
    11. lastName: 'Nightingale',
    12. + inventorOf: ['coxcomb chart', 'modern nursing'],
    13. };
    1. // bad
    2. const hero = {
    3. firstName: 'Dana',
    4. lastName: 'Scully'
    5. };
    6. const heroes = [
    7. 'Batman',
    8. 'Superman'
    9. ];
    10. // good
    11. const hero = {
    12. firstName: 'Dana',
    13. lastName: 'Scully',
    14. };
    15. const heroes = [
    16. 'Batman',
    17. 'Superman',
    18. ];
    19. // bad
    20. function createHero(
    21. firstName,
    22. lastName,
    23. inventorOf
    24. ) {
    25. // does nothing
    26. }
    27. // good
    28. function createHero(
    29. firstName,
    30. lastName,
    31. inventorOf,
    32. ) {
    33. // does nothing
    34. }
    35. // good (note that a comma must not appear after a "rest" element)
    36. function createHero(
    37. firstName,
    38. lastName,
    39. inventorOf,
    40. ...heroArgs
    41. ) {
    42. // does nothing
    43. }
    44. // bad
    45. createHero(
    46. firstName,
    47. lastName,
    48. inventorOf
    49. );
    50. // good
    51. createHero(
    52. firstName,
    53. lastName,
    54. inventorOf,
    55. );
    56. // good (note that a comma must not appear after a "rest" element)
    57. createHero(
    58. firstName,
    59. lastName,
    60. inventorOf,
    61. ...heroArgs
    62. );