prettier-plugin-sort-imports icon indicating copy to clipboard operation
prettier-plugin-sort-imports copied to clipboard

Comments above directives get duplicated

Open jdeal opened this issue 1 year ago • 4 comments

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"]
}

jdeal avatar May 08 '23 19:05 jdeal

Still happening in v4.2.0.

FourwingsY avatar Sep 15 '23 02:09 FourwingsY

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

FourwingsY avatar Sep 15 '23 02:09 FourwingsY

I digged about this, and set parser

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

Then errors are gone.

FourwingsY avatar Oct 10 '23 02:10 FourwingsY

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

a-corsini avatar Nov 25 '23 14:11 a-corsini