The latest articles on DEV Community by 坚果 (@jianguo). https://dev.to/jianguo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2898647%2F7bbd23c2-38e2-41dc-bd09-c5aedabc417e.jpg https://dev.to/jianguo en 坚果 Wed, 26 Feb 2025 02:24:12 +0000 https://dev.to/jianguo/traebian-cheng-gong-ju-shang-xia-wen-shi-yong-ji-dai-ma-bu-quan-de-shi-yong-ji-qiao-3a0i https://dev.to/jianguo/traebian-cheng-gong-ju-shang-xia-wen-shi-yong-ji-dai-ma-bu-quan-de-shi-yong-ji-qiao-3a0i <h1> Trae编程工具上下文使用及代码补全的实用技巧 </h1> <blockquote> <p>本文分享了Trae编程工具的几个实用技巧，包括利用编辑器内容、终端内容作为上下文，通过 # 键添加代码、文件、文件夹、工作区等不同类型的上下文，多模态的图片输入以及代码自动补全功能。同时期待大家补充更多使用技巧。</p> </blockquote> <p>在编程过程中，充分利用工具的各种功能可以显著提高我们的工作效率。今天，我将分享几个关于Trae编程工具的实用技巧，同时也期待大家能够补充更多好用的技巧。</p> <h2> 方式一：将编辑器内的内容作为上下文 </h2> <p><strong>使用场景</strong>：当你正在编辑器中编写代码，对代码中的某一部分存在疑问，比如对某段函数的实现逻辑不太理解，或者想要对某段代码进行优化，却不知道如何着手时，就可以使用该技巧向 AI 助手提问。</p> <p>当我们在编辑器中编辑代码文件时，AI 助手默认能看到当前文件。若想针对文件中的某段代码提问，只需两步：</p> <ol> <li>精准选中你想要询问的代码片段。</li> <li>点击悬浮菜单中的 “添加到对话” 按钮，选中的内容就会作为上下文添加到侧边对话框中。</li> </ol> <p>指定的上下文会显示在侧边对话底部的输入框，这样方便我们对代码进行解释等操作，非常便捷。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0152kiml9ii8wq2affw5.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0152kiml9ii8wq2affw5.png" alt="image-20250226085851914" width="800" height="572"></a></p> <h2> 二、借助终端内容作为上下文 </h2> <p><strong>使用场景</strong>：在代码运行过程中，终端出现报错信息，而你无法准确判断报错的原因和位置时，就可以使用该技巧让 AI 助手帮助你分析和修复报错。</p> <p>如果在终端中遇到报错，想要借助 AI 助手来修复，可按以下步骤操作：</p> <ol> <li>在终端中，仔细点击输出内容片段。</li> <li>在内容片段区域的右上角，点击 “添加到对话” 按钮，选中内容就会作为上下文添加到侧边对话框。</li> </ol> <p>指定的上下文会显示在侧边对话底部的输入框，输入框内会清晰显示上下文的来源以及行号。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkty4zzc9ryeugflcz244.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkty4zzc9ryeugflcz244.png" alt="image-20250226091034858" width="800" height="222"></a></p> <h2> 三、妙用 # 键添加上下文 </h2> <p><strong>使用场景</strong>：当你需要参考某个特定函数、类的代码，或者想要了解某个文件、文件夹的整体内容，又或者想对整个工作空间有一个全局的认识时，就可以使用该技巧向 AI 助手获取相关信息。</p> <p>在侧边对话的输入框中，我们可以通过 # 符号添加多种类的上下文，包括代码、文件、文件夹和工作区。</p> <h3> （一）#Code </h3> <p><strong>使用场景</strong>：当你在开发过程中，需要对某个函数或类的实现细节进行深入了解，或者想要知道某个函数或类在项目中的使用情况时，就可以使用该功能。</p> <p>通过 #Code，我们可以将函数或类的相关代码作为与 AI 助手对话的上下文。列表默认展示当前编辑器内打开的文件中的函数或类，选择前可预览代码。若推荐内容不符合需求，还可以通过关键词搜索。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facpt6z42xcmkf2938yb3.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facpt6z42xcmkf2938yb3.png" alt="image-20250226091907175" width="800" height="404"></a></p> <h3> （二）#File </h3> <p><strong>使用场景</strong>：当你需要查看某个文件的完整内容，比如查看某个配置文件的详细设置，或者想要知道某个文件的整体逻辑结构时，就可以使用该功能。</p> <p>使用 #File 可以将指定文件中的所有内容作为与 AI 助手对话的上下文。列表默认展示近期在编辑器中打开过的文件，可预览文件所在目录以防错选，也能通过关键词搜索所需文件。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fukdj3rqdva37uskaqssu.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fukdj3rqdva37uskaqssu.png" alt="image-20250226091925761" width="800" height="670"></a></p> <h3> （三）#Folder </h3> <p><strong>使用场景</strong>：当你想要了解某个文件夹下的所有文件内容，比如查看某个模块的所有代码文件，或者想要知道某个文件夹的整体功能时，就可以使用该功能。</p> <p>#Folder 能将指定文件夹中的所有内容作为与 AI 助手对话的上下文。列表默认展示与编辑器中当前所打开文件相关的文件夹，可预览目录以防错选，同样支持关键词搜索。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpn5x0kf4k1lsomaamlec.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpn5x0kf4k1lsomaamlec.png" alt="image-20250226092010424" width="800" height="371"></a></p> <h3> （四）#Workspace </h3> <p><strong>使用场景</strong>：当你接手一个新的项目，对整个项目的架构和功能不太熟悉时，就可以使用该功能让 AI 助手帮助你快速了解项目的整体情况，从而更快上手开发。</p> <p>使用 #Workspace 可以向 AI 助手提出有关整个工作空间的问题，AI 助手会自动在工作空间中查找最相关内容作为上下文回答。遇到不熟悉的项目时，该功能有助于全局了解项目功能和代码，快速上手开发。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xhxbjylzq74ewr6k4g0.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xhxbjylzq74ewr6k4g0.png" alt="image-20250226092034295" width="800" height="384"></a></p> <h2> 四、多模态输入之图片输入 </h2> <p><strong>使用场景</strong>：当你遇到一些用文字难以描述清楚的问题时，比如终端报错的截图、设计稿的细节等，就可以使用该技巧通过添加图片的方式向 AI 助手更准确高效地表达需求。</p> <p>我们还可以在会话中添加图片，如报错截图、设计稿等，以便更准确高效地表达需求。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flrhehghcxc9ojxudiysb.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flrhehghcxc9ojxudiysb.png" alt="image-20250226092237582" width="800" height="275"></a></p> <h2> 五、代码自动补全功能 </h2> <p><strong>使用场景</strong>：当你在编写代码时，想要快速完成一些重复性或者有固定模式的代码片段，比如函数的基本结构、循环语句等，就可以使用该技巧让 AI 助手自动补全后续代码，提高编码效率。</p> <p>在光标所在位置敲击回车键换行，AI 助手会阅读并理解当前代码，然后自动补全后续代码。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fol1pe9myhbh3nsj42vj7.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fol1pe9myhbh3nsj42vj7.png" alt="image-20250226094342250" width="800" height="401"></a></p> <p>期待大家如果有好的使用技巧也可以补充，让我们一起更好地利用Trae编程工具提高编程效率。</p> <h2> 往期文章 </h2> <p><a href="https://juejin.cn/post/7473077170761007155" rel="noopener noreferrer">https://juejin.cn/post/7473077170761007155</a></p> <p><a href="https://juejin.cn/post/7473399743077646346" rel="noopener noreferrer">https://juejin.cn/post/7473399743077646346</a></p> programming