如何使用AI辅助开发HTML5 - 通义灵码功能全解析

HTML5 作为最新的 HTML 标准，其新增的标签和功能通常需要与 CSS 和 JavaScript 配合使用，尤其是 JavaScript，许多复杂功能的实现都依赖于它。

如果开发过程中频繁在 HTML 和 JavaScript 手册之间切换，会极大降低效率。

在 AI 时代，我们有更高效的解决方案——利用 AI 辅助开发！

市面上的通用 AI 工具种类繁多，但对于编程行业来说，使用通义灵码往往能获得更高的准确性和专业性。

通义灵码简介

通义灵码是阿里云技术团队打造的智能编码助手，基于强大的通义大模型，提供以下功能：

• 代码续写和优化：根据上下文自动生成高质量的代码建议，帮助快速完成代码编写，并提供优化方案提升代码性能。
• 自然语言描述生成代码：将需求转化为代码，加速开发过程。
• 注释生成和代码解释：为代码添加清晰的注释，解释代码逻辑，方便团队协作和后续维护。
• 单元测试生成：自动生成测试用例，确保代码的可靠性和稳定性。
• 研发智能问答：解答开发过程中遇到的问题，提供专业的技术指导。
• 代码问题修复：帮助快速定位并修复代码中的错误，提高开发效率。

通义灵码官网：https://tongyi.aliyun.com/lingma/

通义灵码支持：JetBrains IDEs、Visual Studio Code、Visual Studio，及远程开发场景（Remote SSH、Docker、WSL、Web IDE），安装后登录账号即可开始使用。

不管是HTML，CSS还是JavaScript，都更倾向于使用VSCode进行代码开发，VSCode的通义灵码插件支持也提供了上述的全部功能，所以本文以VSCode进行介绍。

安装指南

环境准备

HTML、CSS 和 JavaScript 的开发通常倾向于使用 Visual Studio Code（简称 VSCode），其通义灵码插件功能完整，因此本文以 VSCode 为例进行介绍。

插件安装

 VSCode三端的插件安装方式基本一致，本文以Windows为例，介绍如何在VSCode中安装通义灵码插件。

确保已安装 VSCode 后（如未安装请查阅：Visual Studio Code 入门），在插件市场搜索“TONGYI Lingma”，找到通义灵码插件并安装。

安装完成后，VSCode 左侧会新增通义灵码图标，点击进入插件界面。

首次使用需点击“立即登录”并同意服务协议，通义灵码支持多种登录方式，包括账号密码、手机号、支付宝、阿里云、淘宝、钉钉登录。



登录后即可使用通义灵码的各项功能。

功能演示

代码续写

在 HTML 开发中，代码续写功能相对鸡肋，但在 HTML5 中，由于需要使用 JavaScript，代码续写在 JavaScript 开发中则显得极其强大。

通义灵码提供行级和函数级的代码补全功能。

在开启自动云端生成模式下，它会根据当前代码文件及相关文件的上下文，自动生成代码建议，可使用快捷键采纳、废弃或查看不同建议。

同时，当你在编码的过程中，也可以通过快捷键 ​​alt+​P​​ 手动触发生成代码建议。

开发小提示：
为了提高代码补全的准确性，建议在编写代码前先写代码注释描述其功能。例如上图所示

通义灵码还提供了一组快捷键，方便更好地控制代码续写过程：

在一些文件中可能不需要代码续写功能，可以参考禁用行间生成，关闭对某类文件的代码续写功能。

智能问答

通义灵码的智能问答功能强大，不仅可以回答你的技术问题，还能进行代码创作。

例如，你可以向它咨询 HTML5 中某个标签的用法，或者请求它生成一个特定功能的代码片段。

基于智能问答，还能实现很多有用的功能，比如后续的代码注释、代码解释、单元测试生成和代码优化，都是基于智能问答实现的。

会话创建和清理

智能问答是一个持续对话的过程，为了提高 AI 生成答案的质量，应该适时清理会话。

你可以通过以下两种方式清理会话：

• 清理会话：在对话框中输入​/clearContext​，然后点击确定即可。

• 创建新会话：在智能问答的右上角有一个圆形 ​​+​​ 号按钮，点击即可创建新对话。

代码小技巧

通义灵码生成的代码一般都会在右上角有这四个小按钮，分别对应着插入、复制、新建和合并的功能，后续的功能会用到这些小技巧。

• 插入 ：会把 AI 生成的代码替换到我们选中的代码位置，一般在代码注释和代码优化中应用。

• 复制 ：则是复制 AI 生成的代码，我们可以自己选择插入的位置。

• 新建 ：则是新建一个文件，把 AI 生成的代码放进去，一般而言生成测试代码会选择新建一个文件夹存放。

• 合并 ：则是把代码黏贴到文件中，比如黏贴到选中的代码后，一般我们在智能问答中得到我们需要的代码可以用合并。

代码注释

通义灵码的代码注释功能可以帮助你快速为代码添加注释，提高代码的可读性和可维护性。

使用代码注释需要先选中需要注释的代码，右键选择通义灵码的生成注释功能，点击即可选择代码注释功能。

也可以用快捷键 shift+alt+V 使用代码注释功能。

注释结果会在左侧显示，你可以根据需要进行修改和完善。

代码解释

与代码注释不同，代码解释是告诉你代码为什么这么写。

选中代码后，点击通义灵码的代码解释按钮，通义灵码会根据你的代码生成对应的解释。

这对于理解复杂代码逻辑、学习优秀代码示例非常有帮助。 

代码优化

代码开发很难做到面面俱到，单人开发往往容易疏漏。

通义灵码提供了一种新的方向：使用 AI 进行代码审查和优化。

它不仅给出审查结果，提供优化思路，甚至还能给出优化后的代码。

代码优化一般使用合并（diff）操作来把原代码替换成优化后的代码。

AI 程序员

智能问答往往基于单个文件或者部分代码片段，而通义灵码提供了 AI 程序员的功能，它基于整个项目。

有些时候实现某个功能需要多个代码文件一起修改，AI 程序员就能轻松胜任！

总结与展望

通义灵码作为一款智能编码助手，为 HTML5 的开发提供了强大的支持。

从代码续写到智能问答，从代码注释到单元测试生成，再到代码优化和 AI 程序员功能，它几乎涵盖了开发过程中的各个方面。

通过本文的介绍，希望你能更好地理解和使用通义灵码，提升自己的编程效率和代码质量。

然而，AI 辅助编程工具的发展仍在不断进步中。

未来，随着技术的进一步成熟，通义灵码有望在更多场景下为开发者提供更智能、更精准的帮助。

对于广大开发者来说，掌握并善用这样的工具，无疑将在竞争激烈的编程领域中占据优势。