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.

Incorrect syntax highlighting when using nullish coalescing in template

See original GitHub issue
  • I have searched through existing issues
  • I have read through docs
  • I have read FAQ
  • I have tried restarting VS Code or running Vetur: Restart VLS

Info

  • Platform: Win10
  • Vetur version: 0.33.1
  • VS Code version: 1.55.1

Problem

When using nullish coalescing(??) in template, syntax highlighting behaves unexpectedly:

image

While using || the highlighing is correct:

image

I don’t know why but this problem doesn’t happen on my macOS (with same VSCode extensions and settings).

Reproducible Case

Create a new .vue file:

<template>
  <div>
    <span>
      {{ aVariable ?? 3 }}
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    aVariable: { type: Number, required: true },
  },
});
</script>

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
simaodiascostacommented, Apr 13, 2021

Similar happens when using typeof operator in a v-if condition

Using typeof image

No typeof image

0reactions
yoyo930021commented, Jun 2, 2021

I will close this issue. Thanks for your report. The typeof problem ☞ https://github.com/vuejs/vetur/issues/2709

Read more comments on GitHub >

github_iconTop Results From Across the Web

Incorrect syntax highlighting when using nullish coalescing in ...
Incorrect syntax highlighting when using nullish coalescing in template #2861 ... I have tried restarting VS Code or running Vetur: Restart VLS ...
Read more >
VSCode syntax highlighting not working when using
Good afternoon! I'm working on react.js with typescript. Recently moved to a new computer and noticed ...
Read more >
Binding syntax - Angular
You use data binding to specify things such as the source of an image, the state of a button, or data for a...
Read more >
WebStorm 201.5616.21 Release Notes | Knowledge Base
Feature, WEB-43548, Vuex: support code completion for Vuex store symbols within ... Bug, WEB-43744, Incorrect type inference with nullish coalescing and ...
Read more >
Angular 14 is Available Now! - eSketchers
For example, we can write invalid code with successful compilation. ... also display a warning for nullish coalescing operators (?
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