From VS Code to Cursor: A Full Journey with AI-Powered Code Editors

前言 / Introduction

碩班期間，由於 OpenAI 掀起了一股 AI Agent 狂熱，而程式撰寫也跟上了這股熱浪。因緣際會之下，參與了 GitHub Student Developer Pack，導入了 Github Copilot 到日常使用，透過他在背後助補全程式碼。
After getting access to GitHub Copilot through the GitHub Student Developer Pack during school, I was impressed by how it assisted with code completion in daily work.

進公司後，團隊開始導入 Cursor 這套基於 VS Code 的 AI IDE，也讓我有機會體驗不同工具帶來的差異與便利。
At work, our team started promoting Cursor, an AI IDE built on top of VS Code’s open source version. This gave me a great opportunity to experience the differences and benefits of both tools.

差異 / Key Differences

在 2023 年，微軟推出的 GitHub Copilot 以其強大的程式碼補全功能震撼了開發者社群。
In 2023, Microsoft’s GitHub Copilot revolutionized the developer community with its powerful code completion capabilities.

這個 AI 模型是透過大量 GitHub 上的公開專案訓練而成，因此它的強項在於程式語意的理解與補全能力。當你寫程式時，它能根據上下文，自動完成函數、邏輯甚至是註解。
Trained on thousands of repositories from GitHub, the model is focused on understanding code semantics. It can automatically write code based on the context in your working space.

然而，AI 並未停下腳步。到了 2025 年，越來越多公司投入 AI 開發工具，而 Cursor 就是其中之一。它是一款以對話為核心的 AI IDE，能一邊與你聊天，一邊自動修改或產出程式碼。
But AI hasn’t stopped evolving. By 2025, many companies have launched their own AI tools. Cursor is one of them—an AI IDE built for direct interaction. It can chat with you while writing or refactoring code.

以下是 GitHub Copilot 與 Cursor 之間的簡要差異：
Here’s a brief comparison between GitHub Copilot and Cursor:

工作流程比較 / Workflow Comparison

使用場景示意 / Usage Scenarios

工具特色圖解 / Tool Features

使用場景 / How I Use AI for Coding

🔁 重寫程式碼 / Rewrite (Most Often)

我會先自己撰寫一個基本版本的函式，然後請 AI 幫我優化邏輯，讓程式碼更清楚、更易讀。
I usually write a basic version of the function myself first, and then ask AI to improve the logic—making the code cleaner, clearer, and easier to understand.

這種方式不僅能保持自己的思考能力，還能透過 AI 進一步學習更好的寫法。
This approach helps retain my own thinking process while learning better patterns from AI suggestions.

# Original version
def add(a, b):
    return a + b

# Improved by AI
def add(a: int, b: int) -> int:
    """Return the sum of two integers."""
    return a + b

📖 解釋與錯誤分析 / Explain the Code & Analyze Errors

AI 能夠在短時間內閱讀大量訊息，因此能快速理解整體專案架構，並在錯誤發生時提供修正方向。
AI can process a large amount of information in a short time, so it quickly understands the project structure and offers meaningful help when an error occurs.

例如當我遇到 obscure 的 runtime error 時，只需選取錯誤訊息與程式碼區塊，AI 就能推理出問題所在。
For example, when facing obscure runtime errors, I just select the error and relevant code block, and AI can reason out the issue.

# Example Python error
TypeError: unsupported operand type(s) for +: 'int' and 'str'

⚡ 自動建構 / Auto Build

在寫程式的時候，我特別喜歡 Andrej Karpathy 所說的 “vibe coding” 狀態——當你和 AI 一起互動，像是進入了一種寫程式的節奏感。
As Andrej Karpathy puts it, “vibe coding” is that state where you and the AI code together in a natural rhythm—almost like improvising jazz.

這種模式下，AI 會根據你輸入的片段、思路，持續補完你接下來想做的事。
In this flow, AI picks up your partial thoughts and completes what you’re about to do next.

你只需要專注在邏輯、結構與想法的推演，AI 則自動處理細節與樣板程式碼。
You stay focused on the logic and structure, while AI handles the syntax, boilerplate, and repetitive parts.

“Vibe coding is real.” — Andrej Karpathy

以下是一個實際的例子：當我需要建立一個 React 專案，但對 React 還不熟悉時，AI 如何幫助我快速上手：
Here’s a real example of how AI helped me quickly get started with React when I was new to it:

// I told AI: "Help me create a simple todo list"

function TodoList() {
  const [todos, setTodos] = useState([]);
  
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  return (
    <div>
      <input placeholder="Add todo" />
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input type="checkbox" checked={todo.completed} />
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

AI 產生了完整程式碼和註解，幫助我理解功能。它解釋了 React Hook 的用途和狀態管理設計。這種方式讓我快速掌握 React 核心概念。
AI generated complete code with comments, helping me understand functionality. It explained React Hook purposes and state management design. This approach helped me quickly grasp React’s core concepts.

重點摘要 / Key Takeaways

🎯 工具選擇 / Tool Selection

• GitHub Copilot: 適合需要輕量級程式碼建議的開發者
• Cursor: 適合需要深度 AI 互動和專案級別協助的開發者
• GitHub Copilot: Best for developers who need lightweight code suggestions
• Cursor: Best for developers who need deep AI interaction and project-level assistance

💡 使用建議 / Usage Recommendations

• 從簡單的程式碼重構開始，逐步熟悉 AI 工具
• 善用 AI 進行程式碼解釋和錯誤分析
• 保持自己的思考能力，將 AI 視為協作夥伴
• Start with simple code refactoring to get familiar with AI tools
• Leverage AI for code explanation and error analysis
• Maintain your own thinking process while using AI as a collaborator

⚡ 效率提升 / Productivity Gains

• 減少重複性工作，專注於核心邏輯
• 加快學習新技術的速度
• 提升程式碼品質和可維護性
• Reduce repetitive work, focus on core logic
• Accelerate learning of new technologies
• Improve code quality and maintainability

🔮 未來展望 / Future Outlook

• AI 工具將更深度整合到開發流程中
• 開發者需要學習如何有效與 AI 協作
• 持續關注新工具和功能的發展
• AI tools will integrate deeper into development workflows
• Developers need to learn effective AI collaboration
• Stay updated with new tools and features

心得 / Thoughts

Copilot 在 VS Code 裡就像是無聲的助手，貼心但略顯被動；而 Cursor 則像一位隨傳隨到的對話型 AI 工程師，更適合需要大量溝通與理解的開發情境。
Copilot feels like a silent assistant inside VS Code—subtle but passive. Cursor, on the other hand, acts more like a conversational AI engineer, great for tasks that involve explanation, analysis, and refactoring.

對於我而言，這些 AI 工具提供了許多的幫助，無論是在專案趕進度時、卡住 debug 時，還是在學習新技術時，它們都是我可靠的開發夥伴。
For me, these AI tools have been invaluable—whether rushing to meet deadlines, getting stuck debugging, or learning new tech, they’ve been dependable coding companions.

我相信，未來 AI 將會更加融入開發流程，而我們要做的，就是學會如何與它們「對話」，一起寫出更好的程式。
I believe AI will continue integrating deeply into the development process, and our job is to learn how to “talk” with it—so we can code better, together.