Sachin Utilities

A VS Code extension that adds GitHub and Warp icons to the status bar, allowing you to quickly open the GitHub repository of your current project, open the workspace in Warp terminal, or open the workspace in OpenCode desktop app.

Features

GitHub Status Bar Icon: A GitHub icon appears in the status bar when a GitHub repository is detected.
Warp Status Bar Icon: A Warp terminal button appears in the status bar when a workspace folder is open.
Quick Access: Click the GitHub icon to open the repository in your default browser.
Open in Warp: Click the Warp button to open the current workspace folder directly in Warp terminal.
Open in OpenCode: Command to open the current workspace in OpenCode desktop app (path is copied to clipboard).
Automatic Detection: Automatically detects GitHub remotes from your Git configuration.
Smart URL Parsing: Supports various Git URL formats:
- SSH: git@github.com:user/repo.git
- HTTPS: https://github.com/user/repo.git
- Git protocol: git://github.com/user/repo.git
Configurable Buttons: You can enable or disable each status bar button via settings.

Configuration Settings

You can customize which buttons appear in the status bar by adding the following settings to your settings.json file:

{
  "sachinutils.showGitHub": true,
  "sachinutils.showOpenCode": false,
  "sachinutils.showTerminal": true,
  "sachinutils.showScratchpad": true
}

Setting	Description	Default
`sachinutils.showGitHub`	Show the 'Open GitHub' button in the status bar	`true`
`sachinutils.showOpenCode`	Show the 'Open OpenCode' button in the status bar	`false`
`sachinutils.showTerminal`	Show the 'Open Terminal' button in the status bar	`true`
`sachinutils.showScratchpad`	Show the 'Scratchpad' button in the status bar	`true`

To access your settings.json:

Windows/Linux: Go to File → Preferences → Settings → Open Settings (JSON)
macOS: Go to Code → Preferences → Settings → Open Settings (JSON)

How it works

The extension checks the git remote URLs in your current workspace folder. If a GitHub remote is found, the status bar icon appears. Clicking it opens the repository URL in your browser.

Requirements

VS Code version 1.80.0 or higher
A Git repository with a GitHub remote
Git installed on your system
Node.js (for development)

Extension Commands

sachin: Open GitHub Repository: Opens the GitHub repository of the current workspace (can also be triggered from the Command Palette).
sachin: Open Workspace in Warp Terminal: Opens the current workspace folder in Warp.
sachin: Open Workspace in OpenCode: Opens the current workspace in OpenCode desktop app and copies the path to clipboard.

Usage

For End Users

Install the Extension:
- Install "Sachin Utilities" from the VS Code Extensions Marketplace, or manually install the .vsix file.
Open a GitHub Repository:
- Open a folder in VS Code that contains a Git repository with a GitHub remote.
- You'll see a GitHub icon ($(github)) in the status bar.
- Click the icon to open the repository in your default browser.
Open Workspace in Warp:
- Open any folder in VS Code.
- You'll see a Warp button ($(terminal-bash) Open Warp) in the status bar.
- Click it to launch Warp directly in that workspace path.
Using the Command Palette:
- Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
- Search for "sachin: Open GitHub Repository", "sachin: Open Workspace in Warp Terminal", or "sachin: Open Workspace in OpenCode"
- Press Enter to execute the command
Open Workspace in OpenCode:
- Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
- Search for "sachin: Open Workspace in OpenCode"
- The workspace path will be copied to clipboard and OpenCode will be launched

Supported Git Remote Formats

The extension automatically detects and parses the following GitHub remote URL formats:

SSH: git@github.com:username/repo.git
HTTPS: https://github.com/username/repo.git
Git Protocol: git://github.com/username/repo.git
With or without .git suffix

Development

This extension is built with TypeScript and uses VS Code's built-in Git extension API (vscode.git) to inspect remotes and branches.

Prerequisites

Node.js (v18 or higher)
Bun (recommended package manager) or npm
VS Code (for extension development)
Git (for version control)

Setup

Clone the Repository:

git clone https://github.com/sachinthapa572/Vscode-Extension.git
cd Vscode-Extension

Install Dependencies:

# Using bun (recommended)
bun install

# Or using npm
npm install

Build

Development Build (Watch Mode)

Start the development build with automatic recompilation on file changes:

# Using bun
bun run watch

# Or using npm
npm run watch

This will continuously compile TypeScript files to JavaScript and output them to the out/ directory.

Production Build

Compile TypeScript to JavaScript once:

# Using bun
bun run compile

# Or using npm
npm run compile

The compiled output will be in the out/ directory.

Pre-publish Build

Before publishing the extension, run:

# Using bun
bun run vscode:prepublish

# Or using npm
npm run vscode:prepublish

Running the Extension

Open in VS Code:
```
code .
```
Start the Watch Task (if not already running):
- Press Ctrl+Shift+B (or Cmd+Shift+B on macOS)
- Select the "watch" task
Launch the Extension:
- Press F5 to open a new VS Code window with the extension loaded
- Or go to Run → Start Debugging from the menu
Test the Extension:
- Open a folder containing a Git repository with a GitHub remote
- You should see the GitHub icon in the status bar
- Click it to test the functionality

Linting

Review and check code quality:

# Using bun
bun run lint

# Or using npm
npm run lint

Fix linting issues (ESLint will auto-fix many):

# Using bun
bun run lint -- --fix

# Or using npm
npm run lint -- --fix

Build Output Structure

├── out/
│   ├── extension.js          # Compiled extension entry point
│   ├── extension.js.map      # Source map for debugging
│   └── test/                 # Compiled test files
├── src/
│   └── extension.ts          # TypeScript source code
└── package.json              # Extension configuration

Project Structure

Vscode-Extension/
├── src/
│   ├── extension.ts          # Main extension code
│   ├── gitOpener.ts          # GitHub repository detection logic
│   ├── warpOpener.ts         # Warp terminal integration
│   ├── opencodeOpener.ts     # OpenCode desktop app integration
│   └── errors.ts             # Error handling utilities
├── package.json              # Extension metadata and scripts
├── tsconfig.json             # TypeScript configuration
├── README.md                 # Documentation
└── LICENSE                   # License file

Key Files

src/extension.ts: Main extension code that handles activation, status bar creation, and GitHub URL opening
src/gitOpener.ts: Logic for detecting GitHub repositories and parsing Git URLs
src/warpOpener.ts: Logic for opening workspace in Warp terminal
src/opencodeOpener.ts: Logic for opening workspace in OpenCode desktop app
src/errors.ts: Error handling and display utilities
package.json: Contains extension metadata, dependencies, and build scripts
tsconfig.json: TypeScript compiler configuration

Dependencies

Runtime dependencies: None (uses only VS Code APIs, including the built-in Git extension)
@types/vscode (^1.80.0): VS Code API type definitions

Dev Dependencies

TypeScript (^5.3.2): Language and compiler
ESLint (^8.45.0): Code linting
@typescript-eslint/parser (^6.4.0): TypeScript parser for ESLint
@typescript-eslint/eslint-plugin (^6.4.0): ESLint rules for TypeScript

Troubleshooting

GitHub Icon Not Showing

Ensure the folder you have open is a Git repository
Verify the repository has a GitHub remote configured
Check that the remote URL is accessible and contains "github.com"

Run this command to verify your Git remotes:

git remote -v

Extension Won't Activate

Ensure you're using VS Code version 1.80.0 or higher
Try reloading VS Code (Ctrl+R or Cmd+R)
Check the Extension Output for error messages (Help → Toggle Developer Tools)

Build Errors

Ensure all dependencies are installed: bun install or npm install
Delete the node_modules directory and reinstall: rm -rf node_modules && bun install
Make sure TypeScript is installed: bun add -d typescript

Packaging and Distribution

Create a VSIX Package

To create a distributable .vsix file:

Install vsce (VS Code Extension CLI):

bun add -g @vscode/vsce
# or
npm install -g @vscode/vsce

Package the extension:
```
vsce package
```

The .vsix file will be created in the project root and can be distributed or published to the VS Code Marketplace.

Publish to VS Code Marketplace

To publish the extension to the official VS Code Marketplace:

Create an account on Visual Studio Code Marketplace
Get a Personal Access Token (PAT)
Configure vsce:
```
vsce create-publisher <publisher-name>
```
Publish:
```
vsce publish
```

Contributing

When contributing to this extension:

Fork the repository
Create a feature branch
Make your changes
Run linting: bun run lint
Commit with descriptive messages
Push and create a Pull Request

License

Please see the LICENSE file for details.

Sachin Utilities

Sachin Thapa

Sachin Utilities

Features

Configuration Settings

How it works

Requirements

Extension Commands

Usage

For End Users

Supported Git Remote Formats

Development

Prerequisites

Setup

Build

Development Build (Watch Mode)

Production Build

Pre-publish Build

Running the Extension

Linting

Build Output Structure

Project Structure

Key Files

Dependencies

Dev Dependencies

Troubleshooting

GitHub Icon Not Showing

Extension Won't Activate

Build Errors

Packaging and Distribution

Create a VSIX Package

Publish to VS Code Marketplace

Contributing

License