Is a good convention to use a semicolon at the end of the line when using ES6 in babel
I've seen some examples online on tutorials using redux and react where the code is dropping semicolons when using es6 with babel.
An example of a semicolon at the end of import, export.
- What is the reason?
- What is 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;
source to share
Referring to the ASI section of the ES documentation, confirms the following.
Most ECMAScript statements and declarations must be terminated with a semicolon. Such semicolons can always appear explicitly in the source text. However, for convenience, 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 token token in these situations.
In your case ES6 is being used via babel. It is a transpiler and can add missing semicolons while forwarding the source to native JS.
IMO, it is good practice to include the ES linter, and this can help avoid most of the silly errors that can cause the application to terminate in undefined state at a later point in the timeline.
This link can provide you with more information.
source to share
It depends on your coding style and your casting tool. For example, if you are using standard , you must explicitly omit the semi-columns. The standard is a set of eslint rules designed to be non-customizable. It's ok not to use semicolons in JS. It's not slower or introduces bugs and can be exploited too. It does not matter.
source to share