question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript 3.8.3 - Conditional chaining break formatting

See original GitHub issue

Summary

I’ve reinstalled vsCode delete all my settings and installed just Prettier (3.20.0), using TSX with latest version of Typescript the format breaks whenever i use conditional chaining. I know that there are other issue, but they are all closed due to inactivity or other reasons, i’ve tried all the solutions that have been proposed without success.

Expected result

The format should succeed even if i us conditional chaining (typescript 3.7.0+)

Actual result

Formatting a file that doesn’t contain conditional chaining work fine, it breaks only when a file with .tsx extension contains conditional chaining

Additional information

image image image image

VS Code Version:

Prettier Extension Version: 3.20.0

OS and version: MacOSx 10.14.6

Prettier Log Output

{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 12:08:08 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 12:08:08 PM] Prettier Options:
{
  "filepath": "/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/src/components/molecules/exported/fl-input-file.molecule/fl-input-file.molecule.tsx",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "lf",
  "printWidth": 120,
  "singleQuote": true
}
["ERROR" - 12:08:08 PM] Error formatting document.
["ERROR" - 12:08:08 PM] Expression expected. (190:45)
  188 |       event.preventDefault();
  189 |     }
> 190 |     const files: File[] = Array.from(target?.files);
      |                                             ^
  191 |     this.readMultipleFiles(files)
  192 |       .then((fileArray: EmittedFile[]) => {
  193 |         const value: EmittedFile[] = this.multiple
SyntaxError: Expression expected. (190:45)
  188 |       event.preventDefault();
  189 |     }
> 190 |     const files: File[] = Array.from(target?.files);
      |                                             ^
  191 |     this.readMultipleFiles(files)
  192 |       .then((fileArray: EmittedFile[]) => {
  193 |         const value: EmittedFile[] = this.multiple
	at e (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/parser-typescript.js:1:329)
	at Object.parse (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/parser-typescript.js:1:2261773)
	at Object.parse$2 [as parse] (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/index.js:10629:19)
	at coreFormat (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/index.js:13888:23)
	at format (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/index.js:14146:73)
	at formatWithCursor (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/index.js:14162:12)
	at /Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/index.js:42756:15
	at Object.format (/Users/romeo.nupieri/Documents/Projects/Personal/Stencil/fl-ui-project/fl-ui/node_modules/prettier/index.js:42775:12)
	at /Users/romeo.nupieri/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:350954
	at t.default.safeExecution (/Users/romeo.nupieri/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:351254)
	at t.default.<anonymous> (/Users/romeo.nupieri/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:350934)
	at Generator.next (<anonymous>)
	at s (/Users/romeo.nupieri/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:345019)
["INFO" - 12:08:08 PM] Formatting completed in 46.130914ms.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
ntottencommented, Apr 6, 2020

Your project is using prettier 1.18.2, you need at least 1.19 to use conditional chaining. Run npm add prettier@1.19 -D

The prettier extension uses your local version of prettier when it is available. The version bundled with the extension is only a fallback if no local or global version is found.

1reaction
David-Elsecommented, Mar 23, 2020

This extension needs to update to Prettier 2.X

Prettier 2.0 is out!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation - TypeScript 3.7
The nullish coalescing operator is another upcoming ECMAScript feature that goes hand-in-hand with optional chaining, and which our team has been involved with ......
Read more >
Prettier: optional chaining support - Stack Overflow
In my case I resolve by update prettier from 1.18.2 to 2.0.5. If someone here is using JetBrains based IDE, please check your...
Read more >
Announcing TypeScript 3.7 - Microsoft Developer Blogs
Optional Chaining · Nullish Coalescing · Assertion Functions · Better Support for never -Returning Functions · --declaration and --allowJs · (More) ...
Read more >
Prettier 2.0 “2020”
Improved method chain breaking heuristic (#6685 by @mmkal) ... It's finally possible to run prettier --write . to format all supported files ...
Read more >
The Beauty of the Optional Chaining Operator (?.) in TypeScript
TypeScript 3.7 gave us the optional chaining operator ( ?. ) that has the ability to shrink our, otherwise long and complex, code....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found