Is a good convention using semicolon at the end of the line when using ES6 in babel

Question

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;

Solution 1

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.

Solution 2

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.

Comments

[Mayday]

The reason is: you are allowed to avoid it. The good practice: you should place it

[Balázs Édes]

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]

@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.

[Admin]

Actually, it does introduce bugs.

[Mohit Garg]

As I said it's a matter of choice so I won't start a debate on this controversial topic. I have never used semi-colons and my code runs totally fine.

[Donald T]

Omitting semicolons does not in itself introduce bugs.