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

[anilkumarum]

trafficstars

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