Skip to content

When the code contains' definiteExpose ', the code is not highlighted #5336

Closed as duplicate of#4407
@liushuai-china

Description

@liushuai-china

Vue - Official extension or vue-tsc version

2.2.10

VSCode version

version 1.99

Vue version

3.5.13

TypeScript version

5.8.3

System Info

Browser:egde

package.json dependencies

"dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.2",
    "vite": "^6.3.1"
  }

Steps to reproduce

When the number of lines of code exceeds 200 and defineExpose is used at the end of the code, the code is not highlighted. If I delete definiteExpose, the code will restore highlighting

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button
      type="button"
      @click="count++"
    >count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a
      href="https://vuejs.org/guide/quick-start.html#local"
      target="_blank"
    >create-vue</a>, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
    >Vue Docs Scaling up Guide</a>.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})
const count = ref(0)

const sum = ref(1)

function addSum() {
  sum++;
}

const data = [
  {
    id: 1,
    name: "Jack"
  },
  {
    id: 2,
    name: "Emma"
  },
  {
    id: 3,
    name: "Liam"
  },
  {
    id: 4,
    name: "Olivia"
  },
  {
    id: 5,
    name: "Noah"
  },
  {
    id: 6,
    name: "Ava"
  },
  {
    id: 7,
    name: "James"
  },
  {
    id: 8,
    name: "Isabella"
  },
  {
    id: 9,
    name: "Lucas"
  },
  {
    id: 10,
    name: "Sophia"
  },
  {
    id: 11,
    name: "Jack"
  },
  {
    id: 12,
    name: "Emma"
  },
  {
    id: 13,
    name: "Liam"
  },
  {
    id: 14,
    name: "Olivia"
  },
  {
    id: 15,
    name: "Noah"
  },
  {
    id: 16,
    name: "Ava"
  },
  {
    id: 17,
    name: "James"
  },
  {
    id: 18,
    name: "Isabella"
  },
  {
    id: 19,
    name: "Lucas"
  },
  {
    id: 20,
    name: "Sophia"
  },
  {
    id: 21,
    name: "Jack"
  },
  {
    id: 22,
    name: "Emma"
  },
  {
    id: 23,
    name: "Liam"
  },
  {
    id: 24,
    name: "Olivia"
  },
  {
    id: 25,
    name: "Noah"
  },
  {
    id: 26,
    name: "Ava"
  },
  {
    id: 27,
    name: "James"
  },
  {
    id: 28,
    name: "Isabella"
  },
  {
    id: 29,
    name: "Lucas"
  },
  {
    id: 30,
    name: "Sophia"
  },
  {
    id: 31,
    name: "Jack"
  },
  {
    id: 32,
    name: "Emma"
  },
  {
    id: 33,
    name: "Liam"
  },
  {
    id: 34,
    name: "Olivia"
  },
  {
    id: 35,
    name: "Noah"
  },
  {
    id: 36,
    name: "Ava"
  },
  {
    id: 37,
    name: "James"
  },
  {
    id: 38,
    name: "Isabella"
  },
  {
    id: 39,
    name: "Lucas"
  },
  {
    id: 40,
    name: "Sophia"
  },
  {
    id: 41,
    name: "Jack"
  },
  {
    id: 42,
    name: "Emma"
  },
  {
    id: 43,
    name: "Liam"
  },
  {
    id: 44,
    name: "Olivia"
  },
  {
    id: 45,
    name: "Noah"
  },
  {
    id: 46,
    name: "Ava"
  },
  {
    id: 47,
    name: "James"
  },
  {
    id: 48,
    name: "Isabella"
  },
  {
    id: 49,
    name: "Lucas"
  },
  {
    id: 50,
    name: "Sophia"
  },
  {
    id: 51,
    name: "Jack"
  },
  {
    id: 52,
    name: "Emma"
  },
  {
    id: 53,
    name: "Liam"
  },
  {
    id: 54,
    name: "Olivia"
  },
  {
    id: 55,
    name: "Noah"
  },
  {
    id: 56,
    name: "Ava"
  },
  {
    id: 57,
    name: "James"
  },
  {
    id: 58,
    name: "Isabella"
  },
  {
    id: 59,
    name: "Lucas"
  },
  {
    id: 60,
    name: "Sophia"
  },
  {
    id: 61,
    name: "Jack"
  },
  {
    id: 62,
    name: "Emma"
  },
  {
    id: 63,
    name: "Liam"
  },
  {
    id: 64,
    name: "Olivia"
  },
  {
    id: 65,
    name: "Noah"
  },
  {
    id: 66,
    name: "Ava"
  },
  {
    id: 67,
    name: "James"
  },
  {
    id: 68,
    name: "Isabella"
  },
  {
    id: 69,
    name: "Lucas"
  },
  {
    id: 70,
    name: "Sophia"
  },
  {
    id: 71,
    name: "Jack"
  },
  {
    id: 72,
    name: "Emma"
  },
  {
    id: 73,
    name: "Liam"
  },
  {
    id: 74,
    name: "Olivia"
  },
  {
    id: 75,
    name: "Noah"
  },
  {
    id: 76,
    name: "Ava"
  },
  {
    id: 77,
    name: "James"
  },
  {
    id: 78,
    name: "Isabella"
  },
  {
    id: 79,
    name: "Lucas"
  },
  {
    id: 80,
    name: "Sophia"
  },
  {
    id: 81,
    name: "Jack"
  },
  {
    id: 82,
    name: "Emma"
  },
  {
    id: 83,
    name: "Liam"
  },
  {
    id: 84,
    name: "Olivia"
  },
  {
    id: 85,
    name: "Noah"
  },
  {
    id: 86,
    name: "Ava"
  },
  {
    id: 87,
    name: "James"
  },
  {
    id: 88,
    name: "Isabella"
  },
  {
    id: 89,
    name: "Lucas"
  },
  {
    id: 90,
    name: "Sophia"
  },
  {
    id: 91,
    name: "Jack"
  },
  {
    id: 92,
    name: "Emma"
  },
  {
    id: 93,
    name: "Liam"
  },
  {
    id: 94,
    name: "Olivia"
  },
  {
    id: 95,
    name: "Noah"
  },
  {
    id: 96,
    name: "Ava"
  },
  {
    id: 97,
    name: "James"
  },
  {
    id: 98,
    name: "Isabella"
  },
  {
    id: 99,
    name: "Lucas"
  },
  { id: 100, name: "Sophia" }
];

function addSum() {
  sum++;
}
defineExpose({ sum, addSum, name })

</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>

What is expected?

Code highlighting

What is actually happening?

Code not highlighted

Link to minimal reproduction

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    duplicateThis issue or pull request already exists

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions