ctrlshiftleft/vscode-ext-test/QUICKSTART.md

AI-powered toolkit for embedding QA and security testing into development workflows

# ctrl.shift.left VS Code Extension - Quick Start Guide

This guide will help you get started using the ctrl.shift.left VS Code extension to embed security and QA testing directly into your development workflow.

## Installation

1. **Install the Extension**
   - Open VS Code
   - Go to Extensions (Ctrl+Shift+X)
   - Use "Install from VSIX" option in the ... menu
   - Select the extension VSIX file

2. **Verify Installation**
   - You should see a shield icon in the status bar
   - The status bar should show "CSL: Ready"

## Security Analysis

### Analyze Current File

1. Open a JavaScript/TypeScript file (e.g., `PaymentForm.tsx`)
2. Right-click in the editor
3. Select "Ctrl+Shift+Left: Analyze Current File"
4. View the security report that appears in a Markdown preview
5. Address any critical or high-severity issues identified

```tsx
// Example of a security issue that would be detected:
const userInput = req.body.username;
document.innerHTML = userInput; // XSS vulnerability detected
```

### Viewing Security Issues

- Critical/High issues will be highlighted in red
- Medium issues will be highlighted in orange
- Each issue includes a description and remediation steps

## Test Generation

### Generate Tests for a Component

1. Open a component file (e.g., `PaymentForm.tsx`)
2. Right-click in the editor
3. Select "Ctrl+Shift+Left: Generate Tests"
4. A new editor tab will open with the generated tests
5. Review and customize the tests as needed

```typescript
// Example of generated test:
test('should validate form inputs', async ({ page }) => {
  await page.goto(`${baseUrl}`);
  
  // Try to submit form without required fields
  const submitButton = page.locator('button[type="submit"]');
  await submitButton.click();
  
  // Expect validation error messages to be visible
  const errorMessage = page.locator('.error-message');
  await expect(errorMessage).toBeVisible();
});
```

## QA Checklist Generation

### Create a QA & Security Checklist

1. Open a component file
2. Right-click in the editor
3. Select "Ctrl+Shift+Left: Generate QA & Security Checklist"
4. A Markdown preview will open with the checklist
5. Use the checklist during code review and before merging

```markdown
# QA & Security Checklist for PaymentForm

## Security
- [✅] Input sanitization implemented
- [❌] Secure storage of sensitive data
- [⚠️] CSRF protection needs review
```

## Full Scan

### Complete Security & QA Scan

1. Open a component file
2. Right-click in the editor
3. Select "Ctrl+Shift+Left: Full Security & QA Scan"
4. This will run all three tools in sequence
5. Review all reports for a comprehensive security and quality assessment

## Project Overview Dashboard

### Generate a Project Dashboard

1. Press Ctrl+Shift+P to open the Command Palette
2. Type "Ctrl+Shift+Left: Generate Project Overview"
3. Wait for the dashboard to generate
4. The dashboard will open in your default browser
5. Use the dashboard to identify critical issues across your project

## Tips for Shifting Left

- Run security analysis as you code, not just at the end
- Generate tests before implementing features (TDD approach)
- Review QA checklists before submitting PRs
- Generate a project overview weekly to track progress
- Address critical security issues immediately

## Keyboard Shortcuts (Recommended Setup)

Add these to your VS Code keybindings.json:

```json
[
  {
    "key": "ctrl+shift+a",
    "command": "ctrlshiftleft.analyzeCurrentFile"
  },
  {
    "key": "ctrl+shift+t",
    "command": "ctrlshiftleft.generateTests"
  },
  {
    "key": "ctrl+shift+q",
    "command": "ctrlshiftleft.generateChecklist"
  },
  {
    "key": "ctrl+shift+s",
    "command": "ctrlshiftleft.fullScan"
  }
]
```

## Need Help?

- Check the full documentation in the README
- Visit the ctrl.shift.left website
- Submit issues on GitHub