Vibe Coding、AI IDE/插件

概述

Vibe Coding，氛圍編程，AI輔助編程，三劍客：

  • Google Gemini：
  • OpenAI GPT：
  • Anthropic Claude：

IDE

Cursor

基于VS Code開發。

特性：

  • AI驅動的代碼生成：輸入想要的內容，Cursor會將這些需求轉換為實際代碼。
  • 自動調試輔助：可以識別它生成的代碼（或您編寫的代碼）中的錯誤或bug，并建議修復方案，使調試過程更快。
  • 上下文感知幫助：理解項目上下文。可查看所有文件，并提出適合您項目的建議，確保生成的代碼與您已有的內容一致。
  • 文檔和學習工具：提供文檔的快速查閱，甚至可以為您解釋代碼。

快捷鍵：

  • Ctrl+L：打開側邊欄聊天窗口
  • Ctrl+K：打開一個內聯提示用于代碼生成。

生成的建議代碼以預覽或差異（diff）格式出現，可選擇接受或放棄；基本循環：提示→生成→審查→接受→測試。

最佳實踐

  • 清晰描述意圖：盡可能清晰和具體地說明您的需求。
  • 逐步進行：將項目或問題分解成更小的任務，并逐個解決。迭代過程。
  • 經常審查和測試：AI生成的代碼不完美。
  • 根據結果優化提示：重新措辭請求或添加更多細節。
  • 利用指導功能：API解讀、代碼塊解釋、優化、重構、提高可讀性…。
  • 通過實踐不斷學習：有助于更好地編寫提示。

Trae

字節跳動推出的基于VS Code的免費IDE，The Real AI Engineer縮寫，內置Claude 3.5和GPT-4o等模型，支持智能代碼生成與優化，原生中文支持，還具備多模態能力，適合Web開發、游戲開發等多種場景。

原本的MarsCode編程助手和Trae IDE已經合并，現在統一歸屬于Trae品牌。

Trae旗下包含兩款產品：IDE和插件。

功能：

  • Builder模式：支持Vibe Coding，拆解需求自動生成完整項目
  • Chat模式：交互式問答，實時編程助手，深度上下文理解
  • 多模態輸入：圖片轉代碼、手繪稿生成界面、Webview實時預覽
  • 頂級模型免費：Claude 3.5 Sonnet、GPT-4o、Gemini 2.5 Pro完全免費

MCP

MCP允許LLM訪問自定義工具和服務，MCP Servers是支持MCP協議的服務，提供工具和功能。支持添加線上和本地部署的服務，兩者的能力差異主要體現在部署方式、適用場景、安全管控和功能擴展性上；本地服務依賴stdio，僅支持簡單進程間通信；遠程服務通過HTTP/SSE實現跨網絡交互。

Trae內置MCP市場，可快速添加第三方MCP Servers；配置MCP Server將外部工具和服務連接至IDE進行使用；可定義調用MCP工具的Agent，拓展Trae的執行能力。

規則

用于規范AI在IDE內的行為，包括：

  • 個人規則：全局粒度，基于個人使用習慣和需求定制的規則，旨在讓輸出更符合用戶的個性化要求。如語言風格、內容深度、交互方式等規則。配置文件user_rules.md
  • 項目規則：項目粒度，配置文件project_rules.md

智能體

在這里插入圖片描述

上下文

支持多種形態的上下文：

  • Code
  • Files
  • Folder
  • Workspace
  • Docs：上傳個人文檔集
  • Web：#Web后輸入問題并發送，觸發聯網搜索

SOLO

SOLO模式集成包括IDE在內的多種工具。你只需表達需求，它就會基于目標主動推進完整開發流程。

Windsurf

官網，基于Codeium技術，推出Cascade技術，將Copilot和Agent完美融合。支持深度項目理解，能夠處理復雜的多文件編輯任務。

功能：

  • Cascade技術：深度理解項目結構，處理復雜編程任務
  • Agent模式：助手可以主動調用各種工具，實現自主編程
  • 多文件編輯：同時處理多個文件，保持代碼一致性
  • 智能上下文：自動記住項目上下文，越用越聰明

Kiro

官網，亞馬遜推出的IDE，目前還是預覽版。

插件

Claude Code

GitHub，Anthropic推出的智能編程助手（代理式編程工具），可直接集成到終端環境中，并通過自然語言命令實現更快編程。
在這里插入圖片描述
特點：

  • 直接集成終端：無需額外服務器或復雜配置
  • 理解整個代碼庫：能夠分析項目結構和代碼邏輯
  • 自然語言交互：用普通話描述需求，Claude幫你實現
  • 安全隱私設計：直連Anthropic API，無中間服務器
  • 實際操作能力：真正執行文件編輯、Git操作等任務

Claude Code提供多種認證選項：

  • Anthropic Console：通過OAuth 登錄https://console.anthropic.com賬戶
  • Claude Pro/Max訂閱：使用Claude.ai賬戶登錄
  • 企業平臺：配置Amazon Bedrock或Google Vertex AI
命令功能示例
claude啟動交互模式claude
claude "task"執行一次性任務claude "fix the build error"
claude -p "query"運行后退出claude -p "explain this function"
claude -c繼續最近對話claude -c
claude -r恢復之前對話claude -r
/clear清除對話歷史> /clear
/help顯示幫助> /help
exit或Ctrl+C退出> exit

安裝及使用

npm install -g @anthropic-ai/claude-code
claude
# 讓 Claude 分析項目
summarize this project
# 生成項目指南
/init
# 提交
commit the generated CLAUDE.md file
# 解釋文件結構
explain the folder structure
# 修復 bug
there is a NPE in line 77, fix it
# 重構代碼
refactor the authentication module to use async/await instead of callbacks
# 解決沖突
help me resolve merge conflicts
# 編寫測試
write unit tests for the calculator functions
# 性能優化
analyze the performance of this code and suggest optimizations
# 代碼審查
review my changes and suggest improvements
# 添加注釋
add JSDoc comments to the undocumented functions in auth.js
# 觸發深度思考
I need to implement OAuth2 authentication. Think deeply about the best approach.
# 加強思考深度
think harder about edge cases we should handle
# 思考安全問題
think about potential security vulnerabilities in this approach
# 創建優化命令
echo "Analyze the performance of this code and suggest three specific optimizations:" > .claude/commands/optimize.md
# 使用自定義命令
/project:optimize
# 使用Git worktrees運行多個Claude Code實例
# 創建新的工作樹
git worktree add ../project-feature-a -b feature-a
# 在新工作樹中運行 Claude
cd ../project-feature-a
claude
# 管道操作
cat build-error.txt | claude -p 'explain the root cause of this error'
# 添加到構建腳本
npm run "lint:claude": "claude -p 'look at changes vs main and report issues'"
# 結構化輸出
claude -p 'analyze this code' --output-format json > analysis.json
# ~/.claude/settings.json全局設置
{"permissions": {"allow": ["Bash(npm run lint)","Bash(npm run test:*)"],"deny": ["Bash(curl:*)"]}
}

如果出現command not found：
在這里插入圖片描述
解決方法：
在這里插入圖片描述
將D:\Program Files\nodejs\node_global加入PATH環境變量。
在這里插入圖片描述
如果出現上面報錯，或打開https://claude.ai，出現如下提示：
在這里插入圖片描述
解決方法：切換地區
在這里插入圖片描述
又遇到新問題：
在這里插入圖片描述
添加環境變量CLAUDE_CODE_GIT_BASH_PATH=D:\Program Files\Git\bin解決問題。

GitHub Copilot

IDE插件。

功能：

  • Claude 3.5 Sonnet集成：新增Claude模型支持，代碼質量顯著提升
  • Copilot Vision：上傳截圖生成代碼，設計稿秒變界面
  • 免費版本：每月2000次代碼補全和50次聊天，個人用戶可免費使用
  • 企業級功能：Pro+計劃支持Claude Opus 4.1，處理復雜編程任務

Gemini CLI

GitHub，Google發布的一款基于Gemini 2.5 Pro模型的本地AI代理，可在終端內構建應用、調試代碼、解析代碼庫并獲取實時數據。

功能：

  • 每天最多可免費請求1000次；
  • 集成Google搜索，維基百科、GitHub都可；
  • read_file和read_folder、文件編輯、腳本生成、Bash工作流自動化；
  • 集成到Git代碼塊，詢問關于代碼塊的信息；
  • 使用MCP服務器和工具進行擴展，如使用Google Cloud的GenMedia API生成視頻，或通過預建端點向外部模型發送提示；
  • 以Gemini Code Assist插件的形式集成IDE。使用：運行終端提示、自動生成代碼、調試、無需切換標簽即可觸發CLI請求。

安裝

npx https://github.com/google-gemini/gemini-cli
# 或
npm install -g @google/gemini-cli
gemini

使用NPX來獲取CLI包并初始化提示，將被引導完成以下過程：

  1. 主題選擇：選擇淺色或深色的終端主題。
  2. 身份驗證：可通過以下方式進行身份驗證：
    • Google帳戶：推薦，無需設置
    • Gemini API Key：如果想要更高的請求限制

一旦通過身份驗證，將進入Gemini CLI界面。
在這里插入圖片描述

Augment Agent

官網，專為大型代碼庫打造，具備20萬tokens的超長上下文、持久記憶和深度工具集成的IDE AI插件，支持Vim、GitHub、Slack。

功能：

  • 代碼理解、持久化記憶；
  • 滲透完整開發工作流：可集成到項目管理工具（如Jira、Linear）、文檔工具（如Confluence、Notion）；
    @GitHub：創建分支、提交代碼、發起PR
    @Linear：問題檢測與解決
    @Notion、@JIRA、@Confluence：將上下文信息轉化為實際代碼
  • 可視化調試：拖入截圖，自動識別UI問題（CSS、布局、邏輯），并提供修復建議。
  • 版本控制：每一步操作都會被記錄，每一次編輯都可以撤銷。

CodeBuddy

官網，騰訊提供的AI編碼助手，提供兩種版本：

  • IDE：基于騰訊元寶
  • 插件。

兩者都針對中文開發場景深度優化，支持智能文檔生成、RAG代碼庫理解等高級功能。

Lingma

即通義靈碼，阿里云提供的智能編碼輔助工具，具備代碼智能生成、智能問答、多文件修改等能力，支持多種主流編程語言，可助力開發者提升編碼效率，引領AI原生研發新范式。正在規劃推出IDE版本。

功能：

  • 智能體模式，端到端任務執行
  • 行間預測，NES
  • 長期記憶功能

文心快碼

即Baidu Comate，百度發布的國內首個多模態、多智能體協同的AI原生開發環境，通過多智能體協同能自動規劃執行任務，試圖主導開發流程，為開發者帶來全新開發體驗。

功能：

  • 代碼補全、單測生成
  • Zulu多智能體協同模式，生成速度慢
  • 設計稿轉代碼，即F2C，Figma to Code

Cline

GitHub，開源Coding Agent。原Claude Dev。

功能：

Streaming Tools Call

流式返回調用工具，邊生成邊調用，邊調用邊檢測，大大提高Agent系統的核心能力。

CodeWhisperer

Amazon推出專為企業環境設計，AWS Toolkit插件，支持多種IDE，在安全性和合規性方面表現出色。個人用戶可以免費使用基礎功能。

在線AI開發平臺

Firebase Studio

Google推出的免費AI應用構建器，與Firebase生態深度集成。特別適合需要后端服務的應用開發，AI能自動配置數據庫、認證、云函數等服務。

功能：

  • Firebase集成： 自動配置云服務
  • 多平臺支持： Web、移動端應用都能生成

Lovable

官網

功能：

  • 設計轉代碼： 上傳設計稿，AI自動生成React代碼
  • 多人協作模式： 實時協作，支持設計師和開發者同時工作
  • 全棧生成： 前端+后端+數據庫，一站式解決
  • Claude集成： 基于最新Claude模型，理解能力超強

Bolt.new

官網，StackBlitz出品，結合Artifacts、V0和Replit的優勢。支持React、Vue、Svelte、Angular等主流框架，真正實現用英語編程，幾分鐘內就能從想法變成可運行的Web應用。

功能：

  • 實時預覽： 邊寫邊看，即時反饋
  • 一鍵部署： 集成Vercel、Netlify等部署平臺

v0.dev

官網，Vercel推出的AI UI生成工具，專注于生成高質量的React組件。采用ShadCN UI設計系統，生成的界面美觀且現代化。

功能：

  • UI專精：專注于界面生成，質量極高
  • ShadCN集成：統一的設計語言，風格一致
  • 組件化：生成可復用的React組件
  • Vercel部署：一鍵部署到Vercel平臺

Replit

集成在Replit在線IDE中的AI助手，支持Python、JavaScript、Go等多種編程語言。最大優勢是云端開發，無需本地環境配置，特別適合快速原型開發和團隊協作。

libra.dev

官網，同時還有開源版本，用于快速構建以自然語言驅動的SaaS應用。

特點：

  • 部署選項多樣：
    • 托管平臺：通過Cloudflare Workers無服務器架構提供快速上線、一鍵部署、自動 TLS/SSL、版本控制、回滾等功能
    • 開源自部署：支持本地開發與自部署，自由配置API Key與基礎架構
  • 面向情境選擇建議：
    • 選擇托管平臺：適合快速上線、追求團隊協作、希望獲得技術支持等場景
    • 選擇開源版本：適合對數據自主、深度定制、成本控制或離線部署有需求的技術團隊

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/95019.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/95019.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/95019.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Unity高級UI拖動控制器教程

Unity高級UI拖動控制器教程

在游戲開發過程中，UI組件的拖動功能是一個常見的需求。特別是在需要實現拖動、邊界檢測、透明度控制以及動畫反饋等功能時，編寫一個高級UI拖動控制器將非常有用。在本文中，我們將創建一個支持多種Canvas模式和更精確邊界檢測的高級UI拖動控制…
閱讀更多...
零基礎上手：Cursor + MCP 爬取 YouTube 視頻數據

零基礎上手：Cursor + MCP 爬取 YouTube 視頻數據

前言 大模型與 AI 應用越來越普及的今天，實時、穩定地獲取網絡數據變得尤為重要。無論是做內容分析、趨勢研究還是自動化任務，爬取和處理數據始終是繞不開的一環。 傳統爬蟲往往面臨封禁、驗證碼、動態渲染等難題，而 Bright Data MCP&#x…
閱讀更多...
frp 一個高性能的反向代理服務

frp 一個高性能的反向代理服務

文章目錄項目概述核心特性系統架構快速開始1. 下載安裝2. 服務端快速配置3. 客戶端快速配置4. 驗證連接配置文件說明代理類型TCP/UDP 代理HTTP/HTTPS 代理安全代理 (STCP/SUDP)P2P 代理 (XTCP)插件系統靜態文件服務HTTP/SOCKS5 代理協議轉換使用場景遠程辦公Web 服務發布游戲服…
閱讀更多...
Android -第二十一次技術總結

Android -第二十一次技術總結

一、activity與Fragment的通信有哪些？使用接口進行通信的邏輯與代碼示例使用接口通信的核心是解耦，通過定義一個接口作為通信契約，讓 Fragment 不依賴于具體的 Activity 類型。1. 定義通信接口（在 Fragment 內）首先&am…
閱讀更多...
【算法】78.子集--通俗講解

【算法】78.子集--通俗講解

通俗易懂講解“子集”算法題目 一、題目是啥？一句話說清 給你一個不含重復元素的整數數組，返回所有可能的子集（包括空集和它本身）。 示例： 輸入：nums = [1,2,3] 輸出：[[], [1], [2], [1,2], [3], [1,3], [2,3], [1,2,3]] 二、解題核心 使用回溯法（遞歸）或位運算來…
閱讀更多...
Cherrystudio的搭建和使用

Cherrystudio的搭建和使用

1、下載和安裝 Cherry Studio 官方網站 - 全能的 AI 助手 2、配置LLM 3、聊天助手 3.1 添加和編輯助手 3.2 選擇LLM 3.3 對話聊天 4、配置MCP 4.1 安裝MCP執行插件 4.2 安裝 node和npm Node.js — Download Node.js npm -v 10.9.3 node -v v22…
閱讀更多...
基于Matlab結合膚色檢測與卷積神經網絡的人臉識別方法研究

基于Matlab結合膚色檢測與卷積神經網絡的人臉識別方法研究

近年來，隨著人工智能與計算機視覺技術的發展，人臉識別在人機交互、安防監控、身份認證等領域得到了廣泛應用。本文提出了一種基于 MATLAB 平臺，結合 膚色檢測與卷積神經網絡（CNN） 的人臉識別方法。該方法首先利用膚色模…
閱讀更多...
在八月點燃AI智慧之火：CSDN創作之星挑戰賽開啟靈感盛宴

在八月點燃AI智慧之火：CSDN創作之星挑戰賽開啟靈感盛宴

在八月點燃AI智慧之火：CSDN創作之星挑戰賽開啟靈感盛宴八月驕陽似火，智能時代的技術熱情同樣熾熱。在這個充滿創新活力的季節，「AIcoding八月創作之星挑戰賽」正式拉開帷幕，為CSDN的創作者們打造一個展示才華、碰撞靈感的專業舞臺…
閱讀更多...
解密 Vue 3 shallowRef：淺層響應式 vs 深度響應式的性能對決

解密 Vue 3 shallowRef：淺層響應式 vs 深度響應式的性能對決

📖 概述 shallowRef() 是 Vue 3 中的一個組合式 API 函數，用于創建淺層響應式引用。與 ref() 不同，shallowRef() 只在其 .value 被直接替換時觸發響應式更新，不會深度監聽對象內部屬性的變化。 🎯 基本概念 什么是 sh…
閱讀更多...
Linux進程間通信（IPC）深入解析

Linux進程間通信（IPC）深入解析

Linux進程間通信（IPC）深入解析 1 概述 Linux 進程間通信 (Inter-Process Communication, IPC) 是不同進程之間交換數據與同步操作的機制。現代 Linux 內核提供了多種 IPC 方式，從傳統的管道和 System V IPC 到現代的套接字和 D-Bus&#xff0…
閱讀更多...
TensorFlow-GPU版本安裝

TensorFlow-GPU版本安裝

前言： （1）因項目需求，需要安裝TensorFlow-GPU版本，故本文在此記錄安裝過程。 （2）有注釋，優先看注釋 （3）本文所使用的GPU為NVIDIA GeForce RTX 5080 Laptop GP…
閱讀更多...
Elasticsearch 索引字段刪除，除了 Reindex 重建索引還有沒有別的解決方案？

Elasticsearch 索引字段刪除，除了 Reindex 重建索引還有沒有別的解決方案？

unsetunset1、問題來源unsetunset在生產環境維護 Elasticsearch 集群的過程中，經常會遇到這樣的場景：業務需求變更導致某些字段不再使用，或者早期設計時添加了一些冗余字段，現在需要清理掉。最近球友在公司的一個項目中就遇到了這…
閱讀更多...
Ubuntu虛擬機磁盤空間擴展指南

Ubuntu虛擬機磁盤空間擴展指南

這是一份詳細且易于理解的 Ubuntu 虛擬機磁盤空間擴展指南。本指南涵蓋了兩種主流虛擬機軟件（VirtualBox 和 VMware）的操作步驟，并分為 “擴展虛擬磁盤” 和 “在 Ubuntu 內部分配新空間” 兩大部分。重要提示：在進行任何磁盤操作…
閱讀更多...
教程1:用vscode-＞ptvsd-創建和調試一個UI(python)-轉載官方翻譯（有修正）

教程1:用vscode-＞ptvsd-創建和調試一個UI(python)-轉載官方翻譯（有修正）

vscode用python開發maya聯動調試設置 3dsMax Python開發環境搭建 3文聯動之debugpy調試max‘python. 3文聯動之socket插槽注入max‘python 本教程是max主動接收創建代碼的方式（預先運行界面，通過按鈕主動讀取py腳本，執行斷點）&…
閱讀更多...
龍迅#LT7621GX適用于兩路HDMI2.1/DP1.4A轉HDMI2.1混切應用,分辨率高達8K60HZ!

龍迅#LT7621GX適用于兩路HDMI2.1/DP1.4A轉HDMI2.1混切應用,分辨率高達8K60HZ!

1. 描述LT7621GX是一款高性能兩路HDMI2.1/DP1.4轉HDMI2.1混合開關芯片，用于顯示應用。 HDCP RX作為HDCP中繼器的上游，可以與其他芯片的HDCP TX配合，實現中繼器功能。 對于HDMI2.1輸入，LT7621GX可以配置為3/4通道。自適應均衡使其適…
閱讀更多...
【Ruoyi 解密 - 12. JDK17的新特性】------ 從Java 8 到 Java 17：向Scala看齊的“簡潔革命”，同宗JVM下的效率狂飆

【Ruoyi 解密 - 12. JDK17的新特性】------ 從Java 8 到 Java 17：向Scala看齊的“簡潔革命”，同宗JVM下的效率狂飆

從Java 8到Java 17：抄作業Scala？JVM同宗下的Ruoyi開發效率狂飆！ 上一篇我們聊到JDK 17對Python的柔性借鑒，可深入用下來才發現——這哪夠！對Ruoyi開發者來說，JDK 17真正的“王炸”，是把同根JVM的…
閱讀更多...
大模型 “輕量化” 之戰：從千億參數到端側部署，AI 如何走進消費電子？

大模型 “輕量化” 之戰：從千億參數到端側部署，AI 如何走進消費電子？

一、大模型 “輕量化” 的行業背景在 AI 技術蓬勃發展的當下，大模型已然成為行業焦點。從 GPT-4 突破萬億級參數量，到 DeepSeek-R1 邁向千億參數規模，大模型的參數擴張趨勢顯著。然而，這種規模的增長也帶來了諸多挑戰。以 GPT-4 為…
閱讀更多...
香港電訊與Microsoft香港推出新世代“Teams Phone” 解決方案

香港電訊與Microsoft香港推出新世代“Teams Phone” 解決方案

香港電訊成為香港首家提供 “Microsoft Operator Connect”的本地電訊營運商1 香港電訊（股份代號：6823）【香港 ? 2025年2月11日】 – 香港電訊宣布與 Microsoft 香港合作推出 “Operator Connect”，成為全港首家為企業客戶提供全…
閱讀更多...
PlantUML描述《分析模式》第3章觀察和測量（2）

PlantUML描述《分析模式》第3章觀察和測量（2）

lantUML描述《分析模式》第2章“當責”（1） PlantUML描述《分析模式》第2章“當責”（2） PlantUML描述《分析模式》第3章觀察和測量（1） 原圖3.8 EA繪制 圖3.8 遞歸關系用于記錄證據和評估。 PlantUML sta…
閱讀更多...
輪廓周長，面積，外界圓，外界矩形近似輪廓和模板匹配和argparse模塊實現代碼參數的動態配置

輪廓周長，面積，外界圓，外界矩形近似輪廓和模板匹配和argparse模塊實現代碼參數的動態配置

目錄 一.輪廓操作 1.輪廓特征的引入與篩選 2.輪廓排序和精準定位 3.外接圓與外接矩形的計算與繪制 二.輪廓近似 1.輪廓近似的基本概念 2.輪廓近似的實現方法和核心步驟 3. 近似精度參數的設定邏輯 4.輪廓定位方法 三.模板匹配 1.模板匹配技術原理與實現流程 2.技術要…
閱讀更多...
最新文章

Copyright @ 2022~2023