feat(dx): streamline extension installation and documentation (#4284)

README.md

@@ -138,21 +138,53 @@ pnpm install
 
 3. **Run the extension**:
 
-Press `F5` (or **Run** → **Start Debugging**) in VSCode to open a new window with Roo Code running.
+There are several ways to run the Roo Code extension:
 
-Changes to the webview will appear immediately. Changes to the core extension will require a restart of the extension host.
+### Development Mode (F5)
 
-Alternatively you can build a .vsix and install it directly in VSCode:
+For active development, use VSCode's built-in debugging:
+
+Press `F5` (or go to **Run** → **Start Debugging**) in VSCode. This will open a new VSCode window with the Roo Code extension running.
+
+- Changes to the webview will appear immediately.
+- Changes to the core extension will also hot reload automatically.
+
+### Automated VSIX Installation
+
+To build and install the extension as a VSIX package directly into VSCode:
 
 ```sh
-pnpm vsix
+pnpm install:vsix [-y] [--editor=<command>]
 ```
 
-A `.vsix` file will appear in the `bin/` directory which can be installed with:
+This command will:
 
-```sh
-code --install-extension bin/roo-cline-<version>.vsix
-```
+- Ask which editor command to use (code/cursor/code-insiders) - defaults to 'code'
+- Uninstall any existing version of the extension.
+- Build the latest VSIX package.
+- Install the newly built VSIX.
+- Prompt you to restart VS Code for changes to take effect.
+
+Options:
+
+- `-y`: Skip all confirmation prompts and use defaults
+- `--editor=<command>`: Specify the editor command (e.g., `--editor=cursor` or `--editor=code-insiders`)
+
+### Manual VSIX Installation
+
+If you prefer to install the VSIX package manually:
+
+1.  First, build the VSIX package:
+    ```sh
+    pnpm vsix
+    ```
+2.  A `.vsix` file will be generated in the `bin/` directory (e.g., `bin/roo-cline-<version>.vsix`).
+3.  Install it manually using the VSCode CLI:
+    ```sh
+    code --install-extension bin/roo-cline-<version>.vsix
+    ```
+
+---
 
 We use [changesets](https://github.com/changesets/changesets) for versioning and publishing. Check our `CHANGELOG.md` for release notes.
 

package.json

@@ -19,6 +19,7 @@
 		"vsix": "turbo vsix --log-order grouped --output-logs new-only",
 		"vsix:nightly": "turbo vsix:nightly --log-order grouped --output-logs new-only",
 		"clean": "turbo clean --log-order grouped --output-logs new-only && rimraf dist out bin .vite-port .turbo",
+		"install:vsix": "pnpm install --frozen-lockfile && pnpm clean && pnpm vsix && node scripts/install-vsix.js",
 		"changeset:version": "cp CHANGELOG.md src/CHANGELOG.md && changeset version && cp -vf src/CHANGELOG.md .",
 		"knip": "knip --include files",
 		"update-contributors": "node scripts/update-contributors.js",

scripts/install-vsix.js

@@ -0,0 +1,91 @@
+const { execSync } = require("child_process")
+const fs = require("fs")
+const readline = require("readline")
+
+// detect "yes" flags
+const autoYes = process.argv.includes("-y")
+
+// detect editor command from args or default to "code"
+const editorArg = process.argv.find((arg) => arg.startsWith("--editor="))
+const defaultEditor = editorArg ? editorArg.split("=")[1] : "code"
+
+const rl = readline.createInterface({
+	input: process.stdin,
+	output: process.stdout,
+})
+
+const askQuestion = (question) => {
+	return new Promise((resolve) => {
+		rl.question(question, (answer) => {
+			resolve(answer)
+		})
+	})
+}
+
+async function main() {
+	try {
+		const packageJson = JSON.parse(fs.readFileSync("./src/package.json", "utf-8"))
+		const name = packageJson.name
+		const version = packageJson.version
+		const vsixFileName = `./bin/${name}-${version}.vsix`
+		const publisher = packageJson.publisher
+		const extensionId = `${publisher}.${name}`
+
+		console.log("\n🚀 Roo Code VSIX Installer")
+		console.log("========================")
+		console.log("\nThis script will:")
+		console.log("1. Uninstall any existing version of the Roo Code extension")
+		console.log("2. Install the newly built VSIX package")
+		console.log(`\nExtension: ${extensionId}`)
+		console.log(`VSIX file: ${vsixFileName}`)
+
+		// Ask for editor command if not provided
+		let editorCommand = defaultEditor
+		if (!editorArg && !autoYes) {
+			const editorAnswer = await askQuestion(
+				"\nWhich editor command to use? (code/cursor/code-insiders) [default: code]: ",
+			)
+			if (editorAnswer.trim()) {
+				editorCommand = editorAnswer.trim()
+			}
+		}
+
+		// skip prompt if auto-yes
+		const answer = autoYes ? "y" : await askQuestion("\nDo you wish to continue? (y/n): ")
+
+		if (answer.toLowerCase() !== "y") {
+			console.log("Installation cancelled.")
+			rl.close()
+			process.exit(0)
+		}
+
+		console.log(`\nProceeding with installation using '${editorCommand}' command...`)
+
+		try {
+			execSync(`${editorCommand} --uninstall-extension ${extensionId}`, { stdio: "inherit" })
+		} catch (e) {
+			console.log("Extension not installed, skipping uninstall step")
+		}
+
+		if (!fs.existsSync(vsixFileName)) {
+			console.error(`\n❌ VSIX file not found: ${vsixFileName}`)
+			console.error("Make sure the build completed successfully")
+			rl.close()
+			process.exit(1)
+		}
+
+		execSync(`${editorCommand} --install-extension ${vsixFileName}`, { stdio: "inherit" })
+
+		console.log(`\n✅ Successfully installed extension from ${vsixFileName}`)
+		console.log("\n⚠️  IMPORTANT: You need to restart VS Code for the changes to take effect.")
+		console.log("   Please close and reopen VS Code to use the updated extension.\n")
+
+		rl.close()
+	} catch (error) {
+		console.error("\n❌ Failed to install extension:", error.message)
+		rl.close()
+		process.exit(1)
+	}
+}
+
+main()