uni-app 希望有 #region 这是一段代码区块用于折叠

uni-app 希望有 #region 这是一段代码区块用于折叠

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：iOS

手机系统版本号：iOS 12.2

手机厂商：苹果

手机机型：IOS6

页面类型：vue

打包方式：云端

示例代码：

#region 下面是Bootstrap.min.css 5.0版本css  

/*Bootstrap.min.css 5.0版本 */  
@import "./common/boots5/bootstrap.min.css";  

#endregion  

#region 下面是每个页面公共css  

/*每个页面公共css */  
@import "./common/free.css";  
@import "./common/common.css";  
/* #ifndef APP-PLUS-NVUE */  
@import "./common/free-icon.css";  
/* #endif */  
/* #ifdef MP */  
::-webkit-scrollbar{  
    display: none;  
}  
/* #endif */  

#endregion

操作步骤：

#region 下面是Bootstrap.min.css 5.0版本css  

/*Bootstrap.min.css 5.0版本 */  
@import "./common/boots5/bootstrap.min.css";  

#endregion

预期结果：

#region 下面是Bootstrap.min.css 5.0版本css  

/*Bootstrap.min.css 5.0版本 */  
@import "./common/boots5/bootstrap.min.css";  

#endregion

实际结果：

#region 下面是Bootstrap.min.css 5.0版本css  

/*Bootstrap.min.css 5.0版本 */  
@import "./common/boots5/bootstrap.min.css";  

#endregion

bug描述：

希望HBuilder X有 #region 这是一段代码区块用于折叠 代码的管理功能，要不然我们看代码太乱了，没有好的思路，不方便开发


更多关于uni-app 希望有 #region 这是一段代码区块用于折叠的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 希望有 #region 这是一段代码区块用于折叠的实战教程也可以访问 https://www.itying.com/category-93-b0.html


目前 HBuilderX 本身并不原生支持 #region 这类代码折叠指令。你提供的示例代码中，#region 和 #endregion 在 HBuilderX 的 CSS 或 Vue 文件中会被视为普通注释，不会触发代码折叠功能。

要实现代码区块的折叠管理，可以尝试以下方法：

  1. 使用编辑器的内置折叠： HBuilderX 支持基于语法结构的自动折叠。对于 CSS 代码，你可以通过点击编辑器左侧行号旁的折叠箭头（通常出现在规则块、注释块的开头），来折叠对应的 CSS 规则或多行注释。这不需要特殊语法，是编辑器自带的通用功能。

  2. 利用条件编译注释： 你示例中已经使用了 /* #ifdef */ 和 /* #endif */ 这类条件编译注释。HBuilderX 能够识别这些特殊注释，并将其中的代码块作为一个可折叠的区域。你可以考虑将希望分组管理的代码包裹在条件编译注释中（即使不真正用于条件编译），来获得折叠能力。例如：

    /* #ifdef REGION_BOOTSTRAP */
/* Bootstrap.min.css 5.0版本 */
@import "./common/boots5/bootstrap.min.css";
/* #endif */

/* #ifdef REGION_COMMON_CSS */
/* 每个页面公共css */
@import "./common/free.css";
@import "./common/common.css";
/* #ifndef APP-PLUS-NVUE */
@import "./common/free-icon.css";
/* #endif */
/* #ifdef MP */
::-webkit-scrollbar{
    display: none;
}
/* #endif */
/* #endif */
回到顶部