Javascript: "Missing trailing comma" for function arguments with JSX

[mnbroatch]

I am having trouble figuring out why this error is occurring; is it supposed to be?

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "airbnb"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "rules": {
    "import/no-extraneous-dependencies": [2, { "devDependencies": true } ],
    "no-underscore-dangle":["error",{"allow": ["_id"]}],
    "new-cap": ["error", {"capIsNewExceptions":["Router"]}],
    "no-use-before-define": ["error", { "functions": false, "classes": true }]
  }
}

[ljharb]

You need a trailing comma on line 16. Be sure you're also using http://npmjs.com/babel-preset-airbnb so you can transpile trailing function commas.

[mnbroatch]

Hmm, OK. I didn't have the babel preset, so doing that was throwing an error. Thanks!

Actually, I've installed babel-preset-airbnb and have it in my .babelrc, but I'm still getting a parsing error.

[mnbroatch]

Isn't the default for comma-dangle supposed to be functions: ignore? I'm trying to turn the rule off for functions in my .eslintrc but setting functions: ignore isn't working correctly. It barks about trailing commas in objects that are function arguments.

[ljharb]

Yes, but we override the default. Setting "functions" to "ignore" should ignore them, though. Can you provide a code sample?

[mnbroatch]

Ah, gotcha. Well, the screenshot in my first post is the thing I'm looking at right now.

When I set up my .eslintrc like this, I get many many "unexpected trailing comma" errors where I didn't have them before. Simply removing that entry under "rules" gets rid of them (though I still have the one in the screenshot).

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "airbnb"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "rules": {
    "import/no-extraneous-dependencies": [2, { "devDependencies": true } ],
    "no-underscore-dangle":["error",{"allow": ["_id"]}],
    "new-cap": ["error", {"capIsNewExceptions":["Router"]}],
    "no-use-before-define": ["error", { "functions": false, "classes": true }],
    "comma-dangle": ["error", {"functions": "ignore"}]
  }
}

edit: one of the newly "wrong" dangles is:

const thingSchema = new mongoose.Schema({
  name: String,
});

normal object dangle, as you can see

[ljharb]

That last example seems fine, as long as the "name" line has a trailing comma - that's an object, not a multi-arg function call/signature.

[mnbroatch]

That's what I'm saying;

"comma-dangle": ["error", {"functions": "ignore"}]

makes eslint complain about an unnecessary comma dangle there and many other places.

[ljharb]

oh weird - that seems like an eslint bug. can you file it on the eslint repo?

[Blackclaws]

Got the exact same problem. For me babel transpiled it without error but the resulting jsx was garbled. This led to a lot of tests failing.

[ljharb]

@Blackclaws please file a babel issue for that

[QWp6t]

I'm having issues with this too.

  webpackConfig.plugins.push(
    new WebpackAssetsManifest({
      output: 'assets.json',
      space: 2,
      writeToDisk: false,
      assets: config.manifest,
      replacer: require('./util/assetManifestsFormatter'),
    }) // <-- it wants a comma right here, which causes syntax error
  ) ;

[ljharb]

@QWp6t run your webpack config through babel, or, exempt it from the comma-dangle rule with an override comment (like you're presumably doing for global-require).

[QWp6t]

Ohhh, I see. It's not a syntax error with a newer version of ECMAScript, yeah? I didn't realize that. Okay. Gotcha. Thanks man.

[taeber]

I created a Gist which minimally recreates this issue.

This is a problem because adding the "dangling comma" will throw a SyntaxError when run.

[ljharb]

@taeber it won't be a syntax error if you're using Babel, which the guide indicates is required: you have to use https://npmjs.com/babel-preset-airbnb or the equivalent, for node or the browser.

[taeber]

Thank you @ljharb. I see in the Style Guide that the "dangling comma" is required when invoking the function because it "leads to cleaner diffs". I'm very surprised by this rationale. Anyway, thanks again.

[ljharb]

It's the same rationale used for trailing commas everywhere - in object and array literals as well.