vscode编写vue代码的时候一聚焦就代码块变白？怎么回事如何解决

起因

今天打开vscode编写vue代码的时候 发现我的vscode出现了一个小问题，就是我在 template、script、style里面编写代码的时候，我的vscode会将这些结构体全部变成透明色，这样非常的麻烦也不利于我查看编写的代码，这样写起来也非常的难受

解决方法

原因是编辑器默认的折叠策略或 Vue 插件的配置导致<template>、<script>等块被自动折叠。可以通过以下步骤解决：

1. 调整 VSCode 全局折叠设置

打开设置（快捷键 Ctrl+,），搜索并修改以下配置：

• 关闭自动折叠总开关：将 Editor: Folding 取消勾选（或在settings.json中添加 "editor.folding": false）。
• 或修改折叠策略：将 Editor: Folding Strategy 设为 manual（仅允许手动折叠）。

2. 针对 Vue 文件的插件配置

如果使用 Volar （Vue3 官方插件）或 Vetur，需调整插件的折叠配置：

• Vetur ：在设置中搜索 vue.enableFolding，将其设为 false。
• Volar ：确保 editor.foldingStrategy 设为 auto，同时避免其他插件（如旧版 Vetur）冲突。

3. 临时展开所有代码

若需快速恢复当前文件的显示，可使用快捷键：

• 展开所有代码：Ctrl+K Ctrl+0（Windows/Linux）或 Cmd+K Cmd+0（Mac）。

修改后，Vue 文件的<template>、<script>、<style>块就不会在聚焦时自动折叠了。