Weird behavior with prettier using plugins

[affanshahid]

Check for existing issues

• [X] Completed

Describe the bug / provide steps to reproduce it

I am using prettier with the plugin prettier-plugin-organize-imports. Using it with Zed is causing the format command to remove all generics from a tsx file.

Before:

import * as Headless from '@headlessui/react';
import { Link as RemixLink, type LinkProps } from '@remix-run/react';
import React, { forwardRef } from 'react';

export const Link = forwardRef(function Link(
  props: { href: string | LinkProps['to'] } & Omit<LinkProps, 'to'>,
  ref: React.ForwardedRef<HTMLAnchorElement>,
) {
  return (
    <Headless.DataInteractive>
      <RemixLink {...props} to={props.href} ref={ref} />
    </Headless.DataInteractive>
  );
});

After formatting with Zed:

import * as Headless from '@headlessui/react';
import { Link as RemixLink, type LinkProps } from '@remix-run/react';
import React, { forwardRef } from 'react';

export const Link = forwardRef(function Link(
  props: { href: string | LinkProps['to'] } & Omit,
  ref: React.ForwardedRef,
) {
  return (
    <Headless.DataInteractive>
      <RemixLink {...props} to={props.href} ref={ref} />
    </Headless.DataInteractive>
  );
});

This seems to work fine with the prettier cli. Output of npx prettier frontend/app/components/ui/link.tsx:

import * as Headless from '@headlessui/react';
import { Link as RemixLink, type LinkProps } from '@remix-run/react';
import React, { forwardRef } from 'react';

export const Link = forwardRef(function Link(
  props: { href: string | LinkProps['to'] } & Omit<LinkProps, 'to'>,
  ref: React.ForwardedRef<HTMLAnchorElement>,
) {
  return (
    <Headless.DataInteractive>
      <RemixLink {...props} to={props.href} ref={ref} />
    </Headless.DataInteractive>
  );
});

Removing the plugin from my prettier config fixes the behaviour in Zed. Prettier config:

{
    "singleQuote": true,
    "trailingComma": "all",
    "plugins": [
      "prettier-plugin-organize-imports"
    ]
}

Note my prettier config is inside ./package.json, whereas the file is inside ./frontend/app/components/, the ./frontend folder also has a package.json.

Environment

Zed: v0.145.0 (Zed Preview) OS: macOS 14.4.1 Memory: 16 GiB Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

No response

If applicable, attach your Zed.log file to this issue.

Zed.log

[Zed.log](https://github.com/user-attachments/files/16300350/Zed.log)

[baboons]

I have the same strange behavior when using this import sort plugin.

"plugins": ["@trivago/prettier-plugin-sort-imports"],

[garand]

I'm having this behavior now also, not using the sort plugin though, or any prettier plugins.

[jjram19]

+1 here, facing with prettier-plugin-organize-imports

[austin-karren]

I'm having a similar issue.

Before formatting with Zed: function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {

After formatting with Zed: function MailIcon(props: React.ComponentPropsWithoutRef) {

Any fixes to this issue? I've been searching the docs for hours trying to fix this.

[github-actions[bot]]

Hi there! 👋 We're working to clean up our issue tracker by closing older issues that might not be relevant anymore. If you are able to reproduce this issue in the latest version of Zed, please let us know by commenting on this issue, and we will keep it open. If you can't reproduce it, feel free to close the issue yourself. Otherwise, we'll close it in 7 days. Thanks for your help!