This question already has an answer here:
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;
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.
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.