Optional chaining operator support in VSCode

Question

React Native 0.56 provides native support of Optional Chaining Operator i.e ?.

However the latest stable release of VS Code can not recognize this syntax and throw a TypeScript validation error:

[ts] Expression expected.

while no complie-time or eslint error was thrown.

How can I do to fix it?

Update on 2019/12/11:

Optional chaining is offically supported by TypeScript since 3.7!

If you still meet this error, probably the TypeScript lib shipped with your VSCode is < 3.7.

You can fix it simply by installing the latest version of typescript (>= 3.7) to your workspace. (by npm or yarn as dev deps)

Then open the command palette, type tstv, and switch the TypeScript version used for JS and TS features from VS Code's Version to Workspace's Version (make sure it's >= 3.7) and voila!

This is definitely an awesome feature, thanks your all and happy hacking!

[This answer](https://stackoverflow.com/a/36327097/5735864) and [this tutorial](https://medium.com/the-react-native-log/getting-eslint-right-in-react-native-bd27524cc77b) helped me to solve this problem. I think the key here is disabling js/ts validation since the error comes from specifically '[ts]'. — Sait Banazili, Oct 08 '18 at 08:55
It's considered bad form to ask a question on SO and then fail to accept any of the valid answers. Please pick the most useful answer and mark it as the solution. — Isochronous, Nov 08 '19 at 17:07

Matt Bierner · Accepted Answer · 2019-12-16T08:34:41.000

45

VS Code 1.41 supports optional chaining in both JavaScript and TypeScript files. This support includes syntax highlighting and IntelliSense.

If you are using VS Code 1.41+ and optional chaining is not working as expected, try:

Check your installed extensions. Some of them may not yet understand optional chaining, which could cause errors or bad syntax highlighting
If you are using a workspace typescript version, make sure it is TypeScript 3.7+

edited Dec 16 '19 at 08:34

answered Oct 23 '19 at 20:03

Matt Bierner

58,117
21
175
206

2

No need to use the nightly build, you can also force VS Code to use the version in node_modules. See https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions – Ries Vriend Nov 15 '19 at 13:32
In my case, I had typescript working but there was no info when hovering on the `?.prop`, and the debug console threw an error when trying to enter in a value with optional chaining. Some research showed that this is a [Node 14.5+ feature](https://node.green/#ES2020-features-optional-chaining-operator------optional-property-access), so I switched to using that version of node and now hovering works and the debug console now lets me use `?.` in expressions. – ps2goat Feb 17 '21 at 16:42

score 15 · Answer 2 · edited Oct 24 '19 at 01:14

15

You can install JavaScript and TypeScript Nightly, then reopen VSCode.

edited Oct 24 '19 at 01:14

Viktor

2,623
3
19
28

answered Oct 23 '19 at 14:53

icbbetter

151
1
3

1

Thank you! By far this is the godsend suggestion. Turning off TS validation was a lame option since you'd lose all the benefits of VSCode. – Eugene Tiutiunnyk Oct 24 '19 at 21:52

score 2 · Answer 3 · answered Jun 08 '19 at 09:52

2

I just resolved the issue with disabling js/ts validation in vscode json settings:

"javascript.validate.enable": false

You my need to install eslint-plugin-babel for eslint rules.

{
  "plugins": [
    "babel"
  ],
  "rules": {
    "babel/new-cap": 1,
    "babel/camelcase": 1,
    "babel/no-invalid-this": 1,
    "babel/object-curly-spacing": 1,
    "babel/quotes": 1,
    "babel/semi": 1,
    "babel/no-unused-expressions": 1,
    "babel/valid-typeof": 1
  }
}

answered Jun 08 '19 at 09:52

yotke

1,170
2
12
26

Do you have a link to your github repo for this? Be nice to see some boilerplate that's actually working – Alex Cory Jun 21 '19 at 00:41
Just leaving this here for others. https://github.com/malienist/default-config-files/blob/master/.eslintrc.json – Safal Pillai Jun 11 '20 at 21:32

score 1 · Answer 4 · answered Feb 24 '20 at 20:54

1

This was still happening to me until I uninstalled the extension JavaScript and TypeScript IntelliSense

So yes, check uninstalling old plugins if you are still having this issue. Also you can try the vscode insiders version and check if this works in that one. It worked for me without doing any change.

answered Feb 24 '20 at 20:54

DarkCrazy

527
5
6

i'm glad i could help! thank you for letting me know! – DarkCrazy May 08 '20 at 05:02

score 1 · Answer 5 · answered Feb 26 '21 at 08:13

My case, i need add "tslint-config-prettier" to tslint.json file

This is my tslint.json file

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier"  # ----> This line
  ],
  "jsRules": {},
  "rules": {
    "semicolon": false,
    "quotemark": [true, "single"],
    "prefer-for-of": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "interface-name": false,
    "callable-types": false,
    "no-console": false,
    "no-bitwise": false,
    "variable-name": [
      true,
      "allow-leading-underscore",
      "allow-snake-case"
    ]
  },
  "rulesDirectory": []
}

Optional chaining operator support in VSCode

5 Answers5

Linked