prettier-vscode icon indicating copy to clipboard operation
prettier-vscode copied to clipboard

Prettier removes Promise<void> type and other annotations in TypeScript arrow functions

Open danielbjornadal opened this issue 1 year ago • 23 comments

Summary

Prettier removes Promise type annotations in TypeScript arrow functions, even with "arrowParens": "always" configured, making it impossible to satisfy TypeScript's requirement for generic type parameters on Promises.

Steps To Reproduce:

  1. Create a new TypeScript file with an interface containing Promise return types
  2. Configure Prettier with "arrowParens": "always"
  3. Save the file and observe Prettier's formatting
  4. Note that TypeScript shows an error: "Generic type 'Promise<T>' requires 1 type argument(s)"

Expected result

Prettier should preserve the Promise type annotation when formatting TypeScript files, especially when "arrowParens": "always" is set.

Example:

interface Example {
  myFunction: (param: string) => Promise<void>;
}

Actual result

Prettier removes the type parameter, resulting in invalid TypeScript:

interface Example {
  myFunction: (param: string) => Promise;
}

This causes TypeScript to error with "Generic type 'Promise<T>' requires 1 type argument(s)".

Additional information

The only current workarounds are // @ts-ignore or // prettier-ignore

Neither solution is ideal for maintaining clean, type-safe code.

VS Code Version: 1.95.3

Prettier Extension Version: 11.0.0

OS and version: Ubuntu 24.04

Prettier Log Output

[INFO] Prettier Options:
{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [...],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "printWidth": 120,
  "arrowParens": "always"
}
[INFO] Prettier Resolution: Prettier Path: /Users/[username]/project/node_modules/prettier
[INFO] Formatting file:///Users/[username]/project/src/types.ts
[INFO] Formatting completed in 0.1s

danielbjornadal avatar Nov 22 '24 08:11 danielbjornadal

Same issue here. Temporary workaround is to remove the plugins. No matter what plugins I think, cause I had "@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss", The error occurred no matter which I disabled, as long as one is active.

madaxen86 avatar Dec 02 '24 00:12 madaxen86

I also have noticed this. I have a repo with a reproduction here: https://github.com/ianmitchell/tailwind-example

If you open the repro and navigate to the page.tsx file and save, the extension will change the Promise<number> function return signature to Promise. This doesn't happen when prettier is invoked via the CLI.

If I can do anything else to help debug this, happy to help!

IanMitchell avatar Dec 06 '24 20:12 IanMitchell

+1 here

jjram19 avatar Dec 19 '24 18:12 jjram19

+1 here

davidy3k avatar Dec 20 '24 00:12 davidy3k

I meet in the same issue after packages.json libraries update. Restarting Prettier VScode extension worked for me.

pawel-halat avatar Dec 24 '24 12:12 pawel-halat

I had to remove this line of my vscode settings.json "prettier.prettierPath": "/usr/local/lib/node_modules/prettier/index.cjs", Now it works again.

madaxen86 avatar Dec 25 '24 16:12 madaxen86

+1 here

Only way to fix was to remove this plugin:

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

which we'd love to keep using...

solastley avatar Jan 23 '25 23:01 solastley

+1 here

Only way to fix was to remove this plugin:

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

which we'd love to keep using...

Exact same situation here. Just added the plugin to a new repo and observed the behavior

sd-hoag avatar Jan 28 '25 20:01 sd-hoag

+1 here Only way to fix was to remove this plugin:

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

which we'd love to keep using...

Exact same situation here. Just added the plugin to a new repo and observed the behavior

Reinstalling the VSCode Prettier extentions appears to have solved this for me

sd-hoag avatar Jan 28 '25 20:01 sd-hoag

For me Prettier 3.3.2 or lower does not exhibit this behavior. I narrowed it down to 3.3.3+ that does, which makes me wonder what changed in 3.3.3 that could have broken compatibility when using plugins and generics at the same time.

Uninstalling and reinstalling the extension did not help, but disabling plugins also prevents the generics from being removed, so long as 0 plugins are configured.

Related discussion on SO here

vinnymac avatar Feb 04 '25 21:02 vinnymac

I don't have this issue in vscode, but only in the CLI. But same for me, removing the only plugin I had (prettier-plugin-tailwindcss) was solving the issue in the cli. For information though, weirdly I was used to use pnpm instead of npm and had no issue with pnpm. Not sure why it has to be different but maybe it helps.

Update: I went back to prettier 3.4.2 and it solved the issue. Then I installed 3.5.0 again and it works. Looks like a npm install issue?

cedeber avatar Feb 11 '25 11:02 cedeber

FWIW, I ran into this same issue after I updated my project typescript dependency from v4.9 to v5.7 and found my way here. The recommendation from @pawel-halat worked for me. I restarted my extensions and the problem went away. I was just about to give up and disable with a prettier-ignore comment.

@cedeber , it might have worked for you because you effectively restarted the extension by switching versions.

mgoulet101 avatar Feb 12 '25 14:02 mgoulet101

FWIW, prettier-plugin-sort-imports seems to have this problem. I switched to prettier-plugin-organize-imports and it works fine.

quark-zju avatar Feb 12 '25 19:02 quark-zju

I'm having the same problem with prettier-plugin-organize-imports. Disabling the plugin solves it.

quentez avatar Feb 14 '25 12:02 quentez

There was no prettier in my package.json and I had the same problem. A simple pnpm add -D prettier fixed it for me (it installed version 3.5.1).

nonpop avatar Feb 21 '25 08:02 nonpop

@nonpop 😄 Actually, for me, it was the exact opposite. I had the prettier package included in my package.json and after upgrading a bunch of packages (including prettier) it started to strip my Promise types. I didn't notice it at first as my default setting is to format on save, but when I touched a file with Promise<void> set as the return type of a function it started to throw compilation errors. I just removed prettier from package.json as direct dependency and everything went back to normal. My project uses shared prettier configuration from npm package, and prettier property is set in package.json so VSCode extension properly picks it up and uses with built-in prettier extension version.

SPodjasek avatar Feb 21 '25 09:02 SPodjasek

I tried to fix it for 6 hours, edited the prettier.config.js, didn't sleep until 4am... Just had to restart vscode ಥ‿ಥ all for this >>> "plugins": ["@trivago/prettier-plugin-sort-imports"]

fruitbang avatar Feb 22 '25 11:02 fruitbang

Upgrade prettier from 3.4.2 to 3.5.2 solved my problem. I use prettier-plugin-organize-imports as well. I use visual studio 2022 and typescript Analyzer(ESlint). Copy new installed prettier to C:\Users\xx\AppData\Local\Microsoft\VisualStudio\17.0_aa37ebb0\Extensions\nwyzzcs5.qrm\Node\node_modules.

vickyzheng2003 avatar Feb 28 '25 18:02 vickyzheng2003

I can also confirm that upgrading beyond 3.3.2 is now possible, I went straight to 3.5.3 without any issues. Curious which release fixed it, but not going to spend the time to find out.

vinnymac avatar Mar 05 '25 16:03 vinnymac

There was no prettier in my package.json and I had the same problem. A simple pnpm add -D prettier fixed it for me (it installed version 3.5.1).

it worked for me, i updated the prettier version in my global dependencies with npm i -g prettier@latest and restarted VSCode

Bruno86889 avatar May 03 '25 13:05 Bruno86889

I must answer here, same problem. My solution is: Format Document With change Configure Default Formatter from Prettier-Code Format to Prettier Eslint, and the problem solved. I don't know why, but at least, the problem solved

lidingcai avatar Jun 03 '25 08:06 lidingcai

for me, reinstall prettier solve the problem

sfrog avatar Jun 05 '25 12:06 sfrog

I meet in the same issue after packages.json libraries update. Restarting Prettier VScode extension worked for me.

It helped me. Thank you!

Bespalov-D-A avatar Jun 09 '25 05:06 Bespalov-D-A

There was no prettier in my package.json and I had the same problem. A simple pnpm add -D prettier fixed it for me (it installed version 3.5.1).

thanks!

SirDank avatar Jun 25 '25 09:06 SirDank

This seems to be flaky. It happened to me today. Then I

  • commented out plugins in prettierrc,
  • saved a file in vs code to run prettier and formatting worked,
  • uncommented the plugins to re-enable them,
  • made and change and saved again to run prettier again

The problem was gone after re-enabling plugins. It was randomly converting Promise<foo> into Promise, and changing and restoring my prettierrc somehow fixed it in VS Code.

trusktr avatar Aug 05 '25 08:08 trusktr

adding parser: 'babel-ts to my prettier config solves this for me (prettier v3.6.2)

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/338#issuecomment-2574259286

source: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/338

abielzulio avatar Aug 25 '25 16:08 abielzulio