如何使用通义灵码提高前端开发效率
工欲善其事,必先利其器。对于前端开发而言,使用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根据图片进行代码实现了!
相关文章:
如何使用通义灵码提高前端开发效率
工欲善其事,必先利其器。对于前端开发而言,使用VSCode已经能够极大地提高前端的开发效率了。但有了AI加持后,前端开发的效率又更上一层楼了! 本文采用的AI是通义灵码插件提供的通义千问大模型,是目前AI性能榜第一梯队…...
苍穹外卖04 新增菜品菜品分页查询删除菜品修改菜品
2-6 新增菜品 02 05-新增菜品_需求分析和设计 03 06-新增菜品_代码开发_1 文件上传接口开发: 在这一部分我们主要在于对阿里云oss的代码开发和实现 1.配置阿里云oss: alioss:endpoint: oss-cn-beijing-internal.aliyuncs.comaccess-key-id: access-ke…...
C++ 读取英伟达显卡名称、架构及算力
C++ 读取英伟达显卡名称、架构及算力 通过CUDA Runtime API获取计算能力(推荐)CUDA计算能力(Compute Capability)的版本号直接对应显卡架构(如8.6=Ampere,9.0=Hopper)。实现步骤: 1.安装依赖: 安装 NVIDIA CUDA Toolkit。确保显卡驱动支持CUDA。2. C…...
VitePress 中以中文字符结尾的字体加粗 Markdown 格式无法解析
背景 在编写vitepress项目过程中,发现了一个markdown格式解析的问题。 md文件中,以中文句号结尾的字体加粗,无法正确解析: 不只是中文句号,只要是加粗语句中以中文字符结尾,都无法被正确解析 需要将中文…...
2.前端汇总
框架 html5 html语法 css css3 css语法 框架 tailwind css 官网 JavaScript JavaScript语法 typescript 语法 nodejs 语法 vue3 官网 组件 vite 打包 vue router -路由 pinia - 状态管理 ui element plus axios - ajax 后台管理系统前端快速开发框架 …...
外部因素导致的 ADC误差来源分析
前面分享了ADC自身因素带来的误差,现在再分享一波由于外部因素导致的ADC采样误差。 一、模拟信号源输入减少带来的误差 看一个STM32的ADC转换器的示意图: 从图中可以看到,输入源与采样引脚之间存在阻抗RAIN,流入引脚的电压可能因…...
集成运算放大器知识汇总
一、集成运放的组成 集成运算放大器,就是通过内部元器件的电参量关系将电参量进行运算,达到放大的目的。我们拆解来看: 集成:将电路封装,留出接口,使其模块化,便于移植。运算:这里…...
HBCPC2025 补题 (F、I)
HBCPC2025 补题 补题连接:Codeforces I 感染 做法1:std做法:树上dp统计贡献找最大 #include <bits/stdc.h> using namespace std; typedef long long ll; #define endl \n #define int long long #define pb push_back #define pii pair<int,…...
针对 CSDN高质量博文发布 的详细指南
结合技术写作规范与平台特性,分为 内容规划、写作技巧、排版优化、发布策略 四部分,确保专业性与传播效果: 一、内容规划:精准定位与深度挖掘 选题策略 热点结合:追踪技术趋势(如2025年AIGC、量子计算&am…...
python读写bin文件
import numpy as np# 创建二进制数据 data np.array([0x33, 0x34, 0x35, 0x36], dtypenp.uint8)# 写入bin文件 with open(example.bin, wb) as f:data.tofile(f)print("bin文件生成成功")data np.fromfile(example.bin, dtypenp.uint8) print("numpy读取结果:…...
矩阵的秩(Rank)
矩阵的秩(Rank)是线性代数中的核心概念,表示矩阵中线性无关的行(或列)的最大数量,反映了矩阵所包含的“独立信息”的多少。以下是其核心要点: 1. 秩的定义 行秩:矩阵中线性无关的行…...
Vue响应式系统演进与实现解析
一、Vue 2 响应式实现详解 1. 核心代码实现 // 依赖收集器(观察者模式) class Dep {constructor() {this.subscribers new Set();}depend() {if (activeEffect) {this.subscribers.add(activeEffect);}}notify() {this.subscribers.forEach(effect &g…...
【SPIN】高级时序规范(SPIN学习系列--6)
时序操作符[](总是)和 <>(最终)可应用于任何LTL公式,因此 []<><>A 和 <>[]<>(A ∧ []B) 在语法上是正确的。本书不涉及LTL的演绎理论(如公理、推理规则及公式的结合律、交换…...
C语言学习之内存函数
今天我们来学习一下C语言中内存函数 以下内存函数的使用均需要包含头文件<string.h> 目录 memcpy函数的使用及其模拟实现 memcpy函数的模拟实现 memmove函数的使用和模拟实现 memmove函数的模拟实现 memset函数的使用 memcmp函数的使用 memcpy函数的使用及其模拟实现…...
Python 数据库编程
一、数据库连接基础 1. 标准流程 import database_module # 如mysql.connector, sqlite3等 # 1. 建立连接 connection database_module.connect( host"localhost", user"username", password"password", database"dbnam…...
软考软件评测师——软件工程之开发模型与方法
目录 一、核心概念 二、主流模型详解 (一)经典瀑布模型 (二)螺旋演进模型 (三)增量交付模型 (四)原型验证模型 (五)敏捷开发实践 三、模型选择指南 四…...
机器学习入门
机器学习入门 1 . 机器学习是什么? 机器学习(Machine Learning, ML)是一种用数据经验替代显式规则编程来完成任务的方法──模型从样本 (X, y) 中学习 映射函数 f: X → Y,并在新样本上做出预测。和传统“if … else”程序相比&…...
git学习与使用(远程仓库、分支、工作流)
文章目录 前言简介git的工作流程git的安装配置git环境:git config --globalgit的基本使用新建目录初始化仓库(repository)添加到暂存区新增/修改/删除 文件状态会改变 提交到仓库查看提交(commit)的历史记录git其他命令…...
制造业或跨境电商相关行业三种模式:OEM、ODM、OBM
一、基础概念对比 模式定义核心能力利润来源控制权OEM代工生产(贴牌生产)纯生产制造能力加工费(薄利)品牌方掌控一切ODM设计生产(自主设计代工)设计研发能力设计溢价生产利润制造商掌握设计OBM自主品牌&am…...
APPtrace 智能参数系统:重构 App 用户增长与运营逻辑
一、免填时代:APPtrace 颠覆传统参数传递模式 传统 App 依赖「邀请码 / 手动绑定」实现用户关联,流程繁琐导致 20%-30% 的用户流失。APPtrace 通过 **「链接参数自动传递 安装后智能识别」** 技术,让用户在无感知状态下完成关系绑定、场景还…...
在 Excel 中使用 C# .NET 用户定义函数 操作步骤
点开选项 点击加载项 点击跳转 点击浏览 选择仙盟excel...
PyTest
一、基本用法: 1.测试框架做了什么: (1).测试发现 a.创建test_开头的文件 b.创建Test开头的类 c.创建test_开头的函数或方法 pytest中以每一个函数或方法作为一个用例 pytest主要以名字区分普通函数(方法)、用例 pytest的启动方式:在给定的项目中执行pytest命令即可 p…...
Python Day27 学习
今天学习讲义Day17的内容:无监督算法中的聚类浙大疏锦行 Q1. 什么是聚类? 本质上就是一种分组分类 关于聚类的准备工作: 代码实现 # 先运行之前预处理好的代码 import pandas as pd import pandas as pd #用于数据处理和分析ÿ…...
在 Win 10 上,Tcl/Tk 脚本2个示例
set PATH 新增 D:\Git\mingw64\bin where tclsh D:\Git\mingw64\bin\tclsh.exe where wish D:\Git\mingw64\bin\wish.exe 编写 test_tk.tcl 如下 #!/usr/bin/tclsh # test 文件对话框 package require Tk# 弹出文件选择对话框,限制选择.txt文件 set filePath […...
渐开线少齿差传动学习笔记
之前看到了一个渐开线一齿差的视频,觉得比较有意思,想自己动手做一个看看,下面是最开始尝试的一个失败的结果,不知道小伙伴们发现问题了没? 本来就是想凑一凑看看,但是发现不是凑起来不是件容易的事。那么…...
基于CATIA参数化圆锥建模的自动化插件开发实践——NX建模之圆锥体命令的参考与移植(二)
引言 在CATIA二次开发领域,参数化建模技术可提升复杂几何体的创建效率达60%。本文基于PySide6 GUI框架与pycatia接口库,深度解析锥体自动化建模工具的开发实践。该工具创新性地融合了NX的交互逻辑与CATIA的混合建模技术,实现双模式输入(高度/锥角)的智能参数转换,较传统…...
Java集合框架详解:单列集合与双列集合
目录 1. 引言:为什么需要集合框架 2. 基础概念:集合框架概述 2.1 集合框架的结构 编辑 编辑 2.2 集合与数组的比较 3. 前置知识:理解集合框架背后的基础数据结构 3.1 数组 3.2 链表 3.3 哈希表 3.4 二叉树与二叉查找树 3.5 红…...
leetcode 33. Search in Rotated Sorted Array
题目描述 可以发现的是,将数组从中间分开成左右两部分的时候,一定至少有一部分的数组是有序的。左部分[left,mid-1],右部分[mid1,right]。 第一种情况:左右两部分都是有序的,说明nums[mid]就是整个数组的最大值。此时…...
OpenCV 图像色彩空间转换
一、知识点: 1、色彩空间转换函数 (1)、void cvtColor( InputArray src, OutputArray dst, int code, int dstCn 0, AlgorithmHint hint cv::ALGO_HINT_DEFAULT ); (2)、将图像从一种颜色空间转换为另一种。 (3)、参数说明: src: 输入图像,即要进行颜…...
python-leetcode 69.最小栈
题目: 设计一个支持push,pop,top,操作,并能在常数时间内检索到最小元素的栈。 辅助栈法: 1:使用两个栈,一个主栈用于存储所有元素,另一个辅助栈用于存储当前元素的最小值 2: 每次push时,将元…...
C#基础:yield return关键字的特点
一、特点 1.最终返回的结果是IEnumerable<T> 2.使用yield return时,返回的是单个元素(即T) 3.好处:延迟加载,需要时才计算 二、验证 通过打断点可知,只有当listB遍历的时候,才会进入Get…...
机器学习 集成学习方法之随机森林
集成学习方法之随机森林 1 集成学习2 随机森林的算法原理2.1 Sklearn API2.2 示例 1 集成学习 机器学习中有一种大类叫集成学习(Ensemble Learning),集成学习的基本思想就是将多个分类器组合,从而实现一个预测效果更好的集成分类…...
【Vue篇】组件的武林绝学:状态风暴下的乾坤挪移术
引言 🔍 Vue组件迷雾重重? ✧ Scoped如何实现样式隔离? ✧ Data为何必须是函数? ✧ 父子组件如何跨域通信? ✧ Props单向数据流如何破局? 🚀 本文直击组件化七大核心: ▸ 样式隔离原…...
使用亮数据代理IP+Python爬虫批量爬取招聘信息训练面试类AI智能体(手把手教学版)
文章目录 一、为什么要用代理IP?(重要!!!)二、环境准备(三件套走起)2.1 安装必备库(pip大法好)2.2 获取亮数据代理(官网注册送试用) 三、编写爬虫代码&#x…...
【MySQL】第七弹——复习总结 视图
文章目录 🌏客户端和数据库操作🌏表操作🌏CRUD 增删改查总结🌏数据库约束🌏表的设计🌏分组查询🌏聚合函数🌏联合查询🌏SQL语句中各部分的执行顺序🪐视图 &…...
基于Springboot + vue3实现的工商局商家管理系统
项目描述 本系统包含管理员、商家两个角色。 管理员角色: 用户管理:管理系统中所有用户的信息,包括添加、删除和修改用户。 许可证申请管理:管理商家的许可证申请,包括搜索、修改或删除许可证申请。 许可证审批管理…...
前端开发——前端样式BUG调试全指南2025终极版
前端开发——前端样式BUG调试全指南2025终极版 前端样式BUG调试指南(2025终极版)一、调试方法论与工具链1. 问题定位三板斧(1) 现象复现与特征提取(2) 现代调试工具组合拳(3) 三维问题定位法 2. 深度排查六步法步骤1:样式覆盖检测步骤2&#…...
【DeepSeek】为什么需要linux-header
编译Linux驱动程序时,通常需要 Linux内核头文件(linux-headers),而不是完整的源代码(linux-source)。以下是详细解释: 1. 为什么需要内核头文件? 头文件的作用: 内核头文…...
c语言刷题之实际问题
小乐乐定闹钟 代码如下: 小乐乐排电梯 代码如下: 小乐乐与欧几里得 代码如下: 小乐乐改数字 代码如下: 小乐乐走台阶 代码如下: 台阶为1,2时走法分别1,2种 1:(1) 2:(1,1),(2) 要走完n阶时,即我…...
【图像大模型】Kolors:基于自监督学习的通用视觉色彩增强系统深度解析
Kolors:基于自监督学习的通用视觉色彩增强系统深度解析 一、项目架构与技术原理1.1 系统定位与核心能力1.2 核心算法突破1.2.1 色彩感知表征学习1.2.2 动态色彩变换矩阵 二、系统实现与训练策略2.1 训练框架设计2.1.1 自监督预训练 2.2 损失函数设计 三、实战部署指…...
生产消费者模型 读写者模型
概念 生产者消费者模式就是通过一个容器来解决生产者和消费者的强耦合问题。生产者和消费者彼此之间不直接通讯,而通过阻塞队列来进行通讯,所以生产者生产完数据之后不用等待消费者处理,直接扔给阻塞队列,消费者不找生产者要数据…...
每日Prompt:双重曝光
提示词 双重曝光,Midjourney 风格,融合、混合、叠加的双重曝光图像,双重曝光风格。一幅由 Yukisakura 创作的杰出杰作,展现了一个奇妙的双重曝光构图,将阿拉贡阿拉松之子的剪影与生机勃勃春季里中土世界视觉上引人注目…...
基于springboot3 VUE3 火车订票系统前后端分离项目适合新手学习的项目包含 智能客服 换乘算法
博主介绍:专注于Java(springboot ssm 等开发框架) vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆…...
DAY29 超大力王爱学Python
知识点回顾 类的装饰器装饰器思想的进一步理解:外部修改、动态类方法的定义:内部定义和外部定义 作业:复习类和函数的知识点,写下自己过去29天的学习心得,如对函数和类的理解,对python这门工具的理解等&…...
jvm对象压缩
最近在看一些文章,知道64位jvm在启动时指定-XX:UseCompressedOops后就会开启压缩,但是怎么压缩的,以及什么情况下压缩失效,没有一篇文章讲的特别透彻,在这里记录一下,后面抽时间进行更新。 参考文档 https…...
TripGenie:畅游济南旅行规划助手:个人工作纪实(十八)
本周,我增加了网页搜索并在右侧显示搜索链接与标题的功能,通过这个功能,可以帮助用户搜索网络上关于济南旅游的信息,提高用户检索信息的速度,用户可以通过点击网页链接了解更多关于济南的信息。 首先,我设计…...
Brooks Polycold快速循环水蒸气冷冻泵客户使用手含电路图,适用于真空室应用
Brooks Polycold快速循环水蒸气冷冻泵客户使用手含电路图,适用于真空室应用...
Rofin PowerLine E Air维护和集成手侧激光Maintenance and Integration Manual
Rofin PowerLine E Air维护和集成手侧激光Maintenance and Integration Manual...
C++中String类
1.String学习前的了解 1.1范围for和auto关键字 范围 for 循环 范围 for 循环是 C11 引入的一种语法糖,用于简化遍历容器或序列的代码。其基本语法如下: 迭代器版本: 范围for主要用来遍历一个容器(数据结构).范围for的(…...
LSTM语言模型验证代码
#任务:基于已有文本数据,建立LSTM模型,预测序列文字 1 完成数据预处理,将文字序列数据转化为可用于LSTM输入的数据。 2 查看文字数据预处理后的数据结构,并进行数据分离操作 3 针对字符串输入(“In the hea…...