Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments above directives get duplicated #229

Open
jdeal opened this issue May 8, 2023 · 4 comments
Open

Comments above directives get duplicated #229

jdeal opened this issue May 8, 2023 · 4 comments

Comments

@jdeal
Copy link

jdeal commented May 8, 2023

Your Environment

  • Prettier version: 2.8.4
  • node version 18.13.0:
  • package manager: pnpm@8
  • IDE: VScode

Describe the bug

If there's a comment above a directive, the comment gets duplicated when it gets formatted. For example, this:

/** @jsxImportSource @emotion/react */
"use client";

import * as React from "react";

Becomes this when formatted:

/** @jsxImportSource @emotion/react */
"use client";

import * as React from "react";

/** @jsxImportSource @emotion/react */

This is a general bug affecting any comments, but if the comments at the top of the file are essential/functional, like JSX pragmas shown above, this seems like a showstopper. In my case, I'm trying to transition to server components in Next.js, but those aren't compatible with emotion, so I had to turn off the global setting in tsconfig.json and instead use the local pragma like this.

To Reproduce

  1. Add a comment at the top of the file, followed by a directive.
  2. Format the file. If you have format on save in your editor, just save the file. (That's what I'm doing above.)
  3. The comment (or comments) at the top of the file will be duplicated under any imports. (Note, you must have imports in the file for this to happen.)

Expected behavior

These comments should remain where they are, just like they do if there is no directive.

Screenshots, code sample, etc

(That is from saving with Cmd-S in VSCode.)

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators"],
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

Also reproduced with:

{
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}
fbartho pushed a commit to IanVS/prettier-plugin-sort-imports that referenced this issue May 14, 2023
Testing that we don't suffer from
trivago/prettier-plugin-sort-imports#229 or
trivago/prettier-plugin-sort-imports#103
(though I had to add an empty line to make the last one work correctly).
@FourwingsY
Copy link

Still happening in v4.2.0.

@FourwingsY
Copy link

Can we set orders as
"pragma" - "directives" - and "sorted imports" ?

@FourwingsY
Copy link

I digged about this, and set parser

{
  "parser": "babel-ts",
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
} 

Then errors are gone.

@a-corsini
Copy link

Still happening in v4.3.0.

I'm building a SaaS platform with Next.js Server Components, which requires Client Components to be explicitly marked as such via the 'use client' directive. Whenever a 'use client' directive is present at the top of the file, comments at the start of the file will be duplicated under the imports. Not just once, every save duplicates the comments.

In this case, my comments are copyright headers that must be included in every file, but they could be any comment and would still be duplicated.

Screenshot 2023-11-25 at 14 09 33

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants