Editor

Editor là IDE được tăng cường AI của Antigravity, được xây dựng dựa trên VS Code.

Tổng quan

Editor là nơi bạn viết code với sự hỗ trợ của AI:

• Tab - Super autocomplete
• Command - Natural language inline instructions
• Agent Side Panel - Chat với Agent

Giao diện Editor

┌─────────────────────────────────────────────────────────────┐
│  Menu Bar                                              ⚙️  │
├─────────────┬───────────────────────────────┬───────────────┤
│             │                               │               │
│   Explorer  │      Code Editor              │  Agent Panel  │
│             │                               │               │
│   Files     │   function hello() {          │  💬 Chat      │
│   ├─ src/   │     return "world";           │               │
│   ├─ lib/   │   }                           │  📋 Artifacts │
│   └─ ...    │                               │               │
│             │                               │  🔧 Tools     │
│             │                               │               │
├─────────────┴───────────────────────────────┴───────────────┤
│  Terminal / Output / Problems                               │
└─────────────────────────────────────────────────────────────┘

Tab (Autocomplete)

Tab là hệ thống autocomplete thông minh, vượt xa simple word completion.

Khả năng

• Multi-line suggestions - Gợi ý cả blocks of code
• Context-aware - Hiểu code xung quanh
• Semantic completion - Hiểu ý định, không chỉ syntax

Sử dụng

1. Bắt đầu gõ code
2. Tab suggestion xuất hiện (grey text)
3. Nhấn Tab để accept, Esc để dismiss

Ví dụ

// Bạn gõ:
function calculateTotalPrice(items

// Tab suggests:
function calculateTotalPrice(items: CartItem[]): number {
  return items.reduce((total, item) => total + item.price * item.quantity, 0);
}

Command

Command cho phép bạn viết instructions bằng natural language inline.

Sử dụng

1. Bắt đầu comment với // hoặc #
2. Viết instruction
3. Agent sẽ generate code theo instruction

Ví dụ

// Create a function that validates email format
// Agent generates:
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

Commands nâng cao

// Refactor this to use async/await
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

// Agent generates:
const response = await fetch(url);
const data = await response.json();
console.log(data);

Agent Side Panel

Panel bên phải để chat trực tiếp với Agent.

Features

• Chat interface - Conversation với Agent
• Context awareness - Agent biết file đang mở
• File references - Có thể reference files/selections
• Artifact viewer - Xem artifacts được tạo

Reference File

@filename.ts - Reference entire file
@selection - Reference selected code

Ví dụ Chat

You: "Explain this function to me"
     @src/utils/auth.ts:25-40

Agent: "This function validateToken() does:
1. Decodes the JWT token
2. Checks expiration date
3. Verifies signature
4. Returns user payload or throws error"

Keyboard Shortcuts

Shortcut	Action
Cmd+E / Ctrl+E	Toggle Editor ↔ Agent Manager
Cmd+P / Ctrl+P	Quick file open
Cmd+, / Ctrl+,	Open Settings
Cmd+Shift+P / Ctrl+Shift+P	Command Palette
Tab	Accept autocomplete
Esc	Dismiss autocomplete

Settings

Editor settings có thể customize:

AI Settings

• Tab autocomplete on/off
• Suggestion delay
• Max suggestion length

Editor Settings

• Theme (light/dark)
• Font size
• Tab size
• Auto-save

Agent Settings

• Default mode
• Review policies
• Notification preferences

Extensions

Editor hỗ trợ VS Code extensions:

• Language support
• Linters
• Formatters
• Themes

Best Practices

✅ Sử dụng Tab hiệu quả

• Đợi suggestion xuất hiện trước khi gõ tiếp
• Accept partial suggestions bằng Tab
• Dismiss bad suggestions bằng Esc và tiếp tục gõ

✅ Command rõ ràng

// ❌ Vague
// make this better

// ✅ Specific
// refactor to use early return pattern and handle null case

✅ Kết hợp với Agent Panel

• Dùng Tab/Command cho quick changes
• Dùng Agent Panel cho complex tasks
• Reference selections để provide context