如何在VS Code的TypeScript React(.tsx)代码中使用Region功能？

你遇到的报错绝大多数是因为region注释的书写位置不符合对应语法区域的注释规则，按以下两种场景使用即可：

• 非JSX逻辑区域使用（组件外、组件内return语句之前的TS/JS代码区）
  直接使用VS Code原生支持的//#region、//#endregion注释语法即可，不会触发语法报错：

  //#region 通用工具函数
  const getUserId = (userInfo: User) => userInfo.id;
  const formatUserRole = (role: number) => roleMap[role] ?? '普通用户';
  //#endregion
  const UserPage = () => {
    //#region 组件内部状态定义
    const [userList, setUserList] = useState<User[]>([]);
    const [loading, setLoading] = useState(false);
    //#endregion
    // 业务逻辑...
    return <>{/* JSX内容 */}</>
  }
  

• JSX渲染区域使用
  JSX语法内不支持直接写//开头的单行注释，必须将注释包裹在{/* */}中，region注释也需要遵守该规则：

  const UserPage = () => {
    return (
      <div className="page-container">
        {/* #region 顶部筛选栏 */}
        <div className="filter-bar">
          <input placeholder="搜索用户名" />
          <select>
            <option value="all">全部角色</option>
          </select>
        </div>
        {/* #endregion */}
        {/* #region 用户列表区 */}
        <div className="user-list">
          {userList.map(item => <UserCard key={item.id} info={item} />)}
        </div>
        {/* #endregion */}
      </div>
    )
  }
  

如果按上述写法仍有报错，可排查以下两点：

1. 检查ESLint配置：是否存在限制注释格式的规则，可针对性调整规则允许region格式的注释，无需额外禁用插件
2. 检查VS Code折叠配置：打开设置搜索foldingStrategy，确认值为auto，确保编辑器内置的折叠识别功能已开启

内容的提问来源于stack exchange，提问作者Praneet Rane