HTML 开发者的智能助手：通义灵码在 VSCode 中的应用

引言

在 HTML 开发领域，提高编码效率和质量是每位开发者追求的目标。通义灵码，作为一款由阿里云技术团队开发的智能编码助手，能够通过其强大的 AI 能力，为 HTML 开发者提供包括代码自动补全、智能注释、代码优化等多方面的支持。本文将指导您如何在 VSCode 中配置和使用通义灵码，以优化您的 HTML 开发流程。

安装与配置

HTML 开发可用的工具很多，Jet brains 系列的大部分 ide 都可以开发 html，而 webStorm 是他家专门用于 web 页面开发的。此外微软的 VS 和 VSCode , 还有一些别的公司研发的比如 atom，hbuilder，notepad++，eclipse 等都可以用于 html 开发。

但大多数程序员在开发前端页面时仍会选择使用 VSCode，因为相比于 jetbrain 和 vs 以及 eclipse 这种重量级的 IDE，VSCode 更加轻巧，所以本文以 VSCode 为主进行介绍！

前提条件

确保您的开发环境中已安装 VSCode。

如果尚未安装，可以从 VSCode官网 下载并安装。

安装步骤

1. 通过 VSCode 插件市场安装
   打开 VSCode，进入扩展视图（快捷键：`​Ctrl+Shift+X​`）。
   - 搜索“​TONGYI Lingma​”。
   - 找到插件后，点击安装。
   

2. 使用 VSIX 文件安装
   访问通义灵码官网下载 VSIX 安装包。
   在 VSCode 中，选择“扩展”视图，点击“从 VSIX 安装”，然后选择下载的 VSIX 文件进行安装。
   

3. 安装完成后，VSCode 界面左侧会显示通义灵码的图标，点击图标并按照提示登录即可开始使用。

主要功能应用

代码自动补全

虽然通义灵码也提供了 html 的代码自动补全，但前端开发设计样式一般由美工决定，使用代码补全并不能生成我们真正需要的代码（但或许还是会有猜对的机会）。

我们可以通过禁用行间生成来关闭该功能。

智能注释生成

通义灵码确实提供了对 html 代码的注释生成和代码解释，你可以像其他编程语言那样使用代码注释和代码解释。

但对于 html 而言，代码的注释应该由开发者自己根据结构进行确定，而不是生成对每个 html 标签都注释的 html 代码，这样注释会让 html 文件变大，影响页面加载！

代码解释

通义灵码也提供了代码解释功能，但 html 是一种结构化的标记语言，代码解释其实必要性不大。

代码优化建议

通义灵码提供了对html的代码优化建议，对于前端开发工作者而言，只用​div​和​span​标签就能开发一个页面，但这种方式是缺乏语义化的，对搜索引擎不友好，有些元素可能被废弃，有些属性可能不能使用了，对于程序员来说记住哪些是废弃的元素需要一定的知识积累，而现在使用代码优化它可以帮助你快速完成这些工作！

虽然它会提供优化后的代码，但前端开发工作者应该更多的参考其给出的建议自行修改，而不是直接合并！

单元测试自动生成

HTML 并不是编程语言（是标记语言），它并不像其他编程语言一样可以有最小分隔单元（函数或者类）可以进行测试，但软件测试中也有针对页面进行的 ui 测试，一般使用 Python 结合一些 Python 工具库对html 页面进行解析。

比如可以使用 Python 的 unittest（单元测试框架）和 bs4（html 解析框架）进行页面的单元测试

与代码优化相同，这里也会提供测试代码

智能问答

在开发过程中遇到问题，可以直接向通义灵码提问，它将提供解决方案或相关的代码示例。

AI 程序员

AI 程序员是用来帮助开发者进行编码工作的，它可以通过对话的方式根据你的需求描述和要求，对整个项目进行代码开发，代码审查和代码变更。

实用技巧

会话管理：

与其他的对话型 AI 相同，通义灵码也有上下文的概念，通义给出的答案会更倾向于之前的提问与回答，也就是说如果你一直在问​img​的标签，当你突然询问​target​属性时通义灵码可能会认为你询问的是​img​的​target​属性，但实际上这是一个​a​标签特有的属性！

言下之意就是，如果你想询问新的内容，要么下够足够多的描述（定语），要么新开一个会话，或者清除现在的会话。

可以通过会话创建和清理来清理大模型记录的提问信息，你可以选择会话创建和清理，也可以选择会话清理。

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

创建新会话：在对话框中中输入`​/newTask​`，然后点击确定即可。