How can I make VSCode maintain proper syntax highlighting for .JS files after using Elvis (?) operator?

Question

In my .js files, when I use an elvis operator const something = data?.info?.set , the entire file turns red after the line used.

How can I make VSCode recognize elvis operators and maintain syntax proper highlighting?

Note: I use metro-react-native-babel-preset and eslint, which by default allows for optionals in pure .js files (not typescript)

I have installed https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next and also followed the instructions to enable it. However, my code is still pure red color starting the line after I use the ? operator.

Does this answer your question? [Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?](https://stackoverflow.com/questions/6613952/is-there-a-null-coalescing-elvis-operator-or-safe-navigation-operator-in-javas) — Igor, Dec 10 '19 at 21:06
[The optional chaining operator proposal is at Stage 4 and thus will likely be in ECMAScript 2020](https://github.com/tc39/proposal-optional-chaining). — Heretic Monkey, Dec 10 '19 at 21:23

score 6 · Answer 1 · answered Dec 12 '19 at 18:17

6

VS Code 1.41 supports syntax highlighting and IntelliSense for optional chaining (?.) out of the box.

If you still see red highlighting with VS Code 1.41, either:

One of your installed extensions is causing this. ESlint for example
You are using an older typescript version in your workspace. Make sure to use TS 3.7+

answered Dec 12 '19 at 18:17

Matt Bierner

TS 3.7.3, VSCode 1.41, ESlint disabled, it's still throwing off syntax highlighting :-/ I've restarted both VSCode and the Typescript server. – coisnepe Dec 19 '19 at 14:26
2

Try disabling your other extensions too, such as the Babel one – Matt Bierner Dec 19 '19 at 19:14
3

"Sublime Babel" was the problem. Thank you ! – coisnepe Dec 20 '19 at 11:20
For me, this was caused by the old "JavaScript and TypeScript IntelliSense" plugin, which is not even necessary anymore. – John Weisz Oct 02 '20 at 09:28
Babel ES6/ES7 extension for VSCode was the culprit for me. – J. Adam Connor Jan 14 '22 at 19:02

score 1 · Answer 2 · answered Aug 08 '21 at 12:30

1

My problem was solved by removing this plugin from VSCode :

answered Aug 08 '21 at 12:30

Axel Paris

tripathiakshit · Answer 3 · 2019-12-10T21:14:32.063

0

EDIT: After OP's edit of the question, I tried to scour for some info. This is what I came up with:

I don't believe there's an Elvis operator in JS.

Instead, you can use the OR operator to return something specific without crashing it. So something like

const something = data.info.set || undefined;

edited Dec 10 '19 at 21:14

answered Dec 10 '19 at 21:06

tripathiakshit

I use react-native, and by default, it allows the usage of it due to the plugins it installs. – TIMEX Dec 10 '19 at 21:07
I've updated my answer to hopefully point you in the right direction. I hope it helps. – tripathiakshit Dec 10 '19 at 21:15

Hargent · Answer 4 · 2023-02-08T20:48:06.357

0

Disable or remove this extension completely from your vs code

edited Feb 08 '23 at 20:48

answered Feb 08 '23 at 13:09

Hargent

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33805512) – Aaron Meese Feb 14 '23 at 18:32

4 Answers4