工欲善其事，必先利其器。对于前端开发而言，使用VSCode已经能够极大地提高前端的开发效率了。但有了AI加持后，前端开发的效率又更上一层楼了！

本文采用的AI是通义灵码插件提供的通义千问大模型，是目前AI性能榜第一梯队的存在！

简介

通义灵码是由阿里云技术团队打造的智能编码助手。它基于通义大模型，能够提供：

• 代码续写和优化

• 自然语言描述生成代码

• 注释生成和代码解释

• 单元测试生成

• 研发智能问答

• 代码问题修复等功能。

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

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

Jetbrains系列的ide都可以做前端开发，但jetbrains系列的ide都比较耗费性能，我们一般会选择更加轻量的VSCode进行前端开发。

安装指南

请确保你已经安装了VSCode，本文不再赘述安装过程（详见：Visual Studio Code 入门）。 VSCode三端的插件安装方式基本一致，本文以Windows为例，介绍如何在VSCode中安装通义灵码插件。 对于VSCode而言,通义灵码的使用非常简单，只需要在VSCode中安装插件即可。在VSCode中打开插件市场，搜索“TONGYI Lingma”即可找到插件，点击安装即可。
   

安装完成后VSCode的左侧会多出一个通义灵码的图标，点击即可进入插件界面。

点击立即登录，同意用户协议，会跳转到登录页面。

通义灵码支持多种登录方式，包括账号密码登录、手机号登录、支付宝、阿里云、淘宝、钉钉登录。

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

功能演示

代码续写

通义灵码提供了行级和函数级的代码补全功能。该功能会在你进行代码编写时，根据当前代码文件及相关代码文件的上下文，自动为你生成行级/函数级的代码建议，此时你可以使用快捷键采纳、废弃，或查看不同的代码建议。

对于静态页面（HTML和CSS）开发，这个功能或许比较鸡肋，但对于JavaScript而言，这是一个极其强大的功能，我们可以通过该功能快速实现一些JS行为效果，也可以实现一些功能！

一般情况下AI会实时根据你的代码生成后续的代码，但有时候AI需要我们手动触发才能生成代码建议，我们可以通过快捷键 alt+P 手动触发生成代码建议。

开发小提示：为了让代码补全功能更贴近我们想要的结果，我们可以先写代码注释描述其功能。例如上图所示

通义灵码提供了一组快捷键使用方式，可以更好的进行代码续写的控制：

操作	macOS	Windows
接受行间代码建议	Tab	Tab
废弃行间代码建议	esc	esc
查看上一个行间推荐结果	⌥(option) + [	Alt+[
查看下一个行间推荐结果	⌥(option)+]	Alt+]
手动触发行间代码建议	⌥(option)+P	Alt+P

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

智能问答

通义灵码提供了智能问答功能，它可以对你的问题做出回答，你也可以让他进行代码创作。我们可以通过这个功能来让AI帮我们生成解决方案，或者让AI实现某个功能的代码案例。

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

会话创建和清理

智能问答是一个持续对话的过程，你可以持续进行提问，但大模型也会因此记录你之前的提问信息，可能会影响后续的回答，为了提高AI生成答案的质量，应该适时清理会话。

清理会话可以通过创建一个新会话或者清理来实现：

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

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

代码小技巧

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

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

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

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

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

代码注释

通义灵码提供了代码注释功能，它可以根据你的代码生成对应的注释，方便代码阅读和维护。

也可以用快捷键shift+alt+V,或者右键菜单中也有代码注释功能。

会在左侧显示代码注释结果

一般情况下我们只在源代码中写注释，只在JavaScript的代码中写注释！

代码解释

代码解释与代码注释不同，注释是为了让代码更易读，而代码解释是告诉你代码为什么这么写。 与代码注释相同，选中代码后，点击通义灵码的代码解释按钮，通义灵码会根据你的代码生成对应的解释。

单元测试生成

对于JavaScript的代码，有些工具函数（类）是可以通过单元测试来确保代码可靠性的（比如某些算法）如何编写质量优秀的单元测试代码对于并非测试专业的前端程序员来说是一个挑战，不过我们可以通过AI来帮我们进行代码测试。

通义灵码可以根据我们的代码，设计对应的测试用例。

通义灵码甚至还能贴心地生成对应的测试代码：

测试用例代码一般是复制后到一个专门的测试用例文件中，方便后续测试。也可以用新建文件，通义灵码会再帮你创建一个测试用例文件。

代码优化

代码开发很难做到面面俱到，单人开发往往容易疏漏。传统开发为了避免这种因个人主观原因导致的代码疏漏，会定期组织代码评审，或者让开发者结对编程，互相审核对方的代码。现在有了通义灵码，提供了一种新的方向：使用AI进行代码审查和优化。

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

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

AI程序员

智能问答往往基于单个文件或者部分代码片段，而通义灵码提供了AI程序员的功能，它基于整个项目，有些时候实现某个功能需要多个代码文件一起修改，AI程序员就能轻松胜任！

可以看见ai帮你生成了一些代码，但最后你还得自行选择是否接受他生成的代码，最终决定权还在你自己。

AI前端程序员

AI程序员还有另一种用法。现在我们也可以给AI一张网站的图片，让AI根据图片进行代码实现了！