高效代码开发助手vscode+(Copilot/Cline+Copilot(让cline调用Copilot的模型))

高效代码开发助手vscode+(Copilot/Cline+Copilot(让cline调用Copilot的模型))

一、引言

随着AI智能体的出现,越来越多方便的工具也随之产生,作为一名开发者自然不能错过这波浪潮。本篇文章带来的是如何在vscode上使用插件Copilot/Cline+Copilot,两种方式实现自动化辅助编程。

二、在vscode上使用Copilot

安装 Copilot插件

在 VSCode 中安装 Copilot插件:

  1. 打开 VSCode 扩展市场
  2. 搜索 “Copilot”
  3. 点击安装
  4. 安装完成后,使用 GitHub 账号登录授权(在Copilot插件安装完成后,通过向导完成登录授权)
  5. 重启 VSCode
在这里插入图片描述

测试自动化编写代码功能

打开聊天框:

在这里插入图片描述

选择Agent模式;选择模型(想用Claude 4 sonnet可去某宝买copilot计划,价格挺便宜):

在这里插入图片描述

输入测试内容:

在这里插入图片描述

结果展示:

请添加图片描述

三、在vscode上使用Cline+Copilot

Cline也是一个受到众多好评的自动化编程的插件。可以单独使用API进行模型的调用,本文只介绍如何调用Copilot包含的模型,不介绍如何使用API调用。

安装 Cline 插件

在 VSCode 中安装 Cline 插件:

  1. 打开 VSCode 扩展市场
  2. 搜索 “Cline”
  3. 点击安装
在这里插入图片描述

配置 Cline

安装完成后需要简单的配置:点击小图标,点击右上角的设置:

在这里插入图片描述

API选择如下一项:

在这里插入图片描述

模型根据自己的需求选择,可选的模型是根据Copilot可选的模型决定,我仍然选择Claude 4 sonnet(如果没有出现可选模型,记得重启vscode):

在这里插入图片描述

点击设置,选择中文:

在这里插入图片描述

选择Act模式,plan模式不会编辑代码:

在这里插入图片描述

下方可以快速切换模型:

在这里插入图片描述

输入框上面的一栏的配置嘛,嗯……都是字面意思,不用过多解释(如果需要在终端运行命令,可以勾选Execute safe commands):

在这里插入图片描述

测试结果

请添加图片描述


在这里插入图片描述

Read more

JavaScript 中 var、let、const 的核心区别与实战应用

JavaScript 中 var、let、const 的核心区别与实战应用

要理解 const、var、let 的区别,我们可以从 作用域、变量提升、可重复声明、可修改性 这几个核心维度展开,这些也是新手最容易混淆的点。 一、核心概念铺垫 首先明确两个基础概念,能帮你更好理解区别: * 函数作用域:变量只在声明它的函数内部可访问(var 是函数作用域)。 * 块级作用域:变量只在声明它的 {} 内部可访问(let/const 是块级作用域,{} 包括 if/for/while/ 普通代码块)。 * 变量提升:JS 引擎在执行代码前,会把变量声明 “提升” 到当前作用域顶部(但赋值不会提升)。 二、逐个拆解 + 对比 1. var(ES5 语法) var 是 ES5 中声明变量的方式,特性如下:

前端WebSocket实战:别再只会用HTTP了

前端WebSocket实战:别再只会用HTTP了

前端WebSocket实战:别再只会用HTTP了 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行,咱们今天聊聊前端WebSocket。别告诉我你还在用轮询获取实时数据,那感觉就像每隔一分钟就去敲门问"好了没"——烦人又低效。 为什么你需要WebSocket 最近看到一个项目,实时聊天功能用轮询实现,每秒请求一次服务器,我差点当场去世。我就想问:你是在做实时通信还是在做DDoS攻击? 反面教材 // 反面教材:轮询获取数据 function startPolling() { setInterval(async () => { const response = await fetch('/api/messages'); const messages = await response.json(); updateMessages(messages); }, 1000); // 每秒请求一次 } // 服务器:求放过 // 带宽:我扛不住了 毒舌点评:

【前端】使用Vue3过程中遇到加载无效设置点击方法提示不存在的情况,原来是少加了一个属性

【前端】使用Vue3过程中遇到加载无效设置点击方法提示不存在的情况,原来是少加了一个属性

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!🌹 目录 * 前言 * 提示报错 * 问题分析 * 1. **Options API vs Composition API 风格差异** * ✅ **Options API 写法(方法直接放在外面)** * ✅ **Composition API 写法(方法必须在 setup 中定义)** * ✅ **`<script setup>` 语法糖(最简洁的 Composition API)** * 2. **为什么你的代码会报错?** * 3. **解决方案** * 方案 1:改用 **Options API**(适合从 Vue

我用 Nexent 做了个 AI 大厨:基于 Nexent 知识库与 MCP 生态打造智能烹饪顾问实战

我用 Nexent 做了个 AI 大厨:基于 Nexent 知识库与 MCP 生态打造智能烹饪顾问实战

引言:厨房小白的自救之路 说实话,我是一个对做饭既向往又恐惧的人。向往的是那些短视频里色香味俱全的家常菜,恐惧的是每次打开冰箱,站在一堆食材面前完全不知道能做什么。我的做饭流程通常是这样的:先在 B 站搜教程视频,边看边暂停边做,一顿饭下来手机屏幕被油溅得惨不忍睹。更糟糕的是,我家还有一位对海鲜过敏的室友和一位需要控糖的老妈,每次做饭都得在脑子里疯狂计算"这个能不能放""那个谁不能吃"。 上个月,我在 GitHub 上看到了 Nexent——一个"零编排"的开源智能体平台,主打"一个提示词,无限种可能"。我当时脑子里就冒出一个想法:能不能做一个懂食材搭配、会根据季节推荐菜谱、还能照顾家人饮食禁忌的 AI 烹饪顾问? 说干就干。我花了一个周末的时间,在 Nexent 上亲手搭建了一个名叫"AI