Continue插件实现本地部署一个“cursor”或“github copilot”

Continue插件实现本地部署一个“cursor”或“github copilot”

本地部署 AI 代码助手,制作一个 Cursor/GitHub Copilot 的替代版本

一 需求分析

  • 本地部署的定义与优势(数据隐私、离线使用、定制化)。
  • Cursor 与 GitHub Copilot 的功能(代码补全、对话交互、模型差异)。
  • 本地部署的AI 代码助手适用场景:企业内网开发、敏感数据环境。

二 环境准备与工具选择

  • 硬件要求:GPU 要对应上你所部署的模型大小
  • 模型选择:qwen2.5-14b-instruct (这里选择千问的大模型)

三 部署开源模型

这里不详细介绍具体的大模型部署的具体过程,部署完成之后,你应该得到对应的模型的以下信息

model: "qwen2.5-14b-instruct" apiBase: "http://你的ip地址(自己的本机就写localhost):对应的端口号 例如8000/v1"

四 集成到开发环境

Cursor 开源替代方案:配置 VS Code 插件(Continue)连接本地模型

4.1 Continue 插件简介

Continue 是 VS Code 的一款 AI 编程辅助插件,专注于通过自然语言交互提升开发效率。它基于大语言模型(如 GPT-4、Claude 等),支持代码生成、解释、调试和重构等功能,同时注重隐私保护,允许本地运行或连接私有模型。

  • 代码自动补全与生成:根据注释或上下文实时生成代码片段,支持多种编程语言,减少重复性编码工作。
  • 对话式编程:通过聊天界面与 AI 交互,例如询问“如何优化这段代码?”或“解释这个函数的作用”,插件会提供即时反馈。
  • 代码重构与调试:识别代码中的潜在问题,提供优化建议,或直接生成修复方案。例如自动重构冗余逻辑或修复语法错误。
  • 多模型支持:允许用户配置不同的 AI 模型后端(如 OpenAI、Anthropic 或本地部署的模型),适应不同需求。

4.2 隐私与安全

  • 本地运行选项:支持离线模型(如 CodeLlama),避免敏感代码上传云端。
  • 自定义服务器:企业用户可连接内部部署的模型服务器,确保数据可控。

4.3 安装与配置

①安装插件

在 VS Code 扩展市场搜索“Continue”并安装。

由于我已经安装过了,所以显示的是Disable。

②配置本地模型

Continue安装完成后,VS Code 的边栏上会多一个图标。

选择Ollama 然后点击Connect就可以了,会自动弹出config.yaml,然后将其内容补充完整。

1 基本信息

name: Local Config version: 1.0.0 schema: v1
  • name: 配置名称,标识为 "Local Assistant"(本地助手)。
  • version: 配置文件版本(1.0.0)。
  • schema: 使用的配置架构版本(v1)。

2 模型配置

 models: - name: qwen2.5-14b-instruct provider: "openai" model: "qwen2.5-14b-instruct" apiBase: "http://ip:port/v1" apiKey: "" completion_options: temperature: 0.5 top_p: 0.9 roles: - chat - autocomplete - edit - apply
  • 模型定义:使用 Qwen2.5-Coder-7B-Instruct(一个针对代码任务的7B参数模型)。
    • provider: 设置为 "openai",表示兼容OpenAI API格式(这里根据你的实际情况修改)。
    • apiBase: 模型API的终端地址(http://ip:port/v1),指向一个本地或远程服务。
    • apiKey: 你的模型API密钥。
  • 生成参数:
    • temperature: 0.5(平衡生成结果的创造性和确定性)。
    • top_p: 0.9(核采样,限制生成时仅考虑概率最高的90% token)。
  • 支持的功能 (roles):
    • chat: 对话交互。
    • autocomplete: 代码自动补全。
    • edit: 代码编辑。
    • apply: 可能指应用代码更改。

3 上下文集成

 context: - provider: code - provider: docs - provider: diff - provider: terminal - provider: problems - provider: folder - provider: codebase

配置工具可访问的上下文来源(增强模型对当前任务的理解):

  • code: 当前编辑的代码文件。
  • docs: 项目文档或注释。
  • diff: 代码变更差异(如Git diff)。
  • terminal: 终端输出或命令历史。
  • problems: 错误或警告(如IDE提示)。
  • folder: 当前目录文件结构。
  • codebase: 整个代码库的元信息(如符号定义)。

总得来说,此配置文件定义了一个本地代码助手,通过HTTP API连接到一个 Qwen2.5-Coder 模型,支持代码补全、编辑、聊天等功能,并集成了开发环境的多维度上下文(代码、终端、文档等)。

Ctrl + S 保存后就会显示对应的模型,到这里本地部署的模型链接VS code 就完成了。

五 测试

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.