Refactoring in VS Code destroys and/or falsifies .vue file!

[h-h-h-h]

This is a very serious bug! It may also change logic without the developer noticing.

I tried to write specific steps for reproduction and at first the bug was reproducible. But as I went, the bug disappeared and I couldn't understand why.

I had a file MyComposable.ts with code like this:

export type MyComposable { foo: number };
export function useMyComposable(): MyComposable { /*...*/ }

...and a file MyComponent.vue that used the composable:

<!--
bla
bla
bla
-->

<!--
foo
bar
-->

<script setup lang="ts">
import { useMyComposable } from "MyComponent.vue";

const myComposable = useMyComposable();

// [Code with `if`, `for` and comments referencing `myComposable.foo`.]
</script>

<template></template>

When I refactored foo from type MyComposable in MyComposable.ts by renaming it with F2, the spots in MyComponent.vue where the new name was inserted were wrong, they were shifted into different lines, between unrelated if and comment parts! When I removed the empty line in MyComponent.vue between --> and <!-- at the time the bug didn't yet disappear, the inserting spots were influenced (shifted differently). At some point, the problem also happened when I renamed myComposable from MyComponent.vue.

Then, I did some things like duplicating MyComposable.vue into a new file Foo.vue. In that file, a new bug happened where renaming didn't work at all and VS Code told me with a little bottom-right error pop-up: "Rename failed to apply edits". I don't exactly remember how it all took place exactly, but I also deleted Foo.vue in VS Code, closed VS Code, renamed MyComposable.vue to Foo.vue and reopened VS Code. Then, VS Code told me with a bottom-right warning pop-up: "The 2 extension(s) below, in workspace recommendations have issues: johnsoncodehk.volar (not found in marketplace) johnsoncodehk.vscode-typescript-vue-plugin (not found in marketplace)". The still opened tab of MyComposable.vue didn't show code in my monospace font, but a little message in a proportional sans-serif font; I think it said that the file didn't exist anymore. When I opened Foo.vue, renaming also always failed with the message: "Rename failed to apply edits".

Then, the bug disappeared and the warning pop-up is now shown on every start of VS Code. The bug also wasn't reproducible anymore when going back in the bug test repository to earlier commits where the bug previously happened, also not after a fresh VS Code start with the earlier commit.

A third bug that happened some time in between the previously described actions was that I began to first mention the composable function useMyComposable(), clicked the light bulb icon and chose to add an import for it; but the import was added in an XML comment (between <!-- and -->). I could do this multiple times and every time an additional import line was added in the comment.

[yoyo837]

I keep getting this prompt but don't know why.

The 2 extension(s) below, in workspace recommendations have issues: johnsoncodehk.volar (not found in marketplace) johnsoncodehk.vscode-typescript-vue-plugin (not found in marketplace)

[yaegassy]

@yoyo837 Please check here.

• Please become a verified publisher #1124
• afd4f4b#commitcomment-72663442.

[yoyo837]

It may be related to the plugin Sync feature of vscode.
vscode is trying to install plugin with old name.

[Doeke]

Also keep getting johnsoncodehk.volar (not found in marketplace)

[yoyo837]

See #1273 (comment).

I fixed it. If the Sync feature of vscode is enable, please reinstall these two plugins and manually sync it once.

[suhayebh]

Sync feature of vscode

could you elaborate, not sure what steps to take

[yoyo837]

I mean https://code.visualstudio.com/docs/editor/settings-sync.

1. Uninstall these two plugins;
2. Make sure the synchronization succeeds once;
3. Reinstall these two plugins;

[YoRolling]

I keep getting this prompt but don't know why.

The 2 extension(s) below, in workspace recommendations have issues: johnsoncodehk.volar (not found in marketplace) johnsoncodehk.vscode-typescript-vue-plugin (not found in marketplace)

Check extensions.json in `${PROJECT_ROOT}/.vscode'. I got same warning, finally I found in there, delete them and waning went away.

[h-h-h-h]

Off topic:

@YoRolling's solution worked for me to get rid of the warning pop-up, because the problem was workspace-related. The other solutions didn't work.

On topic:

Perhaps related: While renaming a .ts file itself, I clicked the "Show Preview" button in the message box that appeared. When clicking one of the change lines with checkboxes, no matter whether for a .ts or a .vue file, the following was shown in the refactor-preview tab:

After clicking the "Discard" button (instead of "Apply"), irritatingly I got another message box:

Update imports for '[...].ts'?

[No] [Yes] [Always automatically update imports] [Never automatically update imports]