PUG + TS syntax highlighting breaks inside v-for

[backbone87]

Info

• Platform: Win10
• Vetur version: 0.16.2
• VS Code version: 1.32

Problem

Using pug + typescript breaks syntax highlighting in vue files, when using a TS reserved name inside v-for.

Reproducible Case

<template lang="pug">
  ul
    //- syntax highlighting breaks within this line, until eof
    li(v-for="type in types") {{ type }}
</template>

<script lang="ts">
export default {
  data() {
    return { types: ['a', 'b'] };
  },
};
</script>

using v-for="(type) in types" avoids it.

[octref]

This is the same problem as using type in HTML interpolation.

The proper fix would be to strip TS-specific keyword constructs from https://github.com/Microsoft/TypeScript-TmLanguage for a JS grammar, but that would need to go into https://github.com/Microsoft/vscode/tree/master/extensions/javascript. I don't currently have time for it.

@Patcher56 You might be interested.

[backbone87]

i rather prefer no syntax highlighting for interpolations insteadof broken highlighting, and i guess i am not the only one. maybe add a setting to opt out of interpolation highlighting.

[p-kuen]

I also ran into this problem. I just used another keyword instead of ‚type‘ as it is a reserved keyword.

I also currently do not know how I would fix that. I can look if I could create a setting for deactivating highlighting for interpolations in pug.