prettier / prettier/eslint-plugin-prettier

Prettier removing a piece of code when formatting multi-line conditions

Open
#532 14 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.7k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

Maybe this isn't a bug, but it's a scenario where prettier is changing code, and in your documentation, you said if prettier changes code, it shouldn't, so it should be reported.
Hence I am reporting.
If I have several "Anded" expressions, split across multiple lines (in my real example its quite long), prettier suggests a fix of "Replace &&·values.myProperty2 with ··values.myProperty2·&& eslintprettier/prettier"
However this fix removes a required "&&".
Yes, it turns out I should have my "&&"s on the same line (though I prefer them at the beginning, perhaps that is a different debate). But should prettier remove a required one ?

Hope this helps.

Prettier 2.8.1
Playground link

Input:

const values = {
  myProperty1: true,
  myProperty2: false,
  myProperty3: true,
  myProperty4: false,
  myProperty5: true,
  myProperty6: false,
  srvsys_sc_files_otherorgsdata_to_nfd_notingroup: true,
  srvsys_sc_search_owncustomers_against_nfd: true,
  srvsys_sc_search_othercustomers_nfd_ingroup: false,
  srvsys_sc_search_otherorgcustomers_nfd_notingroup: true
};

setValue(!values.myProperty1
  && values.myProperty2
  && !values.myProperty3
  && !values.myProperty4
  && values.myProperty5
  && !values.myProperty6
);

function setValue(newValue: boolean) {
  //do something
  console.log(newValue);
}
//Prettier suggested fix would remove the 1st &&
//Replace `&&·values.myProperty2` with `··values.myProperty2·&&`eslintprettier/prettier

Output:

setValue(!values.myProperty1
    values.myProperty2 &&
  && !values.myProperty3
  && !values.myProperty4
  && values.myProperty5
  && !values.myProperty6
);

Expected behavior:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the provided JSX case in the linked Prettier Playground, then trace the eslint-plugin-prettier rule that reports the replacement. Done means the required && operator is preserved and the multiline condition no longer receives a fix that produces invalid code, with a regression test covering the case.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.