Optional chaining (?.) in code causes error

[culhantr]

Installed product versions

• Visual Studio: 2019 Professional 16.9.5
• This extension: 2.1.47

Description

Running Prettier on a file that includes the Optional chaining operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) causes a syntax error

Steps to recreate

1. Create a file which uses the optional chaining operator (Note: My file is .tsx - not sure if this is relevant)
2. Run Prettier

Current behavior

The file is not prettified and there is an error in the Output:

11/17/2021 11:18:07 AM: [error] stdin: SyntaxError: Expression expected. (146:20)
[error]   144 |         (c) =>
[error]   145 |           c.value &&
[error] > 146 |           (c.value?.toString() === value ||
[error]       |                    ^
[error]   147 |             parseFloat(c.value?.toString()) === parseFloat(value))
[error]   148 |       ) !== index
[error]   149 |     ) {

(Because I'm not sure the text will line up properly here, I want to point out that in the output the caret is pointing to the period after the question mark in "(c.value?.toString()")

Expected behavior

Prettier properly parses the code and makes it pretty.

[ruffin--]

Just for fun, I tried code with the optional chaining operator on the Prettier playground and it worked.

That tells me this is likely an issue b/c the default version of prettier in the extension is pretty old (2.2.1, I think). That is, this is a stale prettier issue rather than strictly an extension issue.

In the latest (?) version of this plugin, there's an option to download and use a more recent version of Prettier. Now the version of the plugin on the Marketplace is JavaScript_Prettier_v2.1.47 (what you had) and the latest here in the CI build is JavaScript Prettier v2.2.52. I don't know if that means the Marketplace version just hasn't been updated or if the newer one is broken and is hidden from the masses on purpose.

But with that warning and a quick mention that the newer version Works on My Box (c)1842...

1. Install the latest CI build of the plugin
2. Open Tools >>> Options from the standard toolbar at the top.
3. Find the entry for Prettier.
4. Enter a new value for Prettier version for embedded usage
   • (Who decided on that wordy string? Oh yeah, me from the past; sorry)
   • I'm using 2.5.1, and the code prettiers with that.
5. Watch the output for the plugin as it downloads to ensure success.
6. Profit.