prettier / prettier/prettier

Comment is moved after a method call if object is one or two characters long

Open
#18,523 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

lang:javascript
Dominant language
JavaScript
Stars
52.3k
Forks
5k
Avg merge
19h 2m
Merged PRs (30d)
117

Description

Prettier 3.7.4
Playground link

--parser babel

Input:

a //
  .bla()

ab //
  .bla()

abc //
  .bla()

Output:

a.bla(); //

ab.bla(); //

abc //
  .bla();

Expected output:

a //
  .bla()

ab //
  .bla()

abc //
  .bla()

Notice how the method call moves to the first line if the object name is one or two characters long (looking at it from another angle, the comment is moving after the method call).

Why?

It shouldn't matter that the object name is only two characters or shorter. The comment should never be moved.

Why does this matter though? Because I'm trying to use the comments to preserve the indentation.

Why does that matter though? Well there's a very long related #7884 issue, but in my case, the motivation is that I am using the code for an interactive use (think hot reloading constantly), and I want to keep the chain method calls on separate lines to easily move them and comment them out.

But for Prettier the better argument is that it is surprising that changing the object name (imagine you start with abc, then change to ab) suddenly changes the code.

Note that the length of the comment does not impact the formatting.

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 formatting difference in the linked Prettier Playground using the Babel parser and the a, ab, and abc chained-call examples. Trace how line comments are positioned around these method calls, then verify that the expected formatting preserves the comment placement for all three object-name lengths.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.