Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathopencode-guide.html
More file actions
1700 lines (1531 loc) · 64.2 KB
/
Copy pathopencode-guide.html
File metadata and controls
1700 lines (1531 loc) · 64.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="opencode 详细介绍与使用技巧 - 一款现代化的 AI 编程助手工具" />
<meta name="keywords" content="opencode,AI编程,编程助手,开发工具,使用教程" />
<meta name="author" content="Jackson" />
<title>opencode 详细介绍与使用技巧 - CodeClub</title>
<link rel="icon" type="image/x-icon" href="../img/logo.png" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link href="../lib/font-awesome/css/all.min.css" rel="stylesheet" />
<style>
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--bg-color: #f8fafc;
--card-bg: #ffffff;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--code-bg: #f1f5f9;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--radius-sm: 8px;
--radius-md: 12px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
}
/* Navigation */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--text-primary);
font-weight: 700;
font-size: 1.25rem;
}
.navbar-brand img {
width: 32px;
height: 32px;
border-radius: 8px;
}
.navbar-nav {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.nav-link {
text-decoration: none;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.9rem;
padding: 8px 16px;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.nav-link:hover {
color: var(--primary-color);
background: rgba(59, 130, 246, 0.1);
}
/* Article Header */
.article-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 24px 60px;
text-align: center;
color: white;
}
.article-meta {
max-width: 800px;
margin: 0 auto;
}
.article-category {
display: inline-block;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 20px;
}
.article-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.3;
}
.article-info {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
}
.article-info span {
display: flex;
align-items: center;
gap: 8px;
}
/* Article Content */
.article-container {
max-width: 800px;
margin: 0 auto;
padding: 60px 24px;
}
.article-content {
background: var(--card-bg);
border-radius: var(--radius-md);
padding: 48px;
box-shadow: var(--shadow-sm);
}
.article-content h2 {
font-size: 1.75rem;
font-weight: 600;
color: var(--text-primary);
margin-top: 48px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-color);
}
.article-content h3 {
font-size: 1.375rem;
font-weight: 600;
color: var(--text-primary);
margin-top: 32px;
margin-bottom: 16px;
}
.article-content p {
margin-bottom: 20px;
color: var(--text-secondary);
font-size: 1.0625rem;
}
.article-content ul,
.article-content ol {
margin-bottom: 20px;
padding-left: 28px;
}
.article-content li {
margin-bottom: 12px;
color: var(--text-secondary);
}
.article-content strong {
color: var(--text-primary);
font-weight: 600;
}
.article-content code {
background: var(--code-bg);
padding: 3px 8px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9em;
color: #e83e8c;
}
.article-content pre {
background: #1e293b;
color: #e2e8f0;
padding: 20px;
border-radius: var(--radius-md);
overflow-x: auto;
margin: 24px 0;
}
.article-content pre code {
background: transparent;
color: inherit;
padding: 0;
}
.article-content blockquote {
border-left: 4px solid var(--primary-color);
padding-left: 24px;
margin: 24px 0;
color: var(--text-secondary);
font-style: italic;
background: var(--bg-color);
padding: 20px 20px 20px 24px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tip-box {
background: #f0f9ff;
border-left: 4px solid var(--primary-color);
padding: 20px 24px;
margin: 24px 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tip-box-title {
font-weight: 600;
color: var(--primary-color);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
/* Footer */
.footer {
background: white;
border-top: 1px solid var(--border-color);
padding: 48px 24px 24px;
margin-top: 64px;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
text-align: center;
}
.social-links {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
}
.social-link {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-color);
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition);
}
.social-link:hover {
background: var(--primary-color);
color: white;
}
.footer-text {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Responsive */
@media (max-width: 768px) {
.article-title {
font-size: 1.75rem;
}
.article-content {
padding: 28px;
}
.navbar-nav {
display: none;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="navbar-container">
<a class="navbar-brand" href="../index.html">
<img src="../img/logo.png" alt="CodeClub" />
<span>CodeClub</span>
</a>
<ul class="navbar-nav">
<li><a class="nav-link" href="../index.html">首页</a></li>
<li><a class="nav-link" href="../nav.html">网址导航</a></li>
<li><a class="nav-link" href="./">博客</a></li>
<li><a class="nav-link" href="../wiki/index.html" target="_blank">WiKi</a></li>
<li><a class="nav-link" href="../book.html">图书</a></li>
<li><a class="nav-link" href="../contact.html">联系我</a></li>
<li><a class="nav-link" href="../about.html">关于我</a></li>
</ul>
</div>
</nav>
<!-- Article Header -->
<header class="article-header">
<div class="article-meta">
<span class="article-category">工具推荐</span>
<h1 class="article-title">opencode 详细介绍与使用技巧</h1>
<div class="article-info">
<span><i class="fas fa-user"></i> Jackson</span>
<span><i class="fas fa-calendar"></i> 2026年2月16日</span>
<span><i class="fas fa-clock"></i> 10 分钟阅读</span>
</div>
</div>
</header>
<!-- Article Content -->
<article class="article-container">
<div class="article-content">
<p>
在 AI 技术飞速发展的今天，程序员的工作方式也在发生巨大变化。<strong>opencode</strong> 作为一款现代化的 AI
编程助手工具， 正在帮助越来越多的开发者提升编码效率。本文将详细介绍 opencode
的功能特性，并分享一些实用的使用技巧。
</p>
<h2>什么是 opencode？</h2>
<p>
opencode 是一款基于大语言模型的智能编程助手，它深度集成在开发环境中，能够实时理解代码上下文，
提供智能代码补全、代码解释、Bug 修复建议等功能。与传统的代码补全工具不同，opencode 不仅能补全代码，
还能理解开发者的意图，提供更智能的编程辅助。
</p>
<h2>安装与配置</h2>
<h3>1. 系统要求</h3>
<p>在安装 opencode 之前，请确保你的系统满足以下要求：</p>
<ul>
<li><strong>操作系统</strong>：Windows 10/11、macOS 10.15+、Linux (Ubuntu 18.04+)</li>
<li><strong>内存</strong>：至少 8GB RAM（推荐 16GB）</li>
<li><strong>网络</strong>：需要稳定的互联网连接</li>
<li><strong>编辑器</strong>：VS Code 1.70+ 或 JetBrains IDE 2022.1+</li>
</ul>
<h3>2. 下载安装</h3>
<p><strong>方式一：通过 VS Code 安装（推荐）</strong></p>
<ol>
<li>打开 VS Code</li>
<li>点击左侧活动栏的 Extensions（扩展）图标</li>
<li>在搜索框输入 "opencode"</li>
<li>找到 opencode 官方扩展，点击 Install</li>
<li>安装完成后重启 VS Code</li>
</ol>
<p><strong>方式二：JetBrains IDE 安装</strong></p>
<ol>
<li>打开 JetBrains IDE（IntelliJ IDEA、PyCharm 等）</li>
<li>进入 Settings/Preferences → Plugins</li>
<li>切换到 Marketplace 标签</li>
<li>搜索 "opencode" 并安装</li>
<li>重启 IDE 完成安装</li>
</ol>
<p><strong>方式三：命令行安装（CLI）</strong></p>
<p>对于喜欢命令行的开发者，可以使用 npm 或 pip 直接安装 opencode CLI：</p>
<p><strong>使用 npm 安装（适用于 Node.js 环境）：</strong></p>
<pre><code># 全局安装 opencode CLI
npm install -g @opencode/cli
# 验证安装
opencode --version
# 初始化配置
opencode init</code></pre>
<p><strong>使用 pip 安装（适用于 Python 环境）：</strong></p>
<pre><code># 安装 opencode CLI
pip install opencode-cli
# 验证安装
opencode --version
# 查看帮助信息
opencode --help</code></pre>
<p><strong>CLI 常用命令：</strong></p>
<ul>
<li><code>opencode login</code> - 登录账户</li>
<li><code>opencode config</code> - 配置设置</li>
<li><code>opencode status</code> - 查看服务状态</li>
<li><code>opencode update</code> - 更新到最新版本</li>
</ul>
<h3>3. 初始配置</h3>
<p>安装完成后，需要进行简单的配置：</p>
<ol>
<li><strong>登录账户</strong>：点击编辑器右侧的 opencode 图标，使用邮箱或 GitHub 账号登录</li>
<li><strong>选择计划</strong>：选择适合的计划（免费版或 Pro 版）</li>
<li><strong>配置快捷键</strong>：在设置中自定义快捷键，如接受建议、打开聊天等</li>
<li><strong>隐私设置</strong>：根据需求配置代码分享和隐私选项</li>
</ol>
<div class="tip-box">
<div class="tip-box-title"><i class="fas fa-lightbulb"></i> 配置建议</div>
<p>首次使用时建议开启"自动补全"和"代码解释"功能，这是 opencode 最核心的能力。</p>
</div>
<h2>核心功能特性</h2>
<h3>1. 智能代码补全</h3>
<p>opencode 的核心功能是其强大的代码补全能力。它能够：</p>
<ul>
<li><strong>理解上下文</strong>：不仅根据当前行，还能理解整个函数、类的上下文来提供补全建议</li>
<li><strong>自然语言生成</strong>：通过注释描述，自动生成对应的代码实现</li>
<li><strong>多语言支持</strong>：支持 Python、JavaScript、Java、Go 等主流编程语言</li>
<li><strong>智能预测</strong>：预测开发者接下来可能要写的代码</li>
</ul>
<h3>2. 代码解释与文档</h3>
<p>遇到看不懂的代码？opencode 可以帮你：</p>
<ul>
<li>选中代码，自动生成详细的注释说明</li>
<li>解释复杂算法和逻辑的实现原理</li>
<li>将代码转换为自然语言描述</li>
</ul>
<h3>3. Bug 检测与修复</h3>
<p>opencode 能够识别代码中的潜在问题：</p>
<ul>
<li>实时检测代码中的错误和异常</li>
<li>提供修复建议和代码示例</li>
<li>识别性能瓶颈并提出优化方案</li>
</ul>
<h3>4. 代码重构建议</h3>
<p>帮助改善代码质量：</p>
<ul>
<li>识别代码坏味道（Code Smell）</li>
<li>提供重构建议和最佳实践</li>
<li>自动优化代码结构</li>
</ul>
<h2>使用技巧</h2>
<h3>技巧一：善用注释驱动开发</h3>
<p>opencode 特别擅长理解自然语言描述。在写代码之前，先用注释写下你想要实现的功能：</p>
<pre><code># 读取 CSV 文件并计算平均值
import pandas as pd
def calculate_average(filename):
# opencode 会根据注释自动补全代码实现
df = pd.read_csv(filename)
return df.mean()</code></pre>
<div class="tip-box">
<div class="tip-box-title"><i class="fas fa-lightbulb"></i> 小贴士</div>
<p>注释越详细，opencode 生成的代码就越符合你的预期。</p>
</div>
<h3>技巧二：逐步引导补全</h3>
<p>不要期望一次生成完美代码。可以采用逐步引导的方式：</p>
<ol>
<li>先写函数签名和基本框架</li>
<li>让 opencode 补全函数体</li>
<li>检查并调整生成的代码</li>
<li>继续下一步逻辑</li>
</ol>
<h3>技巧三：利用 Tab 键快速接受建议</h3>
<p>
当 opencode 给出灰色提示时，按 <strong>Tab</strong> 键即可快速接受建议。
如果建议过长，可以只接受一部分，然后继续写，它会根据新的上下文重新生成建议。
</p>
<h3>技巧四：多方案对比</h3>
<p>
有时候 opencode 会提供多个补全方案（通常用 <code>Ctrl + →</code> 或 <code>Option + ]</code> 切换）。
多尝试几个方案，选择最适合当前场景的实现方式。
</p>
<h3>技巧五：让 AI 解释复杂代码</h3>
<p>对于理解困难的代码段，可以选中后使用 opencode 的解释功能：</p>
<pre><code># 选中以下代码，然后右键选择"解释代码"
result = list(map(lambda x: x**2, filter(lambda x: x % 2 == 0, numbers)))</code></pre>
<p>opencode 会解释这段代码使用了函数式编程，先过滤出偶数，然后计算平方。</p>
<h2>Skills 和 Agent 使用说明</h2>
<h3>什么是 Skills？</h3>
<p>
<strong>Skills</strong> 是 opencode 的专项能力模块，每个 Skill 都针对特定场景进行了优化。通过启用不同的
Skills，你可以让 opencode 在特定领域表现更出色。
</p>
<h3>常用 Skills 介绍</h3>
<p><strong>1. Code Review Skill</strong></p>
<ul>
<li><strong>功能</strong>：自动审查代码，发现潜在问题</li>
<li><strong>使用场景</strong>：提交代码前进行自查、Code Review 辅助</li>
<li><strong>启用方法</strong>：输入 <code>/review</code> 或选择 Code Review Skill</li>
<li><strong>输出</strong>：详细的代码审查报告，包括问题描述、严重程度和修复建议</li>
</ul>
<p><strong>2. Docstring Skill</strong></p>
<ul>
<li><strong>功能</strong>：自动生成函数和类的文档字符串</li>
<li><strong>使用场景</strong>：为项目添加文档、理解他人代码</li>
<li><strong>启用方法</strong>：输入 <code>/doc</code> 或选择 Docstring Skill</li>
<li><strong>支持格式</strong>：Google Style、NumPy Style、reStructuredText 等</li>
</ul>
<p><strong>3. Test Case Skill</strong></p>
<ul>
<li><strong>功能</strong>：自动生成单元测试用例</li>
<li><strong>使用场景</strong>：提高代码覆盖率、TDD 开发</li>
<li><strong>启用方法</strong>：输入 <code>/test</code> 或选择 Test Case Skill</li>
<li><strong>支持框架</strong>：pytest、unittest、Jest 等主流测试框架</li>
</ul>
<p><strong>4. Git Commit Skill</strong></p>
<ul>
<li><strong>功能</strong>：根据代码变更自动生成规范的提交信息</li>
<li><strong>使用场景</strong>：保持提交历史清晰、遵循 Conventional Commits 规范</li>
<li><strong>启用方法</strong>：输入 <code>/commit</code> 或选择 Git Commit Skill</li>
<li><strong>输出示例</strong>：<code>feat: add user authentication module with JWT support</code></li>
</ul>
<p><strong>5. Refactor Skill</strong></p>
<ul>
<li><strong>功能</strong>：识别代码坏味道并提供重构建议</li>
<li><strong>使用场景</strong>：技术债务清理、代码优化</li>
<li><strong>启用方法</strong>：输入 <code>/refactor</code> 或选择 Refactor Skill</li>
<li><strong>识别问题</strong>：重复代码、过长函数、魔法数字等</li>
</ul>
<p><strong>6. Explain Skill</strong></p>
<ul>
<li><strong>功能</strong>：深度解释代码逻辑、算法原理和设计思路</li>
<li><strong>使用场景</strong>：理解复杂代码、学习新技术、Code Review</li>
<li><strong>启用方法</strong>：选中代码后输入 <code>/explain</code> 或右键选择 Explain</li>
<li><strong>特点</strong>：提供多层级解释，从高层设计到具体实现细节</li>
</ul>
<p><strong>7. Fix Skill</strong></p>
<ul>
<li><strong>功能</strong>：自动检测并修复代码中的错误</li>
<li><strong>使用场景</strong>：快速修复编译错误、运行时异常、逻辑错误</li>
<li><strong>启用方法</strong>：输入 <code>/fix</code> 或将光标放在错误行使用快捷键</li>
<li><strong>支持</strong>：语法错误、类型错误、空指针异常等常见问题</li>
</ul>
<p><strong>8. Optimize Skill</strong></p>
<ul>
<li><strong>功能</strong>：性能优化建议，提升代码执行效率</li>
<li><strong>使用场景</strong>：性能瓶颈分析、算法优化、资源管理</li>
<li><strong>启用方法</strong>：输入 <code>/optimize</code> 或选择 Optimize Skill</li>
<li><strong>优化范围</strong>：时间复杂度、空间复杂度、数据库查询、缓存策略</li>
</ul>
<h3>Skills 使用详解</h3>
<p><strong>如何调用 Skills</strong></p>
<p>opencode 提供多种方式调用 Skills：</p>
<ol>
<li><strong>斜杠命令</strong>：在编辑器中输入 <code>/</code> 后跟随 Skill 名称，如 <code>/review</code></li>
<li>
<strong>快捷键</strong>：
<ul>
<li><code>Ctrl/Cmd + Shift + P</code> 打开命令面板，搜索 opencode Skills</li>
<li><code>Ctrl/Cmd + K Ctrl/Cmd + S</code> 查看所有可用的 Skills 快捷键</li>
</ul>
</li>
<li><strong>右键菜单</strong>：选中代码后右键，在 opencode 菜单中选择对应的 Skill</li>
<li><strong>聊天窗口</strong>：在 opencode 侧边栏聊天窗口中输入 Skill 命令</li>
</ol>
<p><strong>Skill 使用示例</strong></p>
<p>以下是 Code Review Skill 的实际使用示例：</p>
<pre><code># 原始代码
@agent
class UserService:
def get_user(self, id):
user = db.query("SELECT * FROM users WHERE id = " + id)
return user
# 使用 /review 后，opencode 会输出：
## Code Review 报告
### 🔴 严重问题
1. **SQL 注入风险** (第4行)
- 问题：直接拼接 SQL 字符串，存在 SQL 注入漏洞
- 建议：使用参数化查询
- 修复：
```python
user = db.query("SELECT * FROM users WHERE id = ?", (id,))
```
### 🟡 警告
2. **缺少类型注解** (第3行)
- 建议添加参数和返回类型：
```python
def get_user(self, id: int) -> Optional[User]:
```
### 🟢 建议
3. **添加错误处理**
- 建议添加 try-except 块处理数据库异常</code></pre>
<p><strong>Skills 组合使用</strong></p>
<p>多个 Skills 可以组合使用，形成完整的工作流：</p>
<pre><code># 示例：完整的代码优化流程
# 1. 使用 /explain 理解代码
/explain
"请解释这段排序算法的实现原理"
# 2. 使用 /optimize 优化性能
/optimize
"这段代码在处理大数据量时较慢，请提供优化方案"
# 3. 使用 /refactor 重构代码
/refactor
"将这段代码重构为更简洁的实现"
# 4. 使用 /test 生成测试用例
/test
"为这个优化后的函数生成边界测试用例"
# 5. 使用 /doc 添加文档
/doc
"为这个函数添加详细的 Google Style 文档字符串"</code></pre>
<div class="tip-box">
<div class="tip-box-title"><i class="fas fa-lightbulb"></i> Skill 使用技巧</div>
<p>
在使用 Skills 时，提供越详细的上下文信息，得到的结果就越准确。可以在 Skill 命令后添加具体的要求或约束条件。
</p>
</div>
<h3>什么是 Agent？</h3>
<p>
<strong>Agent</strong> 是 opencode
的智能代理功能，它能够理解复杂的多步骤任务，并自主规划执行路径。与简单的代码补全不同，Agent 可以：
</p>
<ul>
<li>理解自然语言描述的任务目标</li>
<li>自主规划执行步骤</li>
<li>在多个文件间进行操作</li>
<li>执行命令行操作</li>
</ul>
<h3>Agent 使用场景</h3>
<p><strong>场景一：功能开发</strong></p>
<p>告诉 Agent 你要实现的功能，它会：</p>
<ol>
<li>分析项目结构和现有代码</li>
<li>创建或修改必要的文件</li>
<li>编写代码实现功能</li>
<li>生成测试用例</li>
</ol>
<pre><code># 示例指令
@agent 帮我添加一个用户注册功能，需要包含邮箱验证和密码加密</code></pre>
<p><strong>场景二：Bug 修复</strong></p>
<p>描述 Bug 现象，Agent 会：</p>
<ol>
<li>定位问题所在</li>
<li>分析根因</li>
<li>提供修复方案</li>
<li>验证修复结果</li>
</ol>
<p><strong>场景三：项目重构</strong></p>
<p>让 Agent 帮你进行大规模重构：</p>
<pre><code># 示例指令
@agent 将项目中的所有回调函数改为 async/await 形式</code></pre>
<h3>Agent 实际使用案例</h3>
<p><strong>案例一：搭建完整的 RESTful API</strong></p>
<p><strong>背景</strong>：需要为一个博客系统快速搭建后端 API。</p>
<p><strong>Agent 指令</strong>：</p>
<pre><code>@agent
请帮我创建一个完整的博客系统 RESTful API，使用 Python + FastAPI + SQLAlchemy。
需求：
1. 用户模块：注册、登录、JWT 认证
2. 文章模块：CRUD 操作、分页查询、标签管理
3. 评论模块：嵌套评论、评论审核
4. 数据库使用 PostgreSQL
5. 包含完整的错误处理和日志记录
6. 生成 API 文档和单元测试
项目结构参考：
- app/
- api/ # 路由层
- core/ # 核心配置
- models/ # 数据模型
- schemas/ # Pydantic 模型
- services/ # 业务逻辑
- tests/ # 测试文件
- requirements.txt
- alembic/ # 数据库迁移</code></pre>
<p><strong>Agent 执行过程</strong>：</p>
<ol>
<li><strong>需求分析</strong>：分析项目需求，确认技术栈选择</li>
<li><strong>创建项目结构</strong>：创建完整的目录结构和基础文件</li>
<li><strong>配置环境</strong>：生成 requirements.txt、Dockerfile、docker-compose.yml</li>
<li>
<strong>实现核心模块</strong>：
<ul>
<li>数据库模型（User、Post、Comment、Tag）</li>
<li>Pydantic schemas（请求/响应模型）</li>
<li>JWT 认证中间件</li>
<li>API 路由（包含完整的 CRUD）</li>
<li>业务逻辑层（Services）</li>
</ul>
</li>
<li><strong>添加测试</strong>：为每个 API 端点生成 pytest 测试用例</li>
<li><strong>生成文档</strong>：配置 Swagger/OpenAPI 自动文档</li>
</ol>
<p><strong>执行时间</strong>：约 3-5 分钟完成整个项目骨架。</p>
<p><strong>案例二：排查生产环境 Bug</strong></p>
<p><strong>背景</strong>：线上服务出现内存泄漏，需要快速定位和修复。</p>
<p><strong>Agent 指令</strong>：</p>
<pre><code>@agent
生产环境出现内存泄漏问题，请帮我分析和修复。
现象：
- 服务运行 2-3 小时后内存占用持续增长
- 最终触发 OOM 被系统杀掉
- 重启后恢复正常，但问题会重复出现
- 主要发生在处理大量图片上传时
项目信息：
- Node.js + Express 服务
- 使用 Sharp 库处理图片
- MongoDB 存储文件元数据
- Redis 做缓存
请帮我：
1. 分析可能的内存泄漏原因
2. 检查代码中未关闭的资源
3. 提供修复方案
4. 添加内存监控和告警</code></pre>
<p><strong>Agent 诊断过程</strong>：</p>
<ol>
<li><strong>代码扫描</strong>：分析图片处理相关的代码路径</li>
<li><strong>问题定位</strong>：发现 Sharp 实例未正确销毁，流对象未关闭</li>
<li>
<strong>根因分析</strong>：
<ul>
<li>每个请求创建新的 Sharp 实例但没有调用 destroy()</li>
<li>文件流未监听 'end' 事件及时清理</li>
<li>临时文件未删除</li>
<li>EventEmitter 监听器未移除</li>
</ul>
</li>
<li>
<strong>生成修复代码</strong>：
<pre><code>// 修复后的代码示例
async function processImage(file) {
const sharpInstance = sharp(file.path);
try {
const buffer = await sharpInstance
.resize(800, 600)
.jpeg({ quality: 80 })
.toBuffer();
return buffer;
} finally {
// 确保资源释放
sharpInstance.destroy();
fs.unlinkSync(file.path);
}
}</code></pre>
</li>
<li><strong>添加监控</strong>：集成 node-memwatch 和 Prometheus 监控</li>
</ol>
<p><strong>案例三：遗留系统现代化改造</strong></p>
<p><strong>背景</strong>：将旧的 Python 2 + Django 1.8 项目升级到现代技术栈。</p>
<p><strong>Agent 指令</strong>：</p>
<pre><code>@agent
请帮我将遗留的 Django 项目升级到现代技术栈。
当前状况：
- Python 2.7 + Django 1.8
- 使用老旧的函数视图
- 没有类型注解
- 同步阻塞 IO
- 测试覆盖率不足 20%
目标：
- 升级到 Python 3.11 + Django 4.2
- 迁移到类视图 + DRF
- 添加完整的类型注解
- 关键路径改为异步
- 测试覆盖率提升到 80%+
请制定详细的迁移计划，并执行：
1. 逐步升级依赖包
2. 修复 Python 2/3 兼容性问题
3. 重构视图层
4. 添加类型注解
5. 补充测试用例</code></pre>
<h3>Agent Teams - 团队协作模式</h3>
<p><strong>什么是 Agent Teams？</strong></p>
<p>
Agent Teams 是 opencode 的多 Agent 协作功能，允许同时启用多个 Specialized
Agent，每个负责特定领域，通过协作完成复杂任务。就像真实的开发团队一样，有前端专家、后端专家、测试专家等角色。
</p>
<p><strong>内置的 Team 角色</strong></p>
<ul>
<li>
<strong>@architect</strong> - 架构师 Agent
<ul>
<li>职责：系统架构设计、技术选型、方案评估</li>
<li>适用：项目初始规划、重大技术决策</li>
</ul>
</li>
<li>
<strong>@backend</strong> - 后端开发 Agent
<ul>
<li>职责：API 设计、数据库建模、业务逻辑实现</li>
<li>适用：后端功能开发、性能优化</li>
</ul>
</li>
<li>
<strong>@frontend</strong> - 前端开发 Agent
<ul>
<li>职责：UI 组件开发、状态管理、交互逻辑</li>
<li>适用：页面开发、组件库建设</li>
</ul>
</li>
<li>
<strong>@qa</strong> - 测试工程师 Agent
<ul>
<li>职责：测试用例设计、自动化测试、Bug 报告</li>
<li>适用：测试策略制定、覆盖率提升</li>
</ul>
</li>
<li>
<strong>@devops</strong> - DevOps 工程师 Agent
<ul>
<li>职责：CI/CD 配置、容器化、部署脚本</li>
<li>适用：流水线搭建、环境配置</li>
</ul>
</li>
</ul>
<p><strong>Agent Teams 使用示例</strong></p>
<p>以下是如何使用 Team 完成一个完整功能的开发：</p>
<pre><code># 启动一个新的功能开发任务
# 首先让架构师进行设计
@architect
请设计一个用户权限管理系统，支持 RBAC 模型。
需要包含：
- 用户、角色、权限三表关系
- 权限粒度到按钮级别
- 支持数据权限（只能查看自己部门的数据）
- 高性能的权限校验方案
输出：
- ER 图设计
- API 接口设计
- 技术方案文档
---
# 架构师完成设计后，分配给后端和前端开发
@backend
根据架构师的设计，实现用户权限管理后端：
1. 创建数据库模型（SQLAlchemy）
2. 实现权限校验装饰器
3. 开发管理 API（用户、角色、权限的 CRUD）
4. 实现登录和 JWT 认证
5. 添加单元测试
@frontend
同时开发前端管理界面：
1. 用户管理页面（列表、新增、编辑、分配角色）
2. 角色管理页面（权限树选择）
3. 权限管理页面（动态权限配置）
4. 与后端 API 对接
5. 添加前端权限控制（隐藏无权限的按钮）
---
# 开发完成后，QA 进行测试
@qa
为权限管理系统设计测试用例：
1. 正常场景测试（分配权限、验证权限）
2. 异常场景测试（越权访问、未登录访问）
3. 性能测试（1000 并发权限校验）
4. 安全测试（SQL 注入、越权漏洞）
5. 生成测试报告
---
# 最后 DevOps 部署上线
@devops
配置权限管理服务的部署：
1. 编写 Dockerfile
2. 配置 docker-compose（包含 PostgreSQL、Redis）
3. 设置 GitHub Actions CI/CD 流水线
4. 配置 Nginx 反向代理
5. 添加监控和日志收集</code></pre>
<p><strong>Agent Teams 工作流程</strong></p>
<ol>
<li><strong>任务分解</strong>：Team Leader（通常是 Architect）将大任务分解为子任务</li>
<li><strong>角色分配</strong>：根据专业领域，分配给不同的 Agent 角色</li>
<li><strong>并行开发</strong>：多个 Agent 同时工作，提高开发效率</li>
<li><strong>协作沟通</strong>：Agent 之间自动协调接口定义、数据格式等</li>
<li><strong>集成测试</strong>：各 Agent 完成后，自动进行集成测试</li>
<li><strong>代码审查</strong>：相互审查代码，确保质量</li>
</ol>
<p><strong>创建自定义 Agent</strong></p>
<p>除了内置角色，你还可以创建自定义 Agent：</p>
<pre><code># 创建专门的 React 专家 Agent
@create-agent ReactExpert
描述：React 开发专家，精通 Hooks、状态管理、性能优化
专长：
- React 18 新特性（Concurrent Features、Suspense）
- 状态管理（Redux Toolkit、Zustand、Jotai）
- 性能优化（memo、useMemo、代码分割）
- TypeScript 集成
- 测试（React Testing Library）
工作流：
1. 分析需求，设计组件结构
2. 编写类型安全的代码
3. 实现自定义 Hooks
4. 编写单元测试
5. 提供性能优化建议
# 使用自定义 Agent
@ReactExpert
帮我优化这个 React 组件的性能，目前渲染很慢...</code></pre>
<h3>如何启用 Agent</h3>
<ol>
<li><strong>触发方式</strong>：在聊天框输入 <code>@agent</code> 或点击 Agent 模式按钮</li>
<li><strong>描述任务</strong>：用自然语言清晰描述你想要完成的任务</li>
<li><strong>确认步骤</strong>：Agent 会展示执行计划，你可以确认或修改</li>
<li><strong>执行操作</strong>：Agent 会逐步执行，每个关键步骤都会征求你的确认</li>
</ol>
<div class="tip-box">
<div class="tip-box-title"><i class="fas fa-lightbulb"></i> Agent 使用建议</div>
<p>Agent 功能强大但消耗较多资源，建议用于复杂任务。简单任务使用普通的 Skills 或代码补全更高效。</p>
</div>
You can’t perform that action at this time.