零基础入门 VS Code cline:安装、配置与使用一篇搞定
开篇之前,先介绍一些目前火热的几款 ai 编码插件。Cusor、Trae、Cline。
1. Cusor
https://docs.cursor.com/welcome
1.1. 界面

1.2. 配置模型
Settings – Models – API Kes。开启模型即可对话。
不支持自定义模型,只能通过模型官网或购买 Cusor Pro 版本。

2. Trae
https://docs.trae.cn/ide/what-is-trae?_lang=zh
2.1. 界面

3. Cline
3.1. 官网
Cline 默认英文版本,也会有对应的中文版本。
官网:
中文版本网站:
https://github.com/HybridTalentComputing/cline-chinese
3.2. 界面
这里推荐安装「Cline Chinese」版本,是因为配置页中可以添加「自定义提示词」。英文版不知版本原因还是什么没有找到此选项。

3.3. 配置

3.3.1. API 供应商
Cline 集成了丰富的 Ai 供应商,只需要填写对应的 ApiKey 即可。
这里推荐使用 302.ai。302.ai 最大优势集成了国外的一些模型(无需科学上网)。
API 供应商:
OpenAI 兼容平台
Base URL:
https://api.302.ai/v1
API Key:
管理后台 – API Keys
Model ID:
claude-3-7-sonnet-latest(推荐,官网也说最适合与 Claude 模型配合使用。尝试过 DeepSeek 会超出上下文)
管理后台 – API Keys:

Model ID:

3.3.2. 自定义提示词
https://docs.cline.bot/prompting/cline-memory-bank
也有中文版的提示词,这里推荐使用英文版。中英文指定的 .clinerules 文件夹名称不同(实际也无所谓)
# Cline's Memory Bank
I am Cline, an expert software engineer with a unique characteristic: my memory resets completely between sessions. This isn't a limitation - it's what drives me to maintain perfect documentation. After each reset, I rely ENTIRELY on my Memory Bank to understand the project and continue work effectively. I MUST read ALL memory bank files at the start of EVERY task - this is not optional.
## Memory Bank Structure
The Memory Bank consists of core files and optional context files, all in Markdown format. Files build upon each other in a clear hierarchy:
flowchart TD
PB[projectbrief.md] --> PC[productContext.md]
PB --> SP[systemPatterns.md]
PB --> TC[techContext.md]
PC --> AC[activeContext.md]
SP --> AC
TC --> AC
AC --> P[progress.md]
### Core Files (Required)
1. `projectbrief.md`
- Foundation document that shapes all other files
- Created at project start if it doesn't exist
- Defines core requirements and goals
- Source of truth for project scope
2. `productContext.md`
- Why this project exists
- Problems it solves
- How it should work
- User experience goals
3. `activeContext.md`
- Current work focus
- Recent changes
- Next steps
- Active decisions and considerations
- Important patterns and preferences
- Learnings and project insights
4. `systemPatterns.md`
- System architecture
- Key technical decisions
- Design patterns in use
- Component relationships
- Critical implementation paths
5. `techContext.md`
- Technologies used
- Development setup
- Technical constraints
- Dependencies
- Tool usage patterns
6. `progress.md`
- What works
- What's left to build
- Current status
- Known issues
- Evolution of project decisions
### Additional Context
Create additional files/folders within memory-bank/ when they help organize:
- Complex feature documentation
- Integration specifications
- API documentation
- Testing strategies
- Deployment procedures
## Core Workflows
### Plan Mode
flowchart TD
Start[Start] --> ReadFiles[Read Memory Bank]
ReadFiles --> CheckFiles{Files Complete?}
CheckFiles -->|No| Plan[Create Plan]
Plan --> Document[Document in Chat]
CheckFiles -->|Yes| Verify[Verify Context]
Verify --> Strategy[Develop Strategy]
Strategy --> Present[Present Approach]
### Act Mode
flowchart TD
Start[Start] --> Context[Check Memory Bank]
Context --> Update[Update Documentation]
Update --> Execute[Execute Task]
Execute --> Document[Document Changes]
## Documentation Updates
Memory Bank updates occur when:
1. Discovering new project patterns
2. After implementing significant changes
3. When user requests with **update memory bank** (MUST review ALL files)
4. When context needs clarification
flowchart TD
Start[Update Process]
subgraph Process
P1[Review ALL Files]
P2[Document Current State]
P3[Clarify Next Steps]
P4[Document Insights & Patterns]
P1 --> P2 --> P3 --> P4
end
Start --> Process
Note: When triggered by **update memory bank**, I MUST review every memory bank file, even if some don't require updates. Focus particularly on activeContext.md and progress.md as they track current state.
REMEMBER: After every memory reset, I begin completely fresh. The Memory Bank is my only link to previous work. It must be maintained with precision and clarity, as my effectiveness depends entirely on its accuracy.
3.4. 执行
一定要在「计划模式(Plan)」下执行。
3.4.1. 假设任务需求
使用vue3+typescript构建一个含有权限的中台系统,风格及功能参考阿里云或其他大厂。请先给我生成详细的开发方案,用于评估后续工作。

3.4.2. 生成 clinerules 和 memory-bank
项目根目录下创建 .clinerules 和 memory-bank 文件夹,然后告诉以下需求:
1. 在@/.clinerules/ 目录下,添加符合项目设计的规则文件
2. 执行 initialize memory bank,进行项目初始化记忆库
耐心等待 ai 生成,完成后,确认与自己的需求匹配后,点击「执行模型(Act)」,就可以执行文件写入操作了。
耐心等待 ai 生成,它会生成很详尽的产品文档、技术文档及预估周期等信息。具体可以到 .clinerules 和 memory-bank 进行查看。

3.4.3. update memory bank
每一次任务完成后,当代码编译通过,第一时间提交代码。避免下一次任务将正确的代码修改错误。
提交代码后,更新 memory-bank。执行以下代码,ai 会自动更新 memroy-bank 文件夹下的项目迭代情况。
update memory bank
3.5. 任务栏

- 灰色:助手回复。
- 黄色:读取文件。
- 白色:用户指令。
- 蓝色:新文件批准。
- 绿色:任务完成。
- 紫色:终端命令。
3.6. 新建/继续任务
点击「+」则开启一个新的任务。
点击「近期任务」,则继续上一次未完成的任务。

4. 注意事项
- 自始至终尽可能保证模型一致性。不同模型间会互相推翻。
- 做好版本管理。当任务完成,编译通过后,第一时间提交代码。避免下一次任务将正确的代码修改错误。