Codex: Extensão IDE do Codex

Última atualização: 2026-08-31

A extensão IDE do Codex permite usá-lo diretamente no seu ambiente de desenvolvimento familiar, sem trocar de janela.

📋 Pré-requisitos: Conhecimento básico de VS Code

1. O Que Você Vai Aprender

• IDEs suportadas
• Instalação e configuração
• Recursos core da IDE
• Diferenças em relação à versão CLI

2. IDEs Suportadas

3. Instalação

(1) Instalação no VS Code

1. Abra o VS Code
2. Clique no ícone de Extensions à esquerda (ou Ctrl+Shift+X)
3. Pesquise por "Codex"
4. Clique em Install
5. Faça login com sua conta ChatGPT

(2) Instalação no Cursor

1. Abra o Cursor
2. Pesquise por "Codex" no marketplace de extensões
3. Instale
4. Faça login com sua conta

4. Recursos Core da IDE

(1) Edição Inline

Selecione código → Clique com o botão direito → "Codex: Edit" → Digite instruções de modificação:

// Selecione este código
function formatDate(date) {
  return date.toISOString();
}

// Clique com o botão direito → Codex: Edit → "Add localization support, support Chinese date format"

// Após modificação do Codex
function formatDate(date: Date, locale: string = "zh-CN"): string {
  return new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);
}

(2) Geração de Código

Ctrl+Shift+P → "Codex: Generate" → Digitar descrição

▶ Exemplo 1: Alice Usa a Extensão IDE

// Alice pressiona Ctrl+Shift+P no VS Code
// Digita "Codex: Generate"
// Descrição: "Create a React Hook that manages pagination state, including page number, page size, and total count"

// O Codex gera:
import { useState, useCallback } from "react";

interface PaginationState {
  page: number;
  pageSize: number;
  total: number;
}

export function usePagination(initialPageSize: number = 20) {
  const [state, setState] = useState<PaginationState>({
    page: 1,
    pageSize: initialPageSize,
    total: 0,
  });

  const setPage = useCallback((page: number) => {
    setState((prev) => ({ ...prev, page }));
  }, []);

  const setTotal = useCallback((total: number) => {
    setState((prev) => ({ ...prev, total }));
  }, []);

  const totalPages = Math.ceil(state.total / state.pageSize);

  return { ...state, totalPages, setPage, setTotal };
}

(3) Revisão de Código

Selecione código → Clique com o botão direito → "Codex: Review"

(4) Explicação de Código

Selecione código → Clique com o botão direito → "Codex: Explain"

5. Atalhos de Teclado

6. Painel Sidebar

A extensão IDE do Codex fornece um painel sidebar similar à janela de conversa do App:

• Digitar descrições de tarefa
• Ver progresso de execução
• Revisar modificações
• Confirmar ou rejeitar operações

(1) Integração com o Editor

1. Digite "Fix type errors in the current file" na sidebar
2. O Codex automaticamente lê o arquivo aberto no editor
3. Exibe diff diretamente no editor
4. Clique em Apply para aceitar mudanças

7. Configuração

(1) Configurações do VS Code

{
  "codex.model": "gpt-5-codex",
  "codex.sandboxMode": "workspace-write",
  "codex.autoApply": false,
  "codex.contextFiles": ["AGENTS.md", "tsconfig.json"],
  "codex.excludePatterns": ["node_modules/", "dist/"]
}

(2) Contexto Automático

A extensão IDE automaticamente inclui o seguinte contexto:

8. Comparação IDE vs CLI

❓ Perguntas Frequentes

P: Posso usar a extensão IDE e o CLI simultaneamente? R: Sim, mas não recomendado no mesmo projeto pois pode causar conflitos de arquivos.

P: A extensão IDE suporta uso offline? R: Não, requer conexão com a API da OpenAI.

P: A IA integrada do Cursor conflita com a extensão Codex? R: Não, elas operam independentemente. O Cursor AI foca em completação de código, a extensão Codex foca em operações de Agent.

P: Como troco modelos na IDE? R: Modifique codex.model nas Configurações do VS Code, ou troque nas configurações do painel sidebar.

P: Onde defino a política de aprovação da extensão IDE? R: Defina codex.sandboxMode nas Configurações do VS Code, ou configure via config.toml global.

📖 Resumo

• Suporta VS Code, Cursor, Windsurf e outras IDEs
• Recursos core: edição inline, geração de código, revisão, explicação
• Aquisição automática de contexto: arquivos abertos, código selecionado, diagnósticos
• IDE foca na experiência de codificação, CLI foca em automação
• Atalhos de teclado aumentam significativamente a eficiência

📝 Exercícios

1. Básico (⭐): Instale a extensão Codex no VS Code, use edição inline para modificar código.
2. Intermediário (⭐⭐): Use a extensão IDE para revisão de código, registre problemas que o Codex encontra.
3. Avançado (⭐⭐⭐): Compare a extensão IDE e o CLI completando a mesma tarefa, escreva um relatório de comparação.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós