CSS AI 通义灵码 VSCode 插件安装与功能详解

简介

在前端开发领域，页面调试一直是个繁琐的过程，而传统开发中美工与前端的对接也常常出现问题。如今，阿里云技术团队推出的通义灵码智能编码助手，为前端开发者带来了新的解决方案，让开发者可以像指挥者一样，借助 AI 的力量来调试页面。

通义灵码基于通义大模型，具备以下功能：

• 代码续写和优化

• 自然语言描述生成代码

• 注释生成和代码解释

• 单元测试生成

• 研发智能问答

• 代码问题修复等

对于 CSS 开发，虽然它并不算真正意义上的编程语言，但通义灵码的诸多功能依然能够为 CSS 开发提供助力。

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

• 通义灵码支持：JetBrains IDEs、Visual Studio Code、Visual Studio，以及远程开发场景（Remote SSH、Docker、WSL、Web IDE）。安装后登录账号即可开启智能编码之旅。

由于 VSCode 是前端开发人员常用的 CSS 开发环境，本文将详细介绍如何在 VSCode 中安装配置通义灵码，并展示其在 CSS 开发中的功能应用。

安装指南

确保已安装 VSCode 后，按照以下步骤进行插件安装：

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

对于 VSCode 而言,通义灵码的使用非常简单，只需要在 VSCode 中安装插件即可。

1. 使用插件市场安装

通义灵码已上架 VSCode 插件市场。

1. 打开 VSCode，点击左侧的扩展图标，进入插件市场。

2. 在搜索框中输入“TONGYI Lingma”，找到对应的插件。

3. 点击“安装”按钮，VSCode 会自动下载并安装通义灵码插件。

2. 使用插件安装包安装

若无法通过插件市场安装，可采用以下方式：

1. 访问链接下载 Visual Studio Code 的 VSIX 安装包：下载地址
   

2. 下载完成后，打开 VSCode，点击左侧的扩展图标。

3. 点击“从 VSIX 安装”按钮，选择下载好的 VSIX 文件进行安装。

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

首次使用时，需点击“立即登录”并同意用户协议。

可选择账号密码、手机号、支付宝、阿里云、淘宝、钉钉等登录方式。

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

功能演示

代码续写

在 CSS 开发中，只需输入完整的样式提示词，通义灵码就能准确生成相应的样式代码。例如，当你输入“flex 布局”，AI 会根据常见的 flex 布局规则，生成相关的 CSS 代码片段，帮助你快速构建布局样式。

代码注释

对于已有的 CSS 代码，通义灵码可以自动生成注释，提高代码的可读性。这对于团队协作开发尤其有用，能让其他开发者更容易理解你的代码逻辑。

代码解释

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

选中对应的 CSS 规则后，右键选择通义灵码的解释代码功能，左侧对话框会生成该段代码的解释。

这在学习他人样式或回顾自己以前的代码时非常有帮助。

代码优化

CSS 中有很多规则可以简写，以提高代码的阅读性和可维护性。

通义灵码的代码优化功能，可以通过合并（diff）操作，将原代码替换为优化后的代码，使你的 CSS 代码更加简洁高效。

智能问答

这是 CSS 开发者使用通义灵码时最有用的工具之一。

前端开发中，经常会遇到一些不常用的 CSS 规则，此时可直接使用问答功能向 AI 提问。

例如，询问“如何实现 CSS 圆角效果”，AI 会给出具体的代码示例和使用说明。

而且，对于需要多条规则才能完整实现的样式，通义灵码还能提供参考案例和具体用法。

实际上在之前的功能中也有智能问答的展示，之前的很多功能都是基于智能问答实现的，他们只不过是在智能问答的时候输入了合适的上下文（甚至是文件），以代码解释为例，就是把这段代码也作为内容向 AI 进行提问。

智能问答现在可以选择不同的大模型了，可以选择通义千问的大模型，也可以选择时下很火的deep seek 大模型。不过编程相关的通义系列的大模型更加专业！

会话创建和清理

智能问答是一个持续对话的过程，你可以持续进行提问，但大模型也会因此记录你之前的提问信息，可能会影响后续的回答，比如你一直在问 CSS 的内容，如果突然询问一个非 CSS 相关的（比如 SCSS 的循环（SCSS 是一种优化的写样式的语言，它可以被编译为 CSS）），AI 会因为上下文的原因以为你还在询问，可能会因此生成错误的答案，所以在合适的时机你应该清除上下文或者结束对话。

智能问答是一个持续对话的过程。为了不影响后续回答的准确性，你可以通过以下方式清理大模型记录的提问信息：

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

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

AI 程序员

AI 程序员功能可以通过对话的方式，根据你的需求描述和要求，对整个项目进行代码开发、代码审查和代码变更。

你可以像产品经理一样指导 AI 进行代码开发，要求其创建项目。

或生成特定代码

不过，最终是否接受 AI 生成的代码，决定权仍在你手中。

其强大之处在于，它的上下文是整个项目，你可以通过描述样式来让 AI 帮你写前端页面。