Group Code for VS Code
This Visual Studio Code extension helps you navigate and organize your codebase based on functionality rather than just files. Using special comments to tag related code sections across multiple files and languages, it creates a unified view that makes it easier to understand and work with your project's different functional components.
Features
- Cross-File Code Organization: Group related code blocks from different file types under a common functionality
- Unified View: Access all related code sections through the dedicated Group Code Explorer
- Extensive Language Support: Works with 40+ programming languages including JavaScript, TypeScript, Python, C#, Java, Go, HTML, CSS, Ruby, PHP, Rust, and many more
- Quick Navigation: Jump between related code sections with a single click
- Automatic Scanning: Automatically detects code groups in your workspace
- Status Bar Integration: Quick access to code groups from the VS Code status bar
- External Folder Support: Scan code in folders outside your current workspace
- Inline Comment Detection: Find and group code with special patterns in inline comments
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Group Code"
- Click Install
Manual Installation
- Download the
groupcode-1.0.0.vsix
file included with this extension
- In VS Code, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
- Run "Extensions: Install from VSIX..." and select the downloaded file
Getting Started
After installing the extension, you'll see a new Group Code icon in your Activity Bar. The extension will automatically scan your workspace for code groups when you open a folder.
Usage
Creating Code Groups
Add special comments to your code following this pattern:
* GroupName: Description of functionality
The extension automatically recognizes different comment formats based on the file type:
JavaScript/TypeScript/C#/Java/C++
//* Authentication: User login process
function login(username, password) {
// Your code here
}
// Inline comments also work
const userData = getUserData(); // * UserData: Access user information
HTML/XML/SVG
<!-- * Authentication: Login form layout -->
<form class="login-form">
<!-- Your HTML here -->
</form>
<div class="user-panel"><!-- * UserPanel: User interaction area --></div>
CSS/SCSS/Less
/* * Authentication: Login form styling */
.login-form {
/* Your CSS here */
}
.avatar { border-radius: 50%; } /* * UserInterface: Profile picture styling */
Python/Ruby/Shell/YAML
# * Authentication: User authentication backend
def authenticate_user(username, password):
# Your Python code here
user_role = get_user_role(user_id) # * Authorization: User permission check
The extension detects code group patterns in inline comments, which allows you to:
- Add code groups to existing code: Tag important lines without restructuring your code
- Create more targeted groups: Mark specific lines rather than entire blocks
- Document as you code: Add functionality markers without breaking your flow
Example of inline comment detection:
// These will all be detected properly:
const apiKey = process.env.API_KEY; // * Security: API authentication
fetchUserData(userId); // * UserData: Fetch user information
updateUI(userData); // * UserInterface: Update display with user data
Viewing & Navigating Code Groups
Using the Explorer
Open the Group Code Explorer in one of these ways:
- Click on the Group Code icon in the Activity Bar
- Find "Group Code" in the Explorer view
- Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run "View: Show Group Code"
Expand a functionality group to see all related code sections
Click on any code section to navigate directly to that file and line
Using the Status Bar
- Click on the Group Code indicator in the status bar (or press
Ctrl+Shift+G
/ Cmd+Shift+G
)
- Select a functionality from the dropdown
- Choose which specific code section to navigate to
Available Commands
Access these commands through the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
- Group Code in Current File: Scan only the active file for code groups
- Group Code in Workspace: Scan all supported files in the workspace
- Scan External Project Folder: Scan code in a folder outside your workspace
- Show Code Groups: Display the quick picker to navigate between groups
- Refresh Code Groups: Perform a complete rescan of all files
Supported Languages
This extension supports code grouping for 40+ programming languages including:
JavaScript, TypeScript, HTML, CSS, Python, C#, Java, Go, PHP, Ruby, C/C++, Rust, Swift, Kotlin, Dart, Haskell, Lua, R, SQL, YAML, Markdown, Shell/Bash, PowerShell, and many more.
Each language uses its native comment syntax to define code groups.
Tips & Best Practices
- Consistent Naming: Use the same group name across different files
- Descriptive Groups: Choose meaningful group names that reflect functionality
- Hierarchical Organization: Consider using prefixes like "Auth:" for related groups
- Regular Refreshing: Use the "Refresh Code Groups" command after significant changes
- External Code: For monorepos or multi-project setups, use "Scan External Project Folder"
- Inline Comments: Use inline code group comments for pinpointing specific functionality without affecting surrounding code
- Mixed Approaches: Combine standalone comments for major blocks with inline comments for important individual lines
Troubleshooting
- If groups aren't appearing, try the "Refresh Code Groups" command
- Ensure comments follow the exact pattern:
* GroupName: Description
- For inline comments, make sure there's a space after the comment marker (e.g.,
// * Group
not //* Group
)
- Check the Output panel (View → Output → Group Code) for detailed logs
- For large workspaces, the initial scan may take a moment to complete
License
This project is licensed under the MIT License. See the LICENSE file for details.