Prettier 3.0

[mattbrannon]

Prettier just released a new major version which includes some breaking changes to the API. Currently Prettier 3.0 causes the extension to throw a type error:

Error: Expected `input` to be a `string`, got `object` 
TypeError: Expected `input` to be a `string`, got `object`

I haven't looked into the source code for Prettier or this extension for a while so I don't know how difficult of a fix this is.

If anyone is having this same issue, the short term solution is to explicitly install a version of prettier before 3.0.

npm i -D prettier@2.8.8

[mattbrannon]

More info in this PR

[Catatomik]

Any update on this ? Is there a roadmap ?

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[HoltMansfield]

Please fix this. I can no longer use your plugin and I have severe health problems. I need this automation.

[zhangjie1314]

Please fix it, thank you.

[PrinceGuidon]

Any update on this?

[danielwerg]

https://github.com/prettier/prettier-eslint/pull/901 just got merged.

[arange]

Any update? Much appreciated

[maxkostow]

Seems like this should be fixed by #187

[idahogurl]

Sorry for the lack of response. I've been dealing with medical issues in addition to everything else. Someone created a PR to update everything (#189) but it needs some changes and I don't have much time to help. Also, the automated deploy isn't working and could use some help there.

[idahogurl]

I did a little testing of #189 and upgrading to Prettier 3 is not an option at this time. I am getting the same error as https://github.com/prettier/prettier-vscode/issues/3114 describes when I try to run my extension. Prettier 3 added a dynamic import() in its .cjs file, making ESM support required. VS Code only supports CommonJS (CJS) however. Basically we are stuck with Prettier 2 unless I decide to bundle Prettier 3 and somehow get the bundler to process the dynamic import.

[KillDozerX2]

Sorry for the lack of response. I've been dealing with medical issues in addition to everything else. Someone created a PR to update everything (#189) but it needs some changes and I don't have much time to help. Also, the automated deploy isn't working and could use some help there.

Do you still need help resolving automated deploys?

[idahogurl]

@KillDozerX2 I do still need help with automated deploys. I'm using Auto (docs) to automate the deploys. I think I have it setup wrong. When I run the release workflow it should see there is a new version and publish the extension, but it doesn't. Here is their example: https://intuit.github.io/auto/docs/build-platforms/github-actions

I think it only works with this workflow: https://intuit.github.io/auto/docs/generated/shipit#release-pipeline

[JounQin]

I would recommend to migrate to changesets instead.

And it maybe great to migrate this repo into the prettier org just like prettier-eslint, how do you think?

[0x2aff]

I created something based on your work @idahogurl. The key was to use worker_threads. Prettier is doing this as well for their VSCode extension.

Tested with:

"prettier": "3.1.0" "prettier-eslint": "16.1.2" "@typescript-eslint/parser": "6.12.0" "typescript": "5.3.2"

(https://github.com/0x2aff/vscode-prettier-eslint) (https://marketplace.visualstudio.com/items?itemName=exceptionptr.vscode-prettier-eslint)

[idahogurl]

@0x2aff I actually tried using worker threads as well but it wasn't applying the Prettier config in my tests. I'll have to try your code and see if I can't get my tests to pass.

[JounQin]

Or you can try https://github.com/un-ts/synckit to simplify.

[idahogurl]

@0x2aff I tried your extension and it has the same problem with my test file. I'll create an issue in your repository and provide the files needed to reproduce.

[DucNg]

Here is a PR attempting to fix the issue, does it works for you? https://github.com/idahogurl/vs-code-prettier-eslint/pull/198

[issue-to-branch[bot]]

Click here to create a branch for this issue

[issue-to-branch[bot]]

Branch 171-prettier-3-0 created for this issue. Run command below in your terminal to checkout branch.
git fetch && git checkout 171-prettier-3-0

[idahogurl]

I do have a beta version of the extension working with Prettier 3. It has some breaking changes:

• prettier-eslint is now required as a dev dependency
• Prettier v3.0 is now required
• ESLint >= v8.52.0 is now required

Download and install the extension from here: vs-code-prettier-eslint-6.0.0-beta.vsix.zip

Once I have enough people testing it, I will making it available as a general release. Let me know if you find any issues with it.

[DucNg]

I do have a beta version of the extension working with Prettier 3. It has some breaking changes:

* `prettier-eslint` is now required as a dev dependency

* Prettier v3.0 is now required

* ESLint >= v8.52.0 is now required

Download and install the extension from here: vs-code-prettier-eslint-6.0.0-beta.vsix.zip

Once I have enough people testing it, I will making it available as a general release. Let me know if you find any issues with it.

Thanks a lot!

I just tried and I got this error from the extension output:

Error: Cannot find module 'prettier-eslint'
Require stack:
- /home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js
- /opt/visual-studio-code/resources/app/out/vs/loader.js
- /opt/visual-studio-code/resources/app/out/bootstrap-amd.js
- /opt/visual-studio-code/resources/app/out/bootstrap-fork.js
- 
    at Module._resolveFilename (node:internal/modules/cjs/loader:1129:15)
    at Function.s._resolveFilename (node:electron/js2c/utility_init:2:2786)
    at Function.h.resolve (/opt/visual-studio-code/resources/app/out/vs/loader.js:4:709)
    at Gt (/home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js:1:6854)
    at /home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js:1:7526
    at Generator.next (<anonymous>)
    at /home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js:1:791
    at new Promise (<anonymous>)
    at b (/home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js:1:611)
    at qt (/home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js:1:6888)
    at Object.provideDocumentRangeFormattingEdits (/home/duc/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta/dist/extension.js:2:299)
    at q.provideDocumentRangeFormattingEdits (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:47266)
    at /opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:71002
    at be.s (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:65353)
    at be.$provideDocumentRangeFormattingEdits (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:70989)
    at n.S (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:10836)
    at n.Q (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:10602)
    at n.M (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:9647)
    at n.L (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:8762)
    at h.value (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:7565)
    at c.y (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:1902)
    at c.fire (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:2119)
    at d.fire (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:14047)
    at h.value (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:153:7918)
    at c.y (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:1902)
    at c.fire (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:2119)
    at d.fire (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:14047)
    at MessagePortMain.<anonymous> (/opt/visual-studio-code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:153:6198)
    at MessagePortMain.emit (node:events:513:28)
    at MessagePortMain.emit (node:domain:489:12)
    at Object.MessagePortMain._internalPort.emit (node:electron/js2c/utility_init:2:367)

[manurana]

Hey folks I am eagerly following this issue for a permanent solution, but wanted to suggest a workaround in the meantime

You can use another extension ( rohit-gohri.format-code-action ) which exposes the default VSCode editor.formatOnSave as a code action. Read more about it here.

With this, you will need the following config for vscode

{
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode", // this is the prettier extension
  "editor.codeActionsOnSave": {
    "source.formatDocument": true, // this is exposed by rohit-gohri.format-code-action
    "source.fixAll.eslint": true // this is exposed by dbaeumer.vscode-eslint
  },
}

We are telling VSCode that the default formatter is prettier, but DON'T format on save (which would only run prettier, and not eslint) Instead, run the following two code actions on save

1. Format using prettier
2. Fix using eslint

Hope this helps tide over the gap we are feeling :)

[idahogurl]

@DucNg Did you install prettier-eslint locally?

[DucNg]

@DucNg Did you install prettier-eslint locally?

Thanks! Indeed, it does work if prettier-eslint is installed as a dependency!

[jaulz]

@idahogurl nice, thanks for your hard work! 😊 Is it possible that you can release it as a preview version so we can install it from VSC right away?

[netux]

Download and install the extension from here: vs-code-prettier-eslint-6.0.0-beta.vsix.zip

Once I have enough people testing it, I will making it available as a general release. Let me know if you find any issues with it.

Thank you! I tested on a medium-sized real-world project. The new version seems to work great, although its noticeably slower than the original. I assume the bottleneck is with the worker communication?

[idahogurl]

Thank you! I tested on a medium-sized real-world project. The new version seems to work great, although its noticeably slower than the original. I assume the bottleneck is with the worker communication?

@netux Yes, the bottleneck is using worker threads.

[JounQin]

@idahogurl Have you tried synckit which caches the worker function to share a single worker instead of creating a new worker every time? Of course you can cache it by yourself. (But I think we don't need to reinvent the wheel.

[idahogurl]

@JounQin It looks like I can't use synckit because it wants ts-node or tsx to run the worker process. Would https://github.com/lambci/sync-threads be faster than recreating the worker each time?

[JounQin]

@idahogurl

it wants ts-node or tsx to run the worker process

No, it doesn't, if the worker is plain js, then js will be used. No ts runner required.

Would lambci/sync-threads be faster than recreating the worker each time?

No, see benchmark https://github.com/un-ts/synckit/blob/main/benchmarks/benchmark.cjs.txt and https://github.com/un-ts/synckit/blob/main/benchmarks/benchmark.esm.txt

See also the live benchmark at https://github.com/un-ts/synckit/actions/runs/7109535052/job/19354607940#step:6:7 (It's even faster than native on Ubuntu 🤣)

[idahogurl]

@netux Could you try this version to see if it speeds things up? It uses synckit as suggested by @JounQin vs-code-prettier-eslint-6.0.0-beta.1.vsix.zip

[jaschaephraim]

@idahogurl I've tried both beta versions. Now only the first run takes as long as the previous version, after that it's nearly instant. Thanks so much for your great work

[netux]

@netux Could you try this version to see if it speeds things up? It uses synckit as suggested by JounQin vs-code-prettier-eslint-6.0.0-beta.1.vsix.zip

I can confirm what @jaschaephraim observed: the first format takes ~2.5 seconds, then subsequent formats are pretty much instant.

I think this could be improved even further if the worker was created on load. But as it is right now it feels pretty good for normal use. Thank you!

[JounQin]

I think this could be improved even further if the worker was created on load.

Yep, the worker can be preloaded.

[mattbrannon]

@idahogurl The latest beta version works great for me. I'm not seeing any noticeable delay when formatting.

[idahogurl]

@netux @jaschaephraim Try this version. I preloaded the worker. vs-code-prettier-eslint-6.0.0-beta.2.vsix.zip

[jaschaephraim]

@idahogurl beta 2 performs just like beta 1, still a short delay on the first run only

[jaulz]

@DucNg Did you install prettier-eslint locally?

I installed prettier-eslint both globally as well as locally in my project but still I see the issue:

Error: Cannot find module 'prettier-eslint'
Require stack:
- /Users/julian/.vscode/extensions/rvest.vs-code-prettier-eslint-6.0.0-beta.2/dist/extension.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
- 
    at Module._resolveFilename (node:internal/modules/cjs/loader:1129:15)
    at s._resolveFilename (node:electron/js2c/utility_init:2:2786)
    at h.resolve (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:709)

Any idea what else could be missing?

[idahogurl]

@jaulz All I can think of is having you restart VS Code and creating a minimal reproduction project.

[Jmyerzzz]

what versions of prettier and prettier-eslint can I downgrade to to restore format on save functionality?

[uberubert]

I've been struggling with lack of format on save all day and haven't found a solution. I'll just add my +1.

[idahogurl]

@Jmyerzzz @uberubert Format on save should be working. Can you provide further information as to exactly isn't working and perhaps a minimal reproduction project? Also, what version of VS Code are you running? I've been using the beta for a while now and haven't had issues. Last thing, have you checked the Output (described in the README in the troubleshooting section)? If there is an error it will show up there.

[JU12000]

@idahogurl Using beta 1 at the moment in a mid-sized monorepo and not seeing any issues with formatting. However if I change my prettier or eslint config files I have to reload VSCode in order for the extension to pick up the changes and format properly again. Otherwise it works great, thank you for maintaining this extension 👍.

[Jmyerzzz]

@idahogurl

VSCode v1.85.1 prettier v3.1.1 prettier-eslint v16.1.2

Output: TypeError: Expected input to be a string, got object

[idahogurl]

@Jmyerzzz You need to download and install the beta 1 version of the extension. Use this link https://github.com/idahogurl/vs-code-prettier-eslint/files/13621102/vs-code-prettier-eslint-6.0.0-beta.1.vsix.zip

[idahogurl]

@netux @jaschaephraim Please try this new version to see if it speeds things up vs-code-prettier-eslint-6.0.0-beta.3.vsix.zip

[jaschaephraim]

Still seeing the same short delay on the first format, very fast after that.

[ibussieres]

I've been using beta3 all morning, It seems to be working fine! I'll be using it daily, so unless I report back, it's safe to assume that it's working well for me as well.

"eslint": "^8.52.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.2",
"prettier": "^3.1.1",
"prettier-eslint": "^16.2.0",