什么是Copilot

GitHub Copilot是由GitHub和OpenAI开发的一种基于人工智能的代码助手。它建立在OpenAI的GPT语言模型之上 Copilot可以在编码过程中提供基于 AI 学习的编码建议。在很多情况下，只需要有注释或者函数名称，Copilot就可以实现完整的代码。

目前Copilot需要在Copilot设置页面使用信用卡订阅方可免费试用1个月。

Coplit能做什么

自动生成代码片段：Copilot可以通过注释或者函数名称自动生成代码片段，从而提高生产力。
支持多种编程语言：Copilot支持多种编程语言，包括JavaScript、Python、TypeScript、Ruby等。目前主要体验了Web前端相关场景
智能代码提示：会根据我们的引入，其他目录的写法。自动提示我们可能需要编写的代码片段

Vs Code如何安装使用Copilot

首先需要在GitHub上为个人帐户注册并且使用VISA信用卡订阅方可开启免费一个月试用，教程详见官网指导 注：公司有代码保密的这里可以不勾选：
安装GitHub Copilot扩展: 在VS Code中打开扩展面板（快捷键为Ctrl + Shift + X或Cmd + Shift + X），搜索 "GitHub Copilot"，然后按照提示进行安装。
认证您的GitHub帐户。在安装完GitHub Copilot扩展后，打开命令面板（快捷键为Ctrl + Shift + P或Cmd + Shift + P），搜索 "GitHub Copilot: Authenticate" 并选择该命令。然后，按照提示登录您的GitHub帐户。
登录完成退出VSCode并且重启。
写一个函数注释，会给出函数名称提示，按下回车，会自动给出函数名提示，然后按下TAB，接受建议即可证明安装成功。

Coplit使用快捷键

Copilot 也提供了一些快捷键，可以很方便地使用。

接受建议：Tab
拒绝建议：Esc
打开Copilot：Ctrl + Enter （会打开一个单独的面板，展示10个建议）
下一条建议：Alt/Option + ]
上一条建议：Alt/Option + [
触发行内Copilot：Alt/Option + （Coplit还没有给出建议或者建议被拒绝了，希望手工触发它提供建议）

前端应用中的体验

JS/TS

工具类：使用Copilot编写前端工具类属实方便快捷而且是常用代码，基本不用担心写错问题，基本技巧就是函数：再加上简短描述，例如

// 函数：计算两个浮点数的差
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只写注释简直秒生成，进一步提高了我们的工作效率（增加摸鱼时间）

正则表达式：正则表达式之前也有可视化的正则表达网站供我们查询参考，但是有了ChatGPT慢慢就赚到ChatGPT,现在加上Copilot更是不用切屏，再一次提高工作效率，试了常用正则表达式也很可以。

// 正则表达式：验证身份证号 
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位数字
// 正则表达式：中文  只能输入中文
// 正则表达式：是否网站链接
..

代码补全：代码补全是给我的惊喜之一，引入Copilot可以在我们需要的位置给我们提示，例如Vue中引入组件后需要再Components声明对应组件，Copilot一键搞定。其他补全功能等详细了解后细谈。

Mock数据：当我们想mock大量数据，又不想自己生成时，可以让copilot帮我们搞定，定义好一些数据格式，只需要写好注释即可

CSS

常见写法提示：CSS在常见写法提示还是比较强大的，可以避免我们一些重复写法。例如：单行文本省略，我们只需要写出“单行”、“多行”，它就很“懂”你。

多行文本省略：

一些不太常见的兼容适配则不太支持：例如我要求它写一个点九图，他就直接给我一个背景图?, 还是ali域名的图片。。。。这部分感觉还是有待加强，或者是注释姿势不对？

其他描述字体色号，背景色这些想必我们也不会写注释让他实现了，直接复制UI给的代码块，岂不美哉。

Vue中体验

尝试让他写了排行榜、规则页几个组件，一些你描述到的地方他还是可以实现，但是还是需要调整下自己所需结构以及格式化代码等。不过我觉得就相当于给你搭了个架子，自己不用去写一些重复性代码，进行修补改正即可，直接贴代码了，大家效果自评～

!-- 一个排行榜列表的vue组件 -->
<template>
  <div class="rank-list">
    <div class="rank-list__title">
      <span class="rank-list__title__text">{{ title }}</span>
      <span class="rank-list__title__more" @click="handleMoreClick">更多</span>
    </div>
    <div class="rank-list__list">
      <div class="rank-list__list__item" v-for="(item, index) in list" :key="item.id">
        <div class="rank-list__list__item__index">{{ index + 1 }}</div>
        <div class="rank-list__list__item__img">
          <img :src="item.img" alt="" />
        </div>
        <div class="rank-list__list__item__name">{{ item.name }}</div>
        <div class="rank-list__list__item__score">{{ item.score }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RankList',
  props: {
    title: {
      type: String,
      default: '排行榜'
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleMoreClick() {
      this.$emit('moreClick');
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/base.scss';
.rank-list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .rank-list__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    border-bottom: 1px solid #eee;
    .rank-list__title__text {
      font-size: 16px;
      color: #333;
    }
    .rank-list__title__more {
      font-size: 14px;
      color: #999;
    }
  }
  .rank-list__list {
    .rank-list__list__item {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0 20px;
      border-bottom: 1px solid #eee;
      .rank-list__list__item__index {
        width: 30px;
        font-size: 14px;
        color: #999;
      }
      .rank-list__list__item__img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .rank-list__list__item__name {
        flex: 1;
        font-size: 14px;
        color: #333;
      }
      .rank-list__list__item__score {
        width: 50px;
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>

<!-- 一个规则页vue2组件： 顶部是一个图标, 宽高都是200px 图片地址先不写。 三行文案，距离图标50px. 字体大小24px, 红色。水平剧中， 第一句文案：你好， 第二句文案hello, 第三局文案：洒大地啊啥的啊啥的啊啥的啊啥的啊实打实打啥的啊啥的爱上打的爱上 -->
<template>
    <div class="rule">
        <div class="rule__title">
        <span class="rule__title__text">{{ title }}</span>
        <span class="rule__title__close" @click="handleCloseClick">关闭</span>
        </div>
        <div class="rule__content">
            <img class="rule__content__img" :src="img" alt="" />
        </div>
        <div class="rule__content__text">
            <div class="rule__content__text__item">你好</div>
            <div class="rule__content__text__item">hello</div>
            <div class="rule__content__text__item">洒大地啊啥的啊啥的啊啥的啊啥的啊实打实打啥的啊啥的爱上打的爱上</div>
        </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Rule',
  props: {
    title: {
      type: String,
      default: '规则'
    },
    img: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleCloseClick() {
      this.$emit('closeClick');
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/base.scss';
.rule {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .rule__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    border-bottom: 1px solid #eee;
    .rule__title__text {
      font-size: 16px;
      color: #333;
    }
    .rule__title__close {
      font-size: 16px;
      color: #333;
    }
  }
  .rule__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .rule__content__img {
      width: 200px;
      height: 200px;
      background-color: #eee;
    }
    .rule__content__text {
      margin-top: 50px;
      .rule__content__text__item {
        font-size: 24px;
        color: #f00;
        text-align: center;
      }
    }
  }
}
</style>

#总结

JS/TS工具以及通用方法、正则相关、代码补充这部分效果还是很满意并且基本不用我们调整review能够很大程度上提高我们这部分效率
CSS 一些常见的写法组合也能帮我们实现，节省我们自己的时间，并且还是能猜出我们大致要写什么还是能一定程度上提高我们效率。如果一些复杂写法也再支持就更好了。
Vue: 想要直接用Copilot写一个完整组件的话，还是有些麻烦，首先样式方面你就很难描述的很清楚，更多的是搭一个架子使用，一些生命周期以及变量帮我们声明好，然后我们只需要调整样式以及布局即可。
太贵了！太贵了！太贵了！！！

Web前端Copilot使用初体验（一）