如何在VS Code中自定义#region折叠注释样式并避免误删

要给VS Code里的// #region折叠注释添加自定义样式，让折叠后的区域更显眼、降低误删风险，你可以通过自定义CSS或者专用扩展来实现，具体步骤如下：

方法一：使用自定义CSS（无需扩展） #

1. 创建自定义样式文件
   在本地新建一个CSS文件（比如命名为custom-region-styles.css），写入以下样式代码（可根据自己的喜好调整颜色、边框等属性）：

   /* 给折叠后的#region区域添加背景和左侧边框 */
   .monaco-editor .folded-region {
       background-color: rgba(100, 200, 255, 0.1);
       border-left: 3px solid #64c8ff;
       padding: 3px 10px;
       margin: 2px 0;
   }
   
   /* 高亮折叠后的#region文本 */
   .monaco-editor .folded-region span {
       color: #2196f3;
       font-weight: bold;
   }
   

2. 配置VS Code加载自定义CSS
   打开VS Code的设置界面（快捷键Ctrl+,或Cmd+,），搜索workbench.editor.customStylesheet，点击编辑 in settings.json，添加以下配置（替换成你自己的CSS文件绝对路径）：

   "workbench.editor.customStylesheet": "file:///Users/your-username/.vscode/custom-region-styles.css"
   

   Windows系统的路径格式示例："file:///C:/Users/your-username/.vscode/custom-region-styles.css"

3. 重启VS Code
   关闭并重新打开VS Code，自定义样式就会生效，折叠后的#region区域会有明显的视觉标识，减少误删概率。

方法二：使用扩展（更便捷） #

如果你不想手动配置CSS，可以使用Custom CSS and JS Loader扩展：

1. 在VS Code扩展市场搜索并安装该扩展。
2. 按照方法一的步骤创建自定义CSS文件。
3. 打开设置，搜索customCSS.uri，将其值设置为你的CSS文件绝对路径。
4. 按下Ctrl+Shift+P（或Cmd+Shift+P）打开命令面板，执行Reload Custom CSS and JS命令，重启VS Code后样式即可生效。

注意：如果VS Code提示"不支持自定义CSS"，需要在settings.json中添加"security.workbench.enableCustomCSS": true来启用该功能。

内容的提问来源于stack exchange，提问作者Leo Garsia