Prettier-eslint: "comma-dangle": [2, "always-multiline"] should not add trailing commas to function arguments

[echenley]

http://eslint.org/docs/rules/comma-dangle#options

According to the eslint docs, "always-multiline" ignores functions by default. I believe that means that prettier-eslint should set prettier's --trailing-comma option to es5 rather than all, unless functions: "always" is specified in eslint.

Relevant eslint config:

{
  "rules": {
    "comma-dangle": [2, "always-multiline"],
  }
}

Prettier command:

prettier --single-quote --no-semi --trailing-comma es5

Unformatted:

function someFunction(longParamater1, longParamater2, longParamater3, longParamater4) {
  return ''
}

Prettier + eslint --fix output:

function someFunction(
  longParamater1,
  longParamater2,
  longParamater3,
  longParamater4 // no comma
) {
  return ''
}

Prettier-eslint output:

function someFunction(
  longParamater1,
  longParamater2,
  longParamater3,
  longParamater4, // comma
) {
  return ''
}

Edit:
It is possible to fix it using prettier-eslint --prettier.trailing-comma es5, but those options aren't available when using prettier-atom.

[kentcdodds]

Thanks for digging into this. Could you look into submitting a pull request?

[kentcdodds]

Here's the code that should change, here's where you'd add a test case, here's a free course on how to contribute to OSS (if you're new to contributing), and here's our CONTRIBUTING.md.

Cheers!

[enriquecaballero]

I'm still having this issue. I don't think PR#71 fixes this.

[kentcdodds]

Thanks for reaching out @enriquecaballero. Could you make a pull request to fix the issue you're seeing?

[enriquecaballero]

I would, but there seems to be some confusion here as to what the expected behavior is for this issue. The Prettier README defaults trailing commas to "none" and single quotes to false. Yet, for some reason, when I use Prettier via Atom, that uses prettier-eslint whenever the ESLint Integration box is checked, I don't have this problem. It's only when I use the prettier-eslint-cli that turns on single quotes and trailing commas by default. I would assume it should be the other way around? One should expect Prettier defaults to apply? It doesn't make sense to turn them on one-by-one. Also, I don't know if this is a eslint-prettier issue or an eslint-prettier-cli issue.

[echenley]

@enriquecaballero Are you trying to get trailing commas for all function arguments? If so, you need to set your eslint config to:

{
  "rules": {
    "comma-dangle": [2, {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "always-multiline"
    }]
  }
}

Either of the following will give you trailing commas for everything EXCEPT functions:

{
  "rules": {
    "comma-dangle": [2, "always-multiline"]
  }
}

// OR

{
  "rules": {
    "comma-dangle": [2, {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "ignore"
    }]
  }
}

Pretty sure setting this in your eslintrc should get you the same results for both prettier-eslint and prettier-eslint-cli. Could be wrong though.

[enriquecaballero]

@echenley All I'm trying to understand is why prettier-eslint-cli's defaults aren't matching either Prettier's or ESLint's. Like I said in my earlier comment, Prettier defaults trailing commas to "never" and single quotes to false. ESLint's comma-dangle rule defaults to "never". It just feels like prettier-eslint-cli is overriding Prettier and ESLint whenever those rules aren't set, forcing one to (unnecessarily) manually add those rules. To get comma-dangles to work, I have to do do prettier-eslint ―prettier.trailingComma none which shouldn't be the case.

[enriquecaballero]

@echenley It just seems that prettier-eslint-cli and prettier-atom use prettier-eslint differently. prettier-atom has Prettier's defaults correctly set up, but prettier-eslint-cli does not.

[enriquecaballero]

When you install prettier-atom, in its settings it provides the Prettier "defaults" correctly, as you can see below:

prettier-atom depends on that form to create internal defaults:

// prettier-atom/src/options.js
trailingComma: getPrettierOption('trailingComma')
const getPrettierOption = (key: string) => getConfigOption(`prettierOptions.${key}`);

// prettier-atom/src/helpers.js
const getConfigOption = (key: string) => atom.config.get(`prettier-atom.${key}`);

Here's what I'm running into:

Using prettier-eslint-cli : prettier-eslint --write "src/**/*.@(js|jsx)"

const test = [
  'hello',
  'world',
  'hello',
  'world',
  'hello',
  'world',
  'hello',
  'world',
  'hello',
  'world',
];

Using prettier-atom with ESLint Integration enabled and the settings from the image above:

const test = [
  "hello",
  "world",
  "hello",
  "world",
  "hello",
  "world",
  "hello",
  "world",
  "hello",
  "world"
];

There seems to be a disconnect between both modules, and that's bad because it affects those with git hooks that use prettier-eslint-cli _and_ prettier-atom's Format on Save option.

[kentcdodds]

Thanks for digging further. What do you propose?

[enriquecaballero]

I found the problem. The defaultValue param's are not matching Prettier's defaults in these lines:

• https://github.com/prettier/prettier-eslint/blob/master/src/utils.js#L198 (should be false)
• https://github.com/prettier/prettier-eslint/blob/master/src/utils.js#L215 (should be 'none')
• https://github.com/prettier/prettier-eslint/blob/master/src/utils.js#L243 (should be true)

Working on a PR now.

[kentcdodds]

Ah! Nice, thanks for looking into that. A PR will be accepted. Now to decide whether this should be a breaking change or not... 🤔

I think it wont be. Things are a little tricky with this package 🙃