prettier: Prettier changes block comment node location in AST

Input:

const Foo = { 
    bar() {}, /*                                                                                      
    */
    baz() {}
};

Output:

const Foo = {
  bar() {} /*                                                                                       
    */,      // Note this trailing comma is now after the comment instead of before
  baz() {}
};

Expected behavior:

const Foo = { 
    bar() {}, 
    /*                                                                                       
    */
    baz() {}
};

In my input code, the comment is seen by the ast as a leadingComment to baz and not a trailing comma to bar. The resulting output from prettier is seen by the ast as having the comment be both a trailing comment to bar and a leading comment to baz (I find this part super surprising because of the comma, but that is an aside).

Overall, prettier shouldn’t move the comment to be on a different side of the comma.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 6
Comments: 15 (8 by maintainers)

Most upvoted comments

Yeah there’s a small difference between the OP and the real code you posted, the 2nd function is on the same line as the end of the comment, not on a new line. See the following example:

Prettier 1.12.1 Playground link

Input:

const Foo = { 
    bar() {}, /*                                                                                       
    */
    baz() {}
};

const Foo = { 
    bar() {}, /*                                                                                       
    */ baz() {}
};

Output:

const Foo = {
  bar() {} /*                                                                                       
    */,
  baz() {}
};

const Foo = {
  bar() {},
  /*                                                                                       
    */ baz() {}
};

In the 1st case, prettier considers the comment a trailing comment of bar() and so puts the comment before the comma. In the 2nd case, it considers the comment as leading comment of baz() and so puts the comment after the comma.

As @lydell said, it’s tricky to get it right and there certainly are a lot of edge cases we haven’t seen yet.

duailibe on May 1, 2018

I’m really confused now – I can’t seem to reproduce this on the playground?

Prettier 1.12.1 Playground link

Input:

const Tests = {
  /**
   * @uidocs FIGButton
   * @design https://fburl.com/blahblah
   */ testOutlineWhiteMediumIconLabelDefault() {// Regex #2 moves this test to start on the next line
    return <ServerSnapshot />;
  }, /**                                // Regex #1 moves this comment to start on the next line
   * @uidocs FIGButton
   * @design https://fburl.com/blahblah2
   */ testOutlineWhiteMediumIconLabelDisabled() {   
    return <ServerSnapshot />;
  },
};

Output:

const Tests = {
  /**
   * @uidocs FIGButton
   * @design https://fburl.com/blahblah
   */ testOutlineWhiteMediumIconLabelDefault() {
    // Regex #2 moves this test to start on the next line
    return <ServerSnapshot />;
  },
  /**                                // Regex #1 moves this comment to start on the next line
   * @uidocs FIGButton
   * @design https://fburl.com/blahblah2
   */ testOutlineWhiteMediumIconLabelDisabled() {
    return <ServerSnapshot />;
  }
};

lydell on May 1, 2018

Comments are super difficult to get right in Prettier, so if it ends up in a reasonable place we usually think it’s good enough. Could you share your real use case so we know how and why to address this?

lydell on Apr 30, 2018