15 篇文章带有标签 “vscode-extension”

• Cline Overview

Cline 扩展架构和开发指南

项目概述

Cline 是一个 VSCode 扩展，通过核心扩展后端和基于 React 的 webview 前端的组合提供 AI 辅助功能。该扩展使用 TypeScript 构建，遵循模块化架构模式。

架构概述

定义

• 核心扩展：src 文件夹内的所有内容，按模块化组件组织
• 核心扩展状态：由 index.ts 中的 Controller 类管理，作为扩展状态的唯一真实来源。它管理多种类型的持久存储（全局状态、工作区状态和密钥），处理状态在核心扩展和 webview 组件之间的分发，并协调多个扩展实例之间的状态。这包括管理 API 配置、任务历史、设置和 MCP 配置。
• Webview：webview-ui 内的所有内容。所有用户可见的 react 或视图以及用户交互组件
• Webview 状态：由 ExtensionStateContext.tsx 中的 ExtensionStateContext 管理，通过上下文提供者模式为 React 组件提供对扩展状态的访问。它维护 UI 组件的本地状态，通过消息事件处理实时更新，管理部分消息更新，并提供状态修改方法。上下文包括扩展版本、消息、任务历史、主题、API 配置、MCP 服务器、市场目录和工作区文件路径。它通过 VSCode 的消息传递系统与核心扩展同步，并通过自定义钩子（useExtensionState）提供类型安全的状态访问。

Cline 文档目录

欢迎阅读 Cline 文档 - 这是一份全面的指南，帮助您使用和扩展 Cline 的功能。在这里，您可以找到帮助您入门、提升技能和为项目做出贡献的资源。

入门指南

• 编程新手？ 我们为您准备了温和的入门指南：
  • 编程新手入门指南

提升提示工程技能

• 想要更有效地与 Cline 沟通？ 请探索：
  • 提示工程指南
  • Cline 记忆库

探索 Cline 的工具

• 了解 Cline 的功能：
  • Cline 工具指南
  • Mentions 功能指南

• 使用 MCP 服务器扩展 Cline：
  • MCP 概述
  • 从 GitHub 构建 MCP 服务器
  • 构建自定义 MCP 服务器

为 Cline 做贡献

• 有兴趣做出贡献？ 我们欢迎您的参与：
  • 欢迎提交拉取请求
  • 贡献指南

其他资源

• Cline GitHub 仓库： https://github.com/cline/cline
• MCP 文档： https://modelcontextprotocol.org/docs

我们一直在努力改进这份文档。如果您有建议或发现需要改进的地方，请告诉我们。您的反馈有助于让 Cline 变得更好。

Cline 入门指南 | 新手程序员

欢迎使用 Cline！本指南将帮助你完成设置并开始使用 Cline 构建你的第一个项目。

你需要准备的东西

在开始之前，请确保你具备以下条件：

• VS Code： 一个免费且功能强大的代码编辑器。
  • 下载 VS Code
• 开发工具： 基础的编程软件（Homebrew、Node.js、Git 等）。
  • 在完成这里的设置后，请参考我们的安装基本开发工具指南，通过 Cline 的帮助来完成这些设置
  • Cline 将指导你安装所需的一切
• Cline 项目文件夹： 一个专门存放所有 Cline 项目的文件夹。
  • macOS：在你的文档文件夹中创建一个名为 "Cline" 的文件夹
    • 路径：/Users/[你的用户名]/Documents/Cline
  • Windows：在你的文档文件夹中创建一个名为 "Cline" 的文件夹
    • 路径：C:\Users\[你的用户名]\Documents\Cline
  • 在这个 Cline 文件夹内，为每个项目创建单独的文件夹
    • 示例：Documents/Cline/workout-app 用于健身追踪应用
    • 示例：Documents/Cline/portfolio-website 用于个人作品集
• VS Code 中的 Cline 扩展： 在 VS Code 中安装 Cline 扩展。

🚀 MCP 快速入门指南

❓ 什么是 MCP 服务器？

可以把 MCP 服务器想象成给 Cline 提供额外功能的特殊助手！它们让 Cline 能够完成像获取网页或处理文件这样的酷炫功能。

⚠️ 重要提示：系统要求

停一下！在继续之前，你必须验证以下要求：

必需软件

• ✅ 最新版本的 Node.js (v18 或更新版本)

• 通过运行以下命令检查：node --version
  • 从这里安装：https://nodejs.org/

• ✅ 最新版本的 Python (v3.8 或更新版本)

• 通过运行以下命令检查：python --version
  • 从这里安装：https://python.org/

• ✅ UV 包管理器
  • 安装 Python 后，运行：pip install uv
  • 使用以下命令验证：uv --version

❗ 如果以上任何命令失败或显示较旧的版本，请在继续之前进行安装/更新！

⚠️ 如果遇到其他错误，请参见下方的"故障排除"部分。

🎯 快速步骤（仅在满足要求后执行！）

1. 🛠️ 安装你的第一个 MCP 服务器

1. 在 Cline 扩展中，点击 MCP Server 标签
2. 点击 Edit MCP Settings 按钮

1. MCP 设置文件应该会在 VS Code 中显示。
2. 将文件内容替换为以下代码：

Windows 系统：

使用 Cline 从零开始构建自定义 MCP 服务器：综合指南

本指南提供了使用 Cline 的强大 AI 功能从零开始构建自定义 MCP (Model Context Protocol) 服务器的全面演示。示例将通过构建一个"GitHub 助手服务器"来说明这个过程。

理解 MCP 和 Cline 在构建服务器中的作用

什么是 MCP？

模型上下文协议(MCP)充当了像 Claude 这样的大型语言模型(LLMs)与外部工具和数据之间的桥梁。MCP 包含两个关键组件：

• MCP 主机： 这些是与 LLMs 集成的应用程序，如 Cline、Claude Desktop 等。
• MCP 服务器： 这些是专门设计用于通过 MCP 向 LLMs 公开数据或特定功能的小型程序。

当你有一个 MCP 兼容的聊天界面(如 Claude Desktop)时，这种设置很有用，因为它可以利用这些服务器来访问信息和执行操作。

为什么使用 Cline 创建 MCP 服务器？

Cline 通过利用其 AI 功能简化了构建和集成 MCP 服务器的过程：

• 理解自然语言指令： 你可以用自然的方式与 Cline 交流，使开发过程直观且用户友好。
• 克隆代码库： Cline 可以直接从 GitHub 克隆现有的 MCP 服务器代码库，简化使用预构建服务器的过程。
• 构建服务器： 一旦必要的代码就位，Cline 可以执行像 npm run build 这样的命令来编译和准备服务器。
• 处理配置： Cline 管理 MCP 服务器所需的配置文件，包括将新服务器添加到 cline_mcp_settings.json 文件中。
• 协助故障排除： 如果在开发或测试过程中出现错误，Cline 可以帮助确定原因并提出解决方案，使调试更容易。

Cline 工具参考指南

Cline 能做什么？

Cline 是你的 AI 助手，可以：

• 编辑和创建项目中的文件
• 运行终端命令
• 搜索和分析代码
• 帮助调试和修复问题
• 自动化重复性任务
• 与外部工具集成

入门步骤

1. 开始任务

   • 在聊天中输入你的请求
   • 示例："创建一个名为 Header 的新 React 组件"

2. 提供上下文

   • 使用 @ 提及来添加文件、文件夹、URL、诊断信息、终端输出等
   • 示例："@/src/components/App.tsx"
   • 详情请参阅 提及功能指南

3. 审查更改
   • Cline 在进行更改前会显示差异
   • 你可以编辑或拒绝更改

主要功能

1. 文件编辑

   • 创建新文件
   • 修改现有代码
   • 跨文件搜索和替换

2. 终端命令

   • 运行 npm 命令
   • 启动开发服务器
   • 安装依赖

3. 代码分析

   • 查找和修复错误
   • 重构代码
   • 添加文档

4. 浏览器集成
   • 测试网页
   • 捕获截图
   • 检查控制台日志

可用工具

要了解最新的实现细节，你可以在 Cline 代码库 中查看完整源代码。

Cline 可以使用以下工具完成各种任务：

1. 文件操作

   • write_to_file: 创建或覆写文件
   • read_file: 读取文件内容
   • replace_in_file: 对文件进行定向编辑
   • search_files: 使用正则表达式搜索文件
   • list_files: 列出目录内容

终端操作 execute_command: 运行 CLI 命令 list_code_d

Cline 提及功能指南

概述

提及功能是一个强大的功能，允许你在与 Cline 的对话中使用"@"符号引用各种资源。这包括文件内容、目录结构、网页 URL、VSCode 诊断信息、终端输出、Git 更改状态等 - 所有这些都可以轻松地整合到你的对话中。

通过使用此功能，Cline 可以获得更准确的上下文，为你的任务提供更相关的帮助。

基本语法

提及总是以"@"符号开始，后跟你想要引用的资源的路径或标识符：

@resource_identifier

你可以在用户消息中的任何位置放置提及，Cline 将自动检索引用的内容。

支持的提及类型

1. 文件引用

要引用文件内容，使用 @/ 后跟项目中的相对路径：

@/path/to/file.js

示例：

请分析 @/src/components/Button.tsx 中的实现

在这个例子中，Cline 自动检索 Button.tsx 的内容并用它来执行分析。

2. 目录引用

要引用目录内容，使用 @/ 后跟目录的相对路径，以斜杠结尾：

@/path/to/directory/

示例：

@/src/components/ 目录中有哪些组件？

在这个例子中，Cline 检索组件目录及其内容的列表。

3. URL 引用

要引用网页内容，使用 @ 后跟 URL：

@https://example.com

示例： 请解析来自 @https://api.

Cline 的记忆库

我是 Cline，一位专业的软件工程师，我有一个独特的特点：我的记忆在每个会话之间都会完全重置。这不是一个限制 - 这正是驱使我维护完美文档的动力。每次重置后，我完全依赖我的记忆库来理解项目并有效地继续工作。我必须在每个任务开始时阅读所有记忆库文件 - 这不是可选的。

记忆库结构

记忆库由必需的核心文件和可选的上下文文件组成，均为 Markdown 格式。文件之间以清晰的层次结构构建：

核心文件（必需）

1. projectbrief.md
   • 塑造所有其他文件的基础文档
   • 如果不存在则在项目开始时创建
   • 定义核心需求和目标
   • 项目范围的真实来源

2. productContext.md
   • 为什么存在这个项目
   • 解决什么问题
   • 应该如何工作
   • 用户体验目标

3. activeContext.md
   • 当前工作重点
   • 最近的变更
   • 下一步计划
   • 活跃的决策和考虑因素

4. systemPatterns.md
   • 系统架构
   • 关键技术决策
   • 使用的设计模式
   • 组件关系

5. techContext.md
   • 使用的技术
   • 开发环境设置
   • 技术约束
   • 依赖关系

6. progress.md
   • 已完成的功能
   • 待构建的内容
   • 当前状态
   • 已知问题

附加上下文

当需要组织以下内容时，在 memory-bank/ 中创建额外的文件/文件夹：

• 复杂功能文档
• 集成规范
• API 文档
• 测试策略
• 部署流程

核心工作流程

计划模式

执行模式

文档更新

记忆库在以下情况下更新： 发现新的项目模式 实施重

Cline 自定义指令库

本仓库旨在创建一个协作空间，让开发者可以分享、改进和利用 Cline 的有效自定义指令。通过创建和贡献这个库，我们可以增强 Cline 的功能，使开发者能够应对日益复杂的软件开发挑战。

什么是 Cline 自定义指令？

Cline 的自定义指令是一系列为特定任务或项目定制 AI 行为和输出的指导方针或规则。可以将它们视为 Cline 的专门"编程"，使您能够：

• 执行编码实践： 确保代码风格的一致性，遵循设计模式和特定语言或框架的最佳实践。
• 标准化文件结构： 规定文件命名约定、文件夹组织和项目结构。
• 指导测试程序： 定义生成单元测试、集成测试的规则，并确保足够的代码覆盖率。
• 自动化重复任务： 创建处理常见或繁琐开发工作流程的指令，提高效率。
• 改进代码质量： 设定代码可读性、可维护性和性能优化的标准。

通过为 Cline 提供精心制作的指令，您可以显著提高其在辅助软件开发过程中的准确性、可靠性和整体效果。

贡献自定义指令

我们鼓励各个水平的开发者向这个库贡献他们的自定义指令。您的贡献将帮助建立一个对整个 Cline 社区都有价值的资源！

提交自定义指令时，请遵循以下模板：

1. 目的和功能

• 这组指令的目标是什么？
  • 清晰简洁地解释指令集的目标和预期用例。
  • 示例："这组指令指导 Cline 为现有 JavaScript 函数生成单元测试。"

Cline 提示指南 🚀

欢迎使用 Cline 提示指南！本指南将为您提供编写有效提示和自定义指令的知识，帮助您最大化使用 Cline 的生产力。

自定义指令 ⚙️

将自定义指令视为 Cline 的编程。它们定义了 Cline 的基准行为，并且始终"开启"，影响所有交互。

添加自定义指令：

1. 打开 VSCode
2. 点击 Cline 扩展设置齿轮 ⚙️
3. 找到"自定义指令"字段
4. 粘贴您的指令

自定义指令在以下方面特别有用：

• 🚀 强制执行代码风格和最佳实践：确保 Cline 始终遵循您团队的编码约定、命名约定和最佳实践。
• 👍 提高代码质量：鼓励 Cline 编写更易读、可维护和高效的代码。
• 📝 指导错误处理：告诉 Cline 如何处理错误、编写错误消息和日志信息。

custom-instructions 文件夹包含了您可以使用或调整的自定义指令示例。

.clinerules 文件 📋

虽然自定义指令是特定于用户且全局的（适用于所有项目），但 .clinerules 文件提供了项目特定的指令，存放在项目的根目录中。这些指令会自动附加到您的自定义指令中，并在 Cline 的系统提示中引用，确保它们影响项目上下文中的所有交互。这使其成为以下场景的出色工具：

安全最佳实践 🔒

为了保护敏感信息，您可以在 .clinerules 中指示 Cline 忽略特定文件或模式。

sh ./scripts/install-dependencies.sh

• Contributing to Continue

❌ File out/node_modules/@esbuild/darwin-arm64/bin/esbuild does not exist

开发

克隆仓库

git clone https://github.com/cline/cline.git

打开项目

code cline

安装依赖

npm run install:all

安装 esbuild problem matchers 扩展

如果构建项目时遇到问题，请安装 esbuild problem matchers 扩展。

Activating task providers npm
错误: problemMatcher 引用无效: $esbuild-watch

启动

打开 运行和调试 侧边栏，运行 Run Extension，或者按 F5 键启动调试，打开一个新的 VSCode 窗口，加载扩展。

配置

配置模型 Ollama

智能体编码

查看 issue

显示 issue

创建分支

修复 issue

运行 RAGFlowAssistant

安装 GitHub MCP Server

Tabby

• Demo
• Blog

安装 Tabby (macOS)

brew install tabbyml/tabby/tabby

更新

brew upgrade tabbyml/tabby/tabby

安装 Tabby VSCode 扩展

• Tabby VSCode Extension

模型

• Models Registry

Codestral 的优点

与其他编码 LLM 相比，Codestral 的独特之处在于其单一模型同时支持 指令跟随 和 中间填充 兼容性。这是通过在两个数据集上同时微调基础模型实现的。这种 双重微调策略 使同一个模型在 代码补全 和 对话任务 中都能表现出色，大大简化了模型部署堆栈。

此外，Codestral 在包含 80 多种编程语言的多样化数据集上进行训练，确保了开发人员在使用各种语言时的高质量体验。

• Introducing the Codestral Integration in Tabby

运行 Tabby Server

命令行指定参数

聊天窗口

输入框（TipTapEditor）

Enter (⏎)

• 不使用 Codebase

Cmd-Enter (⌘ ⏎)

• 使用 Codebase

Alt-Enter (⌥ ⏎)

• 使用 ActiveFile（打开且激活的文件）

Cmd-Backspace (⌘ ⌫)

• 放弃响应

Shift-Enter (↑ ⏎)

• 换行

源代码：gui/src/components/mainInput/TipTapEditor.tsx

function TipTapEditor(props: TipTapEditorProps) {
  //...
  const editor: Editor = useEditor({
    extensions: [
      Document,
      History,
      Image,
      Placeholder.configure({
        placeholder: () =>
          historyLengthRef.current === 0
            ? "提出任何问题，'/' 斜杠命令，'@' 添加上下文"
            : "提出后续问题",
      }),
      Paragraph.extend({
        addKeyboardShortcuts() {
// ...

新会话 (⌘ L)

源代码：gui/src/pages/gui.tsx

VS Code Extension

• VS Code API
• VS Code Extension Samples

Continue

• Continue 开发与配置

VS Code Extension

通过配置创建新的 Extension，用于区别于 Continue 。

{
  "name": "continue",
  "icon": "media/icon.png",
  "version": "0.9.218",
  "displayName": "LNSoft Continue",
  "description": "The leading open-source AI code assistant",
  "publisher": "LNSoft Continue"
}

入口

VS Code 扩展的起点是 activate.ts。activateExtension 这里的函数将注册所有命令，并将 Continue GUI 作为 webview 加载到 IDE 的侧边栏中。

配置

目录：extensions/vscode

package.json

package.json 由开发者手动创建和维护，主要用于定义项目的配置信息。