大人，时代变了！这才是目前最高效的开发方式

React777
4,615 阅读6分钟

开胃菜

基于大模型的ai编码助手（编辑器插件）颠覆了传统编辑器的代码提示，甚至可以非常准确的建议业务代码。注意，是业务代码哦！！！

如下图，我想获取id为focus-area的dom元素，只要输入开头的一个字母d即可

如果你觉得可以提升你的代码编写效率以及幸福感，那就一起继续探索吧 b9.gif

缘起

我的上一篇文章《在大公司工作之后才真正领悟到它真的是宇宙级编辑器》在组内受到广泛好评。小伙伴们也和我交流了一些vscode的使用问题，其中一个问题令我印象深刻。

基于大模型的ai编码助手可以非常准确的建议他想要的代码，令他爱不释手，离了它都不会写代码了。

但他在使用的时候无法快速选取自己想要的建议，我经过一番折腾之后给出了完美解决方案，下面记录了具体细节和解决方案

痛点：默认只有空格或者回车等少数按键才可触发ai建议

我的目的是用document获取id为focus-area的元素，按下字母d，结果发现没有任何的ai建议，如下图

b1.gif

通过按下esc键取消vscode提供的代码建议小组件我发现其实是有ai代码建议的

而且确实是我想要的，比vscode内置的代码建议小组准确多了！如下图

b2.gif

问题定位与解决

我尝试继续输入，发现ai建议又没了。

基本可以确定是vscode的内置代码建议小组件优先级较高，覆盖了ai插件的行为。

为什么会这样呢？

按理说代码建议小组件展示它自己的，ai插件展示它自己的，井水不犯河水。

仔细看代码提示小组件会发现它默认选择了第一个代码建议，应该是这个原因。

那么只要让它默认什么都不选中，应该就可以解决。

巧了，我正好知道vscode有这么个配置

/*
控制在显示小组件时是否选择建议。
请注意，这仅适用于
(“#editor.quickSuggestions#”和“#editor.suggestOnTriggerCharacters#”)自动触发的建议
并且始终在显式调用时选择建议，例如通过“Ctrl+Space”。

never: 自动触发 IntelliSense 时，切勿选择建议。
*/
"editor.suggest.selectionMode": "never",

如下图，会同时出现代码建议小组件和ai代码建议，按下tab成功输出了ai建议的代码

b3.gif

"完美"！！！

天真的我在多输入一些代码体验的时候就被啪啪打脸，如下图。

我在输入字母d的时候我希望的是调用deep函数，此次是内置建议小组件更加准确。

b4.gif

有人会想这不已经解决了吗，你按下箭头直接选择内置小组件的建议有什么问题？

你真的连一下手指头都不想动吗？？？那你干脆开发个意念编程，赛博飞升算了！！！

不不不，该动还是要动，但是应该一步到位才对，上图只补全为deep，应该是ai建议又被覆盖了，直接deep(obj)才完美。

这种场景应该是内置代码建议与ai建议结合起来才更好。

其实仔细观察会发现，每当焦点移到了内置建议小组件选项的时候，编辑器上那些灰色的建议代码都没有了，如果取消了这个行为应该就能解决这个问题。

巧了，我正好知道vscode有这么个配置

// 控制是否在编辑器中预览建议结果
"editor.suggest.preview": true

哈哈，"完美解决"，如下图

b5.gif

然后当我按下tab的时候傻眼了,如下图。

b6.gif

清清楚楚的写着使用tab接受建议啊，实际效果好像是接受了内置小组件的建议

image.png

于是我直接找到vscode的快捷键配置界面，没有问题啊

image.png

难道是因为快捷键冲突？我尝试改为了其他快捷键，均没有作用。后来又折腾半天都没有解决。

去卫生间时，看到一个人满身疲惫，眼里没有光，丝毫没有xx范！噢，原来那是我啊o(￣︶￣)o

晚上回家躺在床上突然想起了这个问题还没解决，虽然理想很美好，但是vscode及ai建议插件都不是我开发的，我又能如何呢？

偏头看向窗外，我不过就像点点繁星中的某颗毫不起眼的一员罢了，哪能散发极致的光与热，有什么用？

......对啊，有什么用？我改为了其他快捷键有什么用？

没用！即有用！说明不是快捷键被占用，而是快捷键根本没生效。

我记得之前好像看到这个快捷键有很长的when表达式，是不是这些限制条件导致不生效？

我直接跳下床，去查看这个快捷键的具体信息，果然发现了根本原因，如下图。

tab生效的其中一条限制就是!suggestWidgetVisible，翻译过来就是不能有建议小组件

image.png

所以解决方案就是去除这条限制，在键盘配置文件里添加如下配置

image.png

{
  "key": "tab", // 可以根据需要改为自己想用的键，个人觉得tab最好，不用动
  "command": "editor.action.inlineSuggest.commit",
  "when": "inlineSuggestionHasIndentationLessThanTabSize && inlineSuggestionVisible && !editorHoverFocused && !editorTabMovesFocus"
},
{
  "key": "tab",
  "command": "-editor.action.inlineSuggest.commit",
  "when": "inlineSuggestionHasIndentationLessThanTabSize && inlineSuggestionVisible && !editorHoverFocused && !editorTabMovesFocus && !suggestWidgetVisible"
}

效果如下，tab即可接受ai建议，如果就想用建议小组件的代码，按下enter就行

b7.gif

更多示例,个人觉得ai建议比内置建议小组件更加准确，内容更多

b8.gif

b9.gif

总结

上述只是简单的展示了ai编码助手的强大，不过是冰山一角。且随着日趋成熟，ai编码助手可以极大地提高开发效率，最关键的是它真的很智能，可以自我学习与优化，提示越来越准确。甚至可以通过语音编码，赛博飞升指日可待！！！

接下来我会抽个时间好好梳理一下相关的提效技巧及ai插件介绍与推荐。如果读者朋友对ai编码插件感兴趣的话可以在评论区里交流学习。我会把有用的信息都补充到这篇文章里

可能有人会觉得，就一编辑器，至于吗？

当我做完这一切。走到阳台，看着那片璀璨的星空，我终于明白了，那理由便是所有生命与生俱来被赋予的能力——为了所爱之物竭尽所能！

请陪我一同仰望这片星空吧。人生苦短，我用AI

avatar
文章
阅读
粉丝