Formatting failed if "with" keyword in import attributes but Prettier v3.4.2 and acorn support

[anilkumarum]

Summary

pPease update vscode extension in vscode marketplace
Formatting fails when the 'with' keyword is used in import attributes, but both Prettier v3.4.2 and Acorn support the use of the 'with' keyword in import attributes.

Steps To Reproduce:

import styleCss from "./style.css" with { type: "css" };
document.adoptedStyleSheets.push(styleCss);

Expected result

Format javascript file properly if "with" keyword in import attributes used

Actual result

SyntaxError: Unexpected token, expected "(" (1:41)

1 | import styleCss from "./style.css" with { type: "css" };
| ^
2 | document.adoptedStyleSheets.push(styleCss);

Additional information

Prettier v3.4.2 supports the 'with' keyword in import attributes. Please update your Prettier dependencies and the Prettier VSCode extension. Due to this issue, I was forced to use an alternative formatting tool.

VS Code Version:
Version: 1.89.1
Commit: dc96b837cf6bb4af9cd736aa3af08cf8279f7685
Date: 2024-05-07T05:16:23.416Z
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Linux x64 5.15.0-126-generic

Prettier Extension Version: v11.0.0

OS and version:Linux

Prettier Log Output

SyntaxError: Unexpected token, expected "(" (1:42)
> 1 | import  styleCss from "./style.css" with { type: "css" };
    |                                          ^
  2 | document.adoptedStyleSheets.push(styleCss);
  3 |
  4 |

[thevalleyy]

Having the same issue

[vikiboss]

Hey there! Just wondering if there's any update on this? It looks like the VSCode prettier plugin might be running a slightly older version, which is causing it to flag the import attributes as syntax errors. 🤔

[leetcow]

I don't understand why there isn't an automated way to keep the VSCode extension on the latest release of prettier - in the least, let us plug in a custom version (actually maybe this is already possible)

edit: ok guys the answer is as simple as bun add -d prettier (or wtv your package manager's equivalent is).

the vscode extension will then rely on that version.

[bierdok]

Having the same issue 👎

[calvario31]

any workaround for this?

[bierdok]

You can install prettier awaiting the update.
Open a terminal in the vscode project root.

npm i prettier

[calvario31]

thanks

[damianstasik]

If you work in a monorepo, you can point the extension to the directory with local version of prettier and it should work correctly.

[venil7]

has this been addressed?
with bun adding with {type:'macro'} this sorta becomes deal breaker

[ntotten]

This issue should be resolved in version 12 of the extension. Version 12 is currently in preview and is published only to the new Prettier organization. You can find that version here: https://marketplace.visualstudio.com/items?itemName=Prettier.prettier-vscode

Once we decide version 12 is stable it will be published to the old extension location as well.

Please test this issue in version 12 and let me know if this is still an issue. If we don't hear back this issue may be closed.