7

I saw several examples on the web of tutorials using redux and react where the code of omitting the semicolon when using es6 with babel.

Example semicolon at the end of import, export.

  • What is the reason?
  • What is a good practice?

Missing semicolon

import React, { PropTypes } from 'react'

const Location = ({ onClick, name, country}) => (
    <li
        onClick={onClick}
    >
        {name} {country}
    </li>
)

export default Location

vs with semicolon 

import React, { PropTypes } from 'react';

const Location = ({ onClick, name, country}) => (
    <li
        onClick={onClick}
    >
        {name} {country}
    </li>
);

export default Location;
Radex
  • 4,700
  • 11
  • 33
  • 64
  • 4
    The reason is: you are allowed to avoid it. The good practice: you should place it – Mayday Apr 02 '17 at 09:13
  • 2
    I'd argue with it's a good practice to place it. Since you are using es6 you most like transpile your code, and transpilers (babel at least) add `;`s by default. The pluses of not adding semicolons in the code that you read, is that you get rid of a lots of useless noise, and prevent yourself from writing 2 statements in the same line. – Balázs Édes Apr 02 '17 at 09:26
  • 1
    @BalázsÉdes It's quite a stretch to say that semicolons are "useless noise". –  Apr 02 '17 at 10:07
  • @Radex This has very little if anything to do with Babel. –  Apr 02 '17 at 10:09
  • 2
    @torazaburo What particular uses have you found for semicolons - other than making traditional for loops not cause syntax errors? Mentioned babel because it's the most common tool for making es6+ code uniformly consumable. It's a matter of choice though, if you like semicolons, go for it. – Balázs Édes Apr 02 '17 at 11:15
  • @BalázsÉdes [Surveys](https://ponyfoo.com/articles/javascript-developer-survey-results) show that 90% or more of JS programmers use semicolons. That's good enough for me. –  Apr 02 '17 at 13:04

2 Answers2

7

Referring to ASI section of ES documentation confirms the following.

Most ECMAScript statements and declarations must be terminated with a semicolon. Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.

In your case, ES6 is being used through babel. It's a transpiler and it may add the missed semicolons in the process of transpiling the source text to native JS.

IMO, good practice is to enable ES linter and it can help to avoid most of the silly mistakes that can culminate the application in undefined state at later point in the time line.

This link can give you some more information.

Community
  • 1
  • 1
FullMoon
  • 606
  • 4
  • 15
3

It depends on your coding style and your linting tool. For example, if you are using standard, you explicitly have to omit semi colons. Standard is a set of eslint rules that is meant to not to be configurable. It’s okay to not use semicolons in JS. It’s not slower or introduces bugs and it's okay to use them too. It doesn't matter.

Mohit Garg
  • 185
  • 2
  • 10