Auto closing brackets in visual-studio-code not working for Vue files

Question

I have a problem with brackets not auto closing while typing in .vue files. I use visual-studio-code as my editor and i have auto closing brackets set to "always" in settings. HTML tags do self close, and the problem is only in .vue files, while typing in .js/.jsx files everything works normally, brackets and quotation marks auto close. Any ideas on how to fix this?

Answer 1

For the people that installed Github copilot extension!

Know that it does override settings! And it's a cause!

I never thought about auto closing brackets! It always worked! Till this time it just ceased to do!

You can check this here: https://github.com/microsoft/vscode/issues/127739

Even if you are setting

"editor.autoClosingBrackets": "always",

It will still not work!

This might be defined by an extension. Are you by any chance using copilot?

You can know why by this comment:

Copilot is defining these default language settings that can be overwritten only using language specific settings. They do that to workaround an issue in vscode tracked at #125663 . Once we ship our next stable release (sometime this week), they will be free to remove that workaround. Until then you can disable the extension if you are not in the preview program yet or you can define the language specific setting e.g.:

"[typescript]": { "editor.autoClosingBrackets": "languageDefined" }

A guy had it not work for js and typescript! And work out of the box for PHP!

I had copilot installed too!

You can just add:

"[typescript]": { "editor.autoClosingBrackets": "languageDefined" }
"[javascript]": { "editor.autoClosingBrackets": "languageDefined" }

to your settings!

Now it's working again!

You can also disable copilot extension! I didn't want to!

Know too that this copilot issue! Will no more be an issue soon enough! As mentionned in the comment above! You can think about updating it and vscode and check on the next update!

Answer 2

I just had the same issue, even after installing the Vetur extension. Reloading VS Code solved the problem.

Answer 3

I had the same issue I solved the issue by:

Going to settings.json and adding:

"editor.autoClosingBrackets": "always",
  "[javascript]": {
    "editor.autoClosingBrackets": "always"
 }

Note: But it does still not work globally, only the language specified.

(which is javascript here. You can specify/add any other languages.)

Answer 4

• If you install Vetur plugin in vs-code, reload the application. It solved my problem.