VS Code Extension

Integrate Gemini CLI directly into Visual Studio Code for a seamless AI-powered development experience.

Extension Overview

Key Features

  • Inline code assistance and suggestions
  • Code explanation and documentation
  • Automatic test generation
  • Code review and optimization
  • Integrated chat interface

Supported Languages

JavaScriptTypeScriptPythonJavaC++GoRustPHPRubyHTMLCSSSQL

Installation

Method 1: VS Code Marketplace

1. Open VS Code Extensions view:

Ctrl+Shift+X (Windows/Linux)

Cmd+Shift+X (macOS)

2. Search for "Gemini CLI"

3. Click "Install" on the official extension

Method 2: Command Line

code --install-extension google.gemini-cli

Method 3: Manual Installation

1. Download .vsix file from releases page

2. Install from VSIX:

code --install-extension gemini-cli.vsix

Configuration

1. Set up API key:

# Open VS Code Settings (Ctrl+,)

# Search for "Gemini CLI"

# Set "Gemini CLI: API Key" to your API key

2. Configure settings.json:

{ "geminiCli.apiKey": "your-api-key-here", "geminiCli.model": "gemini-pro", "geminiCli.temperature": 0.7, "geminiCli.maxTokens": 2048, "geminiCli.enableInlineCompletion": true, "geminiCli.enableCodeLens": true, "geminiCli.autoSuggest": true }

3. Verify installation:

# Open Command Palette (Ctrl+Shift+P)

# Type "Gemini: Test Connection"

Features and Usage

Code Assistance

Inline suggestions:

  • • Auto-complete function implementations
  • • Suggest variable names and types
  • • Generate boilerplate code
  • • Fix syntax errors automatically

Code Actions:

# Right-click on code → "Gemini: Explain Code"

# Right-click → "Gemini: Optimize Code"

# Right-click → "Gemini: Generate Tests"

Chat Interface

Open Chat Panel:

Ctrl+Shift+P → "Gemini: Open Chat"

# Or click Gemini icon in Activity Bar

Chat Features:

  • • Context-aware conversations about your code
  • • Ask questions about specific files or functions
  • • Get suggestions for debugging issues
  • • Request code improvements and refactoring

Code Lens Features

Function-level actions:

  • • "Explain" - Get detailed function explanations
  • • "Test" - Generate unit tests
  • • "Optimize" - Suggest performance improvements
  • • "Document" - Add JSDoc/docstring comments

Class-level actions:

  • • Generate constructor documentation
  • • Create interface definitions
  • • Suggest design pattern improvements
  • • Generate example usage

Keyboard Shortcuts

Default Shortcuts

Open ChatCtrl+Shift+G
Explain SelectionCtrl+Alt+E
Generate TestsCtrl+Alt+T
Optimize CodeCtrl+Alt+O

Custom Shortcuts

# File > Preferences > Keyboard Shortcuts

# Search "Gemini" to customize

Advanced Configuration

Workspace Settings

# .vscode/settings.json (project-specific)

{ "geminiCli.enabled": true, "geminiCli.model": "gemini-pro", "geminiCli.contextFiles": [ "src/**/*.ts", "docs/**/*.md" ], "geminiCli.excludePatterns": [ "node_modules/**", "dist/**", "*.test.js" ], "geminiCli.customPrompts": { "codeReview": "Review this code for bugs and improvements", "optimize": "Optimize this code for performance" } }

Language-Specific Settings

{ "[javascript]": { "geminiCli.enableInlineCompletion": true, "geminiCli.temperature": 0.3 }, "[python]": { "geminiCli.enableDocstring": true, "geminiCli.temperature": 0.5 }, "[typescript]": { "geminiCli.enableTypeGeneration": true, "geminiCli.strictMode": true } }

Custom Commands

# keybindings.json

[ { "key": "ctrl+alt+d", "command": "geminiCli.generateDocumentation", "when": "editorTextFocus" }, { "key": "ctrl+alt+r", "command": "geminiCli.refactorCode", "when": "editorHasSelection" } ]

Troubleshooting

Common Issues

Extension not loading

  • • Check VS Code version compatibility
  • • Reload window (Ctrl+Shift+P → "Reload Window")
  • • Check extension is enabled in Extensions view
  • • Restart VS Code completely

API connection errors

  • • Verify API key is correctly set
  • • Check internet connection
  • • Test API key with command line tool
  • • Check proxy settings if behind firewall

Performance issues

  • • Reduce context file patterns
  • • Disable auto-suggest for large files
  • • Increase timeout settings
  • • Close other resource-intensive extensions

Debug Mode

# Enable debug logging

"geminiCli.logLevel": "debug"

# View logs

# View > Output > Select "Gemini CLI" from dropdown

Tips and Best Practices

✅ Best Practices

  • • Use project-specific settings for different codebases
  • • Configure context files to include relevant documentation
  • • Set appropriate temperature values for different tasks
  • • Use custom prompts for repetitive tasks
  • • Regularly update the extension for new features

💡 Pro Tips

  • • Select specific code before using "Explain" for targeted help
  • • Use the chat for complex architectural questions
  • • Combine with Git integration for commit message generation
  • • Set up snippets for common Gemini prompts
  • • Use workspace settings for team consistency

Ready to Get Started?

Install the extension and enhance your development workflow: