Prettier-vscode: Nullish coalescing doesn't work as expected in TypeScript

Created on 13 Apr 2020  路  5Comments  路  Source: prettier/prettier-vscode

Summary

Nullish coalescing doesn't work as expected in TypeScript.

Steps To Reproduce:

  1. Write this bit of code in a TypeScript (.ts) file const hello = 'hi' ?? 'test'
  2. Add odd spacing for Prettier to fix
  3. Run the formatting shortcut in VS Code

Expected result

The badly formatted code should get formatted by Prettier.

Actual result

Nothing happens, the spacing stays odd and the Prettier plugin thinks there's a syntax error. See the log below.

Additional information

Formatting nullish coalescing operators still seems to work perfectly in JavaScript files (.js), so this is only an issue with TS.

This issue has been found to not be an issue with Prettier itself but with this extension specifically: https://github.com/prettier/prettier/issues/7428#issuecomment-589012567

VS Code Version: 1.44.0

Prettier Extension Version: 4.2.0

OS and version: Windows 10 - Version 10.0.18363 Build 18363

Prettier Log Output


["ERROR" - 00:02:14] Error formatting document.
["ERROR" - 00:02:14] Expression expected. (1:29)
> 1 |         const hello = 'hi' ?? 'test'
    |                             ^
SyntaxError: Expression expected. (1:29)
> 1 |         const hello = 'hi' ?? 'test'
    |                             ^
    at e (c:\projects\DFE\node_modules\prettier\parser-typescript.js:1:329)
    at Object.parse (c:\projects\DFE\node_modules\prettier\parser-typescript.js:1:2261773)
    at Object.parse$2 [as parse] (c:\projects\DFE\node_modules\prettier\index.js:10629:19)
    at coreFormat (c:\projects\DFE\node_modules\prettier\index.js:13888:23)
    at format (c:\projects\DFE\node_modules\prettier\index.js:14146:73)
    at formatWithCursor (c:\projects\DFE\node_modules\prettier\index.js:14162:12)
    at c:\projects\DFE\node_modules\prettier\index.js:42756:15
    at Object.format (c:\projects\DFE\node_modules\prettier\index.js:42775:12)
    at c:\Users\Admin\.vscode\extensions\esbenp.prettier-vscode-4.2.0\dist\extension.js:1:250598
    at t.default.safeExecution (c:\Users\Admin\.vscode\extensions\esbenp.prettier-vscode-4.2.0\dist\extension.js:1:250898)
    at t.default.<anonymous> (c:\Users\Admin\.vscode\extensions\esbenp.prettier-vscode-4.2.0\dist\extension.js:1:250578)
    at Generator.next (<anonymous>)
    at s (c:\Users\Admin\.vscode\extensions\esbenp.prettier-vscode-4.2.0\dist\extension.js:1:244725)
locked

Most helpful comment

Hm you're right, this issue only happens in one of my repos but not in another.

I was finally able to work out what was causing the issue. react-slick, a dependency I was using, had prettier as a dependency for some reason. It was using an old version of prettier and apparently VS Code prefers using the local version of prettier if there is one rather than the version that comes installed with the plugin.

Installing the latest prettier as a direct dependency solved this.

All 5 comments

This bug is missing information needed to diagnose the problem. Please see our guide on how to open a good issue and provide the missing information. Specifically, I need a Github repo that contains a project that can be used to reproduce this. I am not able to reproduce it on my machine.

Hm you're right, this issue only happens in one of my repos but not in another.

I was finally able to work out what was causing the issue. react-slick, a dependency I was using, had prettier as a dependency for some reason. It was using an old version of prettier and apparently VS Code prefers using the local version of prettier if there is one rather than the version that comes installed with the plugin.

Installing the latest prettier as a direct dependency solved this.

Thanks for looking into this @ntotten 馃檶

@Arrow7000 You are my hero 馃コ

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings