ctrlshiftleft
Version:
AI-powered toolkit for embedding QA and security testing into development workflows
161 lines (106 loc) • 6.03 kB
Markdown
# ctrl.shift.left VS Code Extension
Embed QA and security testing directly into your development workflow with AI-enhanced capabilities. This VS Code extension provides seamless access to the ctrl.shift.left toolkit, helping developers find and fix security issues, generate tests, and create QA checklists early in the development process.

## Features
### 1. Security Analysis
Automatically detect security vulnerabilities in your code with a single click. The extension analyzes your current file for security issues and provides a detailed report with remediation suggestions.
- **Standard Analysis**:
- **Command**: `Ctrl+Shift+Left: Analyze Current File`
- **Access**: Right-click in editor or Command Palette (Ctrl+Shift+P)
- **AI-Enhanced Analysis**:
- **Command**: `Ctrl+Shift+Left: AI-Enhanced Security Analysis`
- **Access**: Right-click in editor or Command Palette (Ctrl+Shift+P)
- **Requires**: OpenAI API key (set in settings or via environment variable)
### 2. Test Generation
Automatically generate comprehensive Playwright end-to-end tests for your components with just one click. The extension creates tests that cover functionality, validation, security, and accessibility.
- **Command**: `Ctrl+Shift+Left: Generate Tests`
- **Access**: Right-click in editor or Command Palette (Ctrl+Shift+P)
### 3. QA & Security Checklists
Create comprehensive QA and security checklists for your components directly from VS Code. These checklists help ensure your code meets quality and security standards.
- **Command**: `Ctrl+Shift+Left: Generate QA & Security Checklist`
- **Access**: Right-click in editor or Command Palette (Ctrl+Shift+P)
### 4. Full Security & QA Scan
Run a comprehensive scan that combines security analysis, test generation, and checklist creation in one go. This is perfect for ensuring your components are secure and ready for review.
- **Standard Full Scan**:
- **Command**: `Ctrl+Shift+Left: Full Security & QA Scan`
- **Access**: Right-click in editor or Command Palette (Ctrl+Shift+P)
- **AI-Enhanced Full Scan**:
- **Command**: `Ctrl+Shift+Left: AI-Enhanced Full Scan`
- **Access**: Right-click in editor or Command Palette (Ctrl+Shift+P)
- **Requires**: OpenAI API key (set in settings or via environment variable)
### 5. Project Overview Dashboard
Generate a beautiful HTML dashboard showing the security and quality status of your entire project. The dashboard highlights critical issues, test coverage, and overall quality metrics.
- **Command**: `Ctrl+Shift+Left: Generate Project Overview`
- **Access**: Command Palette (Ctrl+Shift+P)
## Installation
### From VSIX
1. Download the `.vsix` file from the Releases section
2. In VS Code, go to Extensions view (Ctrl+Shift+X)
3. Click the `...` menu in the top-right of the Extensions view
4. Select "Install from VSIX..." and choose the downloaded file
### Development Setup
1. Clone the repository
```bash
git clone https://github.com/ctrlshiftleft/vscode-extension.git
cd vscode-extension
```
2. Make sure VS Code and Node.js are installed
3. Open the project in VS Code
```bash
code .
```
4. Press F5 to launch a new VS Code window with the extension loaded
## Requirements
- VS Code version 1.60.0 or higher
- Node.js 14.x or higher
- OpenAI API key (for AI-enhanced features)
## AI-Enhanced Features
The ctrl.shift.left extension leverages AI to provide deeper security analysis and more comprehensive test generation. When configured with a valid OpenAI API key, the extension can:
1. **Detect complex vulnerabilities** that pattern-based scanning might miss
2. **Provide detailed remediation guidance** with code examples
3. **Identify potential edge cases** in security logic
4. **Prioritize issues** based on risk and exploitability
5. **Generate more comprehensive tests** with better edge case coverage
### Setting Up AI Features
1. Obtain an OpenAI API key from [https://platform.openai.com/](https://platform.openai.com/)
2. Configure the key in VS Code settings:
- Set `ctrlshiftleft.openAIApiKey` to your API key
- Or set the `OPENAI_API_KEY` environment variable
3. Enable AI features by setting `ctrlshiftleft.useAI` to `true`
4. Optionally select your preferred OpenAI model via `ctrlshiftleft.openAIModel` (for CLI tools)
## Extension Settings
This extension contributes the following settings:
- `ctrlshiftleft.autoAnalyze`: Enable/disable automatic security analysis on file save
- `ctrlshiftleft.autoFixSecurityIssues`: Enable/disable automatic fix suggestions for security issues
- `ctrlshiftleft.useAI`: Use AI-enhanced security analysis when available
- `ctrlshiftleft.openAIApiKey`: OpenAI API key for AI-enhanced security analysis
- `ctrlshiftleft.openAIModel`: OpenAI model to use for AI-enhanced security analysis (`gpt-4` or `gpt-3.5-turbo`)
## Usage Examples
### Analyzing a Single File
1. Open a JavaScript/TypeScript file in VS Code
2. Right-click in the editor
3. Select "Ctrl+Shift+Left: Analyze Current File"
4. Review the security report that appears
### Generating Tests for a Component
1. Open a React component file in VS Code
2. Right-click in the editor
3. Select "Ctrl+Shift+Left: Generate Tests"
4. Review the generated tests that open in a new editor tab
### Creating a Project Overview Dashboard
1. Press Ctrl+Shift+P to open the Command Palette
2. Type "Ctrl+Shift+Left: Generate Project Overview"
3. The dashboard will be generated and opened in your default browser
## Known Issues
- The extension requires the ctrl.shift.left CLI tools to be installed in the parent directory
- Automatic fix suggestions for security issues is still in beta
## Release Notes
### 0.2.0
- Added project overview dashboard
- Improved security analysis with better remediation suggestions
- Added context menu integration for easier access
- Fixed issues with test generation
### 0.1.0
- Initial release
- Basic security analysis and test generation
## License
MIT