Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>GraphQL RegionsNew to Visual Studio Code? Get it now.
GraphQL Regions

GraphQL Regions

ArchLabs AI

|
4 installs
| (1) | Free
Add collapsible regions support to GraphQL files using #region comments
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

GraphQL Regions

A Visual Studio Code extension that adds collapsible region support to GraphQL files using #region comments.

Features

  • Collapsible Regions: Use #region and #endregion comments to create collapsible sections in your GraphQL files
  • Nested Regions: Support for nested regions
  • Optional Descriptions: Add descriptive text after #region to label your regions
  • Case-Insensitive: Region markers are case-insensitive by default (configurable)
  • GraphQL Syntax Folding: Automatic folding for GraphQL types, queries, and other structures

Usage

Add region markers to your GraphQL files:

#region User Queries
type Query {
  user(id: ID!): User
  users: [User!]!
}
#endregion

#region User Types
type User {
  id: ID!
  name: String!
  email: String!
  
  #region Relationships
  posts: [Post!]!
  comments: [Comment!]!
  #endregion
}
#endregion

Region Syntax

  • Start marker: #region [optional description]
  • End marker: #endregion
  • Region descriptions are optional but recommended for clarity

Commands

  • GraphQL: Collapse All Regions - Collapse all regions in the current file
  • GraphQL: Expand All Regions - Expand all regions in the current file

Access commands through:

  • Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  • Right-click context menu in GraphQL files

Extension Settings

This extension contributes the following settings:

  • graphqlRegions.caseSensitive: Make region matching case-sensitive (default: false)
  • graphqlRegions.defaultCollapsed: Collapse regions by default when opening files (default: false)

Installation

From Source

  1. Clone this repository
  2. Run npm install to install dependencies
  3. Run npm run compile to build the extension
  4. Press F5 in VS Code to run the extension in a new Extension Development Host window

From VSIX

  1. Build the extension: npm run compile
  2. Package the extension: npx vsce package
  3. Install the generated .vsix file in VS Code

Requirements

  • Visual Studio Code v1.74.0 or higher
  • GraphQL files with .graphql or .gql extensions

Known Issues

  • Region markers must be on their own line
  • Unclosed regions will not create folding ranges

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This extension is licensed under the MIT License.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft