Javascript: dangling comma vs. newline paren in 12.

[JesterXL]

In eslint-config-airbnb-base version 11.3.0, this was ok:

const addFrameworkSoapHeader = soapClient =>
  soapClient.addSoapHeader(
    { Security: 'wsse' },
    'frameworksecurity',
    'wsse',
    'http://schemas.xmlsoap.org/ws/2002/07/secext');

In version 12.0.0, you get in this circular loop. The above code says parens must be on new line, so it becomes:

...
'http://schemas.xmlsoap.org/ws/2002/07/secext'
);

However, if you do that, you get yelled at for no dangling comma. So if you add that:

...
'http://schemas.xmlsoap.org/ws/2002/07/secext',
);

Then ESLint abandons the whole file because of a parsing issue with the extra paren:

Parsing error: Unexpected token )

For now, we've locked version in our package.json to 11.3.0.

[ljharb]

This isn't a bug; this is because you're supposed to be using Babel, which transpires trailing function commas.

If you look at the top of the guide, this is indicated.

[JesterXL]

Interesting, we're using this for Node code with raw JavaScript.

[ljharb]

a) you should be transpiling your server code anyways.
b) no problem! You can keep using v12, but add your own eslint override for the trailing comma rule that doesn't enforce it on functions.

[danm]

@ljharb why should we transpile all server side code?

[JesterXL]

@ljharb You rock, thanks man!

[ljharb]

@danm for one, to avoid issues like this - devs shouldn't have to think about what syntax the platform supports, it should just transpile away anything it needs to.

[danm]

thanks @ljharb, interesting. I always assumed that your style guide was always opinionated towards modern syntax of ES. So that if these rules are followed, and you use a modern version of Node, it would always work.

Totally understand from the client perspective. I shall add transpiling to my server side work flow from now on!

[ryx]

Sorry, but when using eslint for on-the-fly validation in your IDE - which seems to be a really common scenario (at least for me and almost everyone I know) - this still feels like a bug. It is simply impossible to satisfy eslint in such case, which shouldn't happen at all.

Do I get it right that you recommend using eslint only during build time, so after transpilation and before uglifying? Thanks in advance.

[ljharb]

@ryx using eslint in your editor or IDE works just fine with babel transpilation and proper eslint settings; we do it all the time. It's completely possible to satisfy eslint; if it's not, and everything works on the command line, then the bug is in your editor configuration.

[ryx]

@ljharb thank you for the fast reply. When manually setting "comma-dangle": ["error", "always-multiline"] in my .eslintrc it works without problems.

My main concern is simply that using the eslint-config-airbnb-base 12.0.0 without this manual modification to the default rules appears to produce the described unresolvable error. But maybe it is just my local setup, that might be the case. Thanks anyway 👍

[ljharb]

If you're using babel, and not overriding ecmaVersion, it should work.