# 什么是Copilot [GitHub Copilot](https://github.com/features/copilot/)是由GitHub和OpenAI开发的一种基于人工智能的代码助手。它建立在OpenAI的GPT语言模型之上 Copilot可以在编码过程中提供基于 AI 学习的编码建议。在很多情况下，只需要有注释或者函数名称，Copilot就可以实现完整的代码。目前Copilot需要在[Copilot设置页面](https://github.com/settings/copilot)使用信用卡订阅方可免费试用1个月。 # Coplit能做什么 1. 自动生成代码片段：Copilot可以通过注释或者函数名称自动生成代码片段，从而提高生产力。 2. 支持多种编程语言：Copilot支持多种编程语言，包括JavaScript、Python、TypeScript、Ruby等。目前主要体验了Web前端相关场景 3. 智能代码提示：会根据我们的引入，其他目录的写法。自动提示我们可能需要编写的代码片段 # Vs Code如何安装使用Copilot 1. 首先需要在GitHub上为个人帐户注册并且使用VISA信用卡订阅方可开启免费一个月试用，教程详见[官网指导](https://docs.github.com/zh/copilot/quickstart) ***注：公司有代码保密的这里可以不勾选：*** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83ea2388d0614b5a8301b2aabc2086e3~tplv-k3u1fbpfcp-watermark.image?) 3. 安装GitHub Copilot扩展: 在VS Code中打开扩展面板（快捷键为Ctrl + Shift + X或Cmd + Shift + X），搜索 "GitHub Copilot"，然后按照提示进行安装。 4. 认证您的GitHub帐户。在安装完GitHub Copilot扩展后，打开命令面板（快捷键为Ctrl + Shift + P或Cmd + Shift + P），搜索 "GitHub Copilot: Authenticate" 并选择该命令。然后，按照提示登录您的GitHub帐户。 5. 登录完成退出VSCode并且重启。 6. 写一个函数注释，会给出函数名称提示，按下`回车`，会自动给出函数名提示，然后按下`TAB`，接受建议即可证明安装成功。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/103d297e38184c6aa3819a60d239a677~tplv-k3u1fbpfcp-watermark.image?) # Coplit使用快捷键 Copilot 也提供了一些快捷键，可以很方便地使用。 - 接受建议：`Tab` - 拒绝建议：`Esc` - 打开Copilot：`Ctrl + Enter` （会打开一个单独的面板，展示10个建议） - 下一条建议：`Alt/Option + ]` - 上一条建议：`Alt/Option + [` - 触发行内Copilot：`Alt/Option + ` （Coplit还没有给出建议或者建议被拒绝了，希望手工触发它提供建议） # 前端应用中的体验 ## JS/TS 1. **工具类**：使用Copilot编写前端工具类属实方便快捷而且是常用代码，基本不用担心写错问题，基本技巧就是函数：再加上简短描述，例如 ```js // 函数：计算两个浮点数的差 export function accSub(arg1, arg2) { let r1; let r2; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } const m = Math.pow(10, Math.max(r1, r2)); return (arg1 * m - arg2 * m) / m; } // 函数：防抖函数 export function debounce(func, delay) { let timer; return function (...args) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 函数：节流函数 export function throttle(func, delay) { let timer; return function (...args) { if (!timer) { timer = setTimeout(() => { timer = null; func.apply(this, args); }, delay); } }; } // 函数：判断是否是IOS 是IOS返回true // 函数：获取当前时间磋 ``` 虽然一些写法我们网上一搜或者代码copy也能写出来，但是有了copilot只写注释简直秒生成，进一步提高了我们的工作效率（增加摸鱼时间） 2. **正则表达式**：正则表达式之前也有可视化的正则表达网站供我们查询参考，但是有了ChatGPT慢慢就赚到ChatGPT,现在加上Copilot更是不用切屏，再一次提高工作效率，试了常用正则表达式也很可以。 ```js // 正则表达式：验证身份证号 export function isvalidIdCard(str) { const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ return reg.test(str); } // 正则表达式：验证密码 6-20位数字和字母组合 export function isvalidPassword(str) { const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/ return reg.test(str); } // 正则表达式：验证银行卡号 16-19位数字 // 正则表达式：中文只能输入中文 // 正则表达式：是否网站链接 .. ``` 3. **代码补全**：代码补全是给我的惊喜之一，引入Copilot可以在我们需要的位置给我们提示，例如Vue中引入组件后需要再`Components`声明对应组件，Copilot一键搞定。其他补全功能等详细了解后细谈。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04fd542582ab4b37a25863ebe3ee3c26~tplv-k3u1fbpfcp-watermark.image?) 4. **Mock数据**：当我们想mock大量数据，又不想自己生成时，可以让copilot帮我们搞定，定义好一些数据格式，只需要写好注释即可 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a32daccb6a074033ae4fe229499c6f5d~tplv-k3u1fbpfcp-watermark.image?) ## CSS 1. 常见写法提示：CSS在常见写法提示还是比较强大的，可以避免我们一些重复写法。例如：单行文本省略，我们只需要写出“单行”、“多行”，它就很“懂”你。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0e5235f9b3044dc9275061812e94bf8~tplv-k3u1fbpfcp-watermark.image?) 多行文本省略： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d04444c97e343cb8275e475b4c9af31~tplv-k3u1fbpfcp-watermark.image?) 2. 一些不太常见的兼容适配则不太支持：例如我要求它写一个点九图，他就直接给我一个背景图?, 还是ali域名的图片。。。。这部分感觉还是有待加强，或者是注释姿势不对？ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04260176be9a42d5a8328e0faa5a8127~tplv-k3u1fbpfcp-watermark.image?) 3. 其他描述字体色号，背景色这些想必我们也不会写注释让他实现了，直接复制UI给的代码块，岂不美哉。 ## Vue中体验尝试让他写了排行榜、规则页几个组件，一些你描述到的地方他还是可以实现，但是还是需要调整下自己所需结构以及格式化代码等。不过我觉得就相当于给你搭了个架子，自己不用去写一些重复性代码，进行修补改正即可，直接贴代码了，大家效果自评～ ```js !-- 一个排行榜列表的vue组件 --> ``` ```js ``` #总结 1. JS/TS工具以及通用方法、正则相关、代码补充这部分效果还是很满意并且基本不用我们调整review能够很大程度上提高我们这部分效率 2. CSS 一些常见的写法组合也能帮我们实现，节省我们自己的时间，并且还是能猜出我们大致要写什么还是能一定程度上提高我们效率。如果一些复杂写法也再支持就更好了。 3. Vue: 想要直接用Copilot写一个完整组件的话，还是有些麻烦，首先样式方面你就很难描述的很清楚，更多的是搭一个架子使用，一些生命周期以及变量帮我们声明好，然后我们只需要调整样式以及布局即可。 4. 太贵了！太贵了！太贵了！！！