prettier-plugin-sort-imports
prettier-plugin-sort-imports copied to clipboard
Comments above directives get duplicated
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
- Add a comment at the top of the file, followed by a directive.
- Format the file. If you have format on save in your editor, just save the file. (That's what I'm doing above.)
- 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"]
}
Still happening in v4.2.0.
Can we set orders as "pragma" - "directives" - and "sorted imports" ?
I digged about this, and set parser
{
"parser": "babel-ts",
"plugins": ["@trivago/prettier-plugin-sort-imports"]
}
Then errors are gone.
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.