跳到主要内容

HTML AI编程助手

近几年AI发展迅猛,作为开发人员,我们总是追求更快,更高效的工作效率,AI的出现可以说改变了许多人的编程方式。AI 对我们来说就是一个可靠的编程助手,给我们提供了实时的建议和解决方案,无论是快速修复错误,提升代码质量,或者查找关键文档和资源,AI作为编程助手都让我们事半功倍。

下为推荐一款适配了 Visual Studio, VS Code,JeteBrains 系列以及Vim等多种编译器环境的插件 Fitten Code, Fitten Code 是由非十大模型驱动的AI编程助手,它可以自动生成代码,提升开发效率,帮您调试Bug,节省您的时间,另外还可以对话聊天,解决你编程碰到的问题。

Fitten Code 免费且支持 80 多种语言:Python、C++、Javascript、Java、HTML等。
目前对于HTML语言,Fitten Code 支持在多种文件编辑器或IDE上使用,下来我们来详细看下VS Code上的安装与使用。

安装

打开VS Code,点击左侧的Extensions(扩展)按钮 Extensions

在搜索框中输入关键字 Fitten Code,然后单击【安装】按钮。 fitten-code

安装完成后,注册并登录,即可使用。
fitten-code

开始使用

注册成功,并登录后,插件会有个使用指引 use-guide

智能补全

智能补全是指在编写代码时,智能地提示您可能需要的变量、函数、属性、方法等,提高编程效率。
auto-complete

按下Tab键,即可触发智能补全,输入变量名、函数名、属性名、方法名等,即可自动提示。 auto-complete

按下Ctro+右键,接收单个词补全建议 img

AI问题

用户可以通过点击左上角工具栏中的Fitten Code按钮,打开AI问题面板。或者使用Ctrl+Alt+C打开对话框窗口进行对话 fitten code ai

肖用户选中代码段再进行对话框时,Fitten Code会自动引用用户所选中的代码段,此时可直接针对该代码段进行问题描述,并获取AI的回答。 fitten code interaction

生成代码

可在左侧Fitten Code工具栏中选择“Fitten Code: Generate Code”选项,即可生成代码。

fitten code generate code 然后在输入框中输入指令即可生成代码

fitten code generate code

利用对话框功能生成代码 fitten code generate code

代码翻译

代码翻译功能可以实现不同语言之间的转换,如Python语法转为C++语法。选中需要进行翻译的代码段,右键选择"Fitten Code->Translate Code",即可实现代码翻译。

img 然后在输入框中输入需求(如此处要求Fitten 将 Python 代码转为 C++ 代码)。

img 也可以在Char界面实现,选中需要进行编辑的代码段,右键选择Fitten Code - 开始聊天,或者使用快捷键 Ctro+Alt+C。如下图所示。

img

生成注释

Fitten Code 提供了生成注释的功能,可以自动生成注释模板,并将注释插入到代码中。选中需要生成注释的代码段,右键选择"Fitten Code->Generate Comment",即可实现注释生成。 img

生成对应注释如下图,单击【Apply】即可插入到代码中。 img

解释代码

Fitten Code 提供了代码解释功能,可以自动生成代码的解释,并将解释插入到代码中。选中需要解释的代码段,右键选择"Fitten Code->Explain Code",即可实现代码解释。

img 此外,还可以进一步回答用户关于这段代码的疑问,如下图所示: img

生成测试

Fitten Code 拥有自动生成单元测试的功能,可以根据代码自动产生相应的测试用例,提高代码质量和可靠性。通过选中代码段后右键选择 "Fitten Code – 生成单元测试" 来实现,如下图所示:

img img

检查bug

Fitten Code 可以对一段代码检查可能的 bug,并给出修复建议。选中对应代码段,然后右键选择 "Fitten Code查找Bug",如下图所示

img

代码编辑

Fitten Code可根据用户指示对选定的代码块进行编辑,用户点击 "Apply" 后即可应用变更。通过选中代码段右键选择 "Fitten Code – 编辑代码" 或在左上角工具栏点击 "Fitten Code – 编辑代码",如下图所示 img

随后,用户可在输入框中输入指示,Fitten Code 会新建一个窗口对比显示更改前和更改后的内容,用户可通过点击 "Apply" 应用更改,如下图所示 img

常见问题

如果 VSCode 远程服务器 remote 无法连接外网时,请点击左下角⚙按钮,再点击设置

img

然后在设置页面点击右上角 "打开设置(JSON)":

img 最后只需在在弹出的 settings.json 文件中添加以下内容即可:

"remote.extensionKind": {"Fitten-code.fitten-code": "ui"}

img

更多内容参考,请见https://code.fittentech.com/